Category Archives: Bootstrap

Bootstrap

[RESOLVED]datepicker work once in partialview mvc5

Hi,I’m having this annoying problemwith datepicker.
I’m working with MVC5, Bootstrap, jquery 1.10.2 and jquery-ui-1.11.1.
I have 2 datepickers in a partial view that is call it from a bs modal, and when I show the modal a second time, the datepicker stop working, and I’ve tried almost everything, take a look:

**JS Code**

<script type="text/javascript">
(function () {
$("#EDate").datepicker();
$("#RDate").datepicker({ minDate: "-1d" });

$("#divm").on("hidden.bs.modal", function () {
$(".datepicker").datepicker("destroy");
$(".datepicker").removeClass("hasDatepicker").removeAttr('id');
})
})();
</script>

**Razor Code**

@Html.EditorFor(model => model.EntryDateOperation, new { htmlAttributes = new { id = "EDate", @class = "form-control datepicker" } })
@Html.EditorFor(model => model.EntryDateOperation, new { htmlAttributes = new { id = "RDate", @class = "form-control datepicker" } })

**The bootstrap modal**

<div id="divm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Embarcaciones" aria-hidden="true">
<div class="modal-dialog" style="text-align:right">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div style="text-align:left">
<h4 class="modal-title" id="mTitulo">Nueva Embarcaci&oacute;n</h4>
</div>
</div>
<div id="mEdit" class="modal-body" style="width:100%; text-align:center">
@{Html.RenderPartial("_myclass", Model.Myclass);}
</div>
</div>
</div>
</div>

**and I added z-index on jquery ui css**

.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
z-index: 9999999 !important;
}

As you can see I have tried almost everything, but I don’t know what else can I do, Thanks for any kind of help :)

lebarros

$(".datepicker").datepicker("destroy");

I believe this could be the problem. You are removing the date picker with the destroy method

[RESOLVED]Can Asp.net mvc on visual Studio 2012 , creates mobile views (with .mobile.cshtml extension) that are based on jQuery mobile

Currently i want to create a new asp.net mvc4 web project inside Visual Studio 2012. but i have the following question about the current capabilities for creating mobile views.

For example if i right click on an action method , i will get a dialog to create a new view, and it will automatically create a View (with .cshtml) for me using some bootstrap classes to have a responsive design, but my question is if there is way to create
mobile specific views using the same approach . or if i want to create a mobile specific view that uses jquery mobile i need to do this from scratch, i mean asp.net mvc and visual studio only supports creating view that have .cshtml and not based on jQuery
mobile?

Yah, just follow bootstrap’s mantra "mobile first"

http://getbootstrap.com/css/

i did not mean if asp.net mvc supports rendering mobile views , what i meant is if Razor can automatically generate views based on jQuery mobile. For example in asp.net mvc 5 & Visual studio 2013 will generate the views based on Bootstrap template for desktop
browser. but is there a way to generate views based on jQuery mobile (i mean automatic generation, by right click on the action method and create a new view, so the generate view will have .mobile.cshtml and will use the jquery mobile syntax ?)

I don’t think there is a mobile view scaffolding generator. You should manually create it. You can create a template and use it for all your mobile views.

I think although MVC4 uses Razor finally it’s rendering into a html file in the browser.So you can define your all css responsive classes with divs inside a layout file.You can find default layout files inside the Shared folder under the Views folder.By
right click you can create a new layout file as i said above with your Bootstrap or whatever responsive files.And finally when creating views you can define that created layout for the views.

[RESOLVED]Using col-sm & col-xs without specifying the senario for the large screen

I have the following code inside a web template that i am using :-

</div>
<div class="row panel">
<div class="col-sm-3 hidden-xs">
@Html.Action("Menu", "Nav")
</div>
<div class="col-xs-12 col-sm-8">
@RenderBody()
</div>
</div>

but now i got confused on how the two divs will display in a full screen (large screen), as i understand the markup as follow:-

- the Menu will be hidden on X-small screens and occupy 3 columns on small size,, but what about large screens ?

- the RenderBoy will occupy 12 in x-small screens and 8 in small but what about large screens ?

Can anyone advice ?

Thanks

if you look at the break points in the documentation for Bootstrap it shows that the classes "cascade" up so if you only set the col-sm-8 it is also then col-md-8 and col-lg-8 without specifying it.

http://getbootstrap.com/css/

hope it helps

Hi john,

First, please refer to remojr76’s reply

Secondly, base on http://getbootstrap.com/css/#grid, it says that:

•Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Best Regards

Starain Chen

Bundle process removing css content property

After i bundle my css all css content property are change to
?

I tested and have the same issue with vs2012 and 2013, with first and lastest version of web.optimization and webgrease, single or double quotes make no diference, still removing the content property value and set as
?

UPDATE

I was thinking maybe, the problem is with encoding or line endings and again… makes no diference, tested with Unix, Windows, UTF8 with and without BOM, Windows 1252, ISO-8859-1.

Bundle register:

bundles.Add(new StyleBundle("~/Content/Css/Styles").Include( "~/Content/Css/iconFont.css", "~/Content/Css/metro-bootstrap.css", "~/Content/Css/metro-bootstrap-responsive.css", "~/Content/Css/select2.css", "~/Content/Css/Site.css"));

Before bundle:

.icon-newspaper:before {
    content: 'e001';
}

.icon-pencil:before {
    content: "e002";
}

After bundle:

.icon-newspaper:before{
    content:"?"

}

.icon-pencil:before{
    content:"?"
}

Interesting…. just yesterday I was having bundling issues with both CSS and JS files.  What I found out and I don’t know why was if I removed all MIN files my issues went away!  

Thanks for reply. 

All min files are already removed.

Have you tried using the minification with WebEssentials first to see if that helps?

Thanks for trying to help as you said i try with web essentials and same issue… i even uninstall web essentials for sure.

[RESOLVED]MVC Grid List and details redirect using Web API and Javascript

Using MVC, Web API, and JavaScript Create a website that has the following:

1. Landing page that displays a list of machines (name, description)

2. Each machine has a link to show its details. (Use Asp.Net MVC).

3. Display machine details and let the user enable or disable it (Use Asp.Net Web API).

4. Next to the machine details, show a list of "measurements" for the machine by polling the server every 3 seconds and append the measured information which is returned from the server (random number) to the list. (Use JavaScript + Web API).

Notes: Machines must be persisted in memory, having an initial set of 10 machines.

Data points for each machine don’t have to be persisted. Each machine has the following properties: Id, description and status (enabled, disabled)

Use bootstrap or similar for layout and styling. 

Can someone give me the code for bove or point me to rsources on the web . I am completely new to MVC and any help is welcome

Thanks

ROHITJGC

Can someone give me the code for bove or point me to rsources on the web . I am completely new to MVC and any help is welcome

THis is a basic application. Please see tutorials from http://www.asp.net/mvc

Hi ROHITJGC,

ROHITJGC

1. Landing page that displays a list of machines (name, description)

2. Each machine has a link to show its details. (Use Asp.Net MVC).

You could refer to this article below:

# MVC Music Store

http://www.asp.net/mvc/tutorials/mvc-music-store/mvc-music-store-part-1

ROHITJGC

3. Display machine details and let the user enable or disable it (Use Asp.Net Web API).

Just need to update the record in the database

ROHITJGC

4. Next to the machine details, show a list of "measurements" for the machine by polling the server every 3 seconds and append the measured information which is returned from the server (random number) to the list. (Use JavaScript + Web API).

Using jQuery AJAX to request the data.

ROHITJGC

Notes: Machines must be persisted in memory, having an initial set of 10 machines.

You could store the data in the session

ROHITJGC

Use bootstrap or similar for layout and styling. 

Please refer to:

# Bootstrap Overview

http://getbootstrap.com/css/

You need to try it by yourself, if you have the issues, please create the thread for each issue.

Best Regards

Starain

I have completed the first 2 points 

3. Display machine details and let the user enable or disable it (Use Asp.Net Web API).

First they dont want check boxes but Enable and Disable Buttons , I saw on below site 

http://jameschambers.com/2012/07/bootstrapping-mvc-say-no-to-checkboxes/  but getting error

0x800a1391 – JavaScript runtime error: ‘$’ is undefined

Also  How to use ASP.net Web API to do the edits??????

4. Next to the machine details, show a list of "measurements" for the machine by polling the server every 3 seconds and append the measured information which is returned from the server (random number) to the list. (Use JavaScript + Web API).

I have no idea about polling the server every 3 seconds what does this mean and How to append this information to a list

Hi ROHITJGC,

ROHITJGC

First they dont want check boxes but Enable and Disable Buttons , I saw on below site 

http://jameschambers.com/2012/07/bootstrapping-mvc-say-no-to-checkboxes/  but getting error

0x800a1391 – JavaScript runtime error: ‘$’ is undefined

Also  How to use ASP.net Web API to do the edits??????

For this error, you need to load the jQuery files.

About the issue of Web API, please post it to the
Web API
forum.

ROHITJGC

I have no idea about polling the server every 3 seconds what does this mean and How to append this information to a list

Please refer to:

# JavaScript Timing Events

http://www.w3schools.com/js/js_timing.asp

# jQuery.ajax()

http://api.jquery.com/jquery.ajax/

Best Regards

Starain

[RESOLVED]How to learn MVC well?

Hi guys ,

    Recently I was asked to handle a project using MVC5. I’m a fresh man of Asp.net , and before I try to learn Asp.net WebForm an exported who has plenty asp.net developing exprience told me that I’d better jump over the traditional WebForm, and start to
learn MVC directly. Well I’ve learned this "http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started"  and tried the whole sample. But where should I put my right
foot after that ? I know that I’m still far away from a MVC developer, but what I should learn next ? How many things else I need to know before I can use MVC to build a site like this one ?

Thanks for any suggestion :)

I am currently learning MVC modern framework. Do you have a project at work you are working on? If not, no worries, more time for you to learn on your own (I hope). Please take a peak at the Adam Freeman books. See here: http://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=Pro+ASP.NET+MVC+5 I
am currently going through them. It will take time. Most importantly, can you think of a cool custom project you want to do? Even if you don’t know how to code the features. Try to build your idea piece by piece. As many Microsoft developers have commented
on their own tutorials, we should really try to learn by doing. 

I am constantly looking for more tutorials and materials myself. My current challenge is finding decent resources for authentication. Hang in there. :) 

Hlyates, what about authentication are you trying to find resources for? Maybe I can help!

Hey Robin,

An enterprise level MVC application would probably use some of the following:

Client Side:

  • HTML
  • CSS
  • jQuery
  • Javascript
  • Ajax

Server Side:

  • .NET MVC
  • C#
  • SQL
  • Entity Framework

Some other general things that will help along the way:

  • Security
  • Continuous Integration and Deployment
  • Caching
  • Client and Server side debugging tools
  • Unit/Integration/Acceptance testing

I was thinking of creating something that helped people create an Enterprise grade website from scratch. This would help you learn all of the skills, at least at a high level, and also have something to add to your portfolio for jobs.

Does that sound like something you would be interested in/that would be useful?

Steve

Just ask here in the forums if you don’t understand something. And do a lot of research
Smile

stephenmichaelf7

Hlyates, what about authentication are you trying to find resources for? Maybe I can help!

Anything that I can find that is MVC 5. I would like to find source code to study and tutorials. Please read my post

here
. As for making tutorials yourself, yes, anything you would like to share helps. Additionally, any resources to help learn HTML/CSS/JQuery/JavaScript for ASP.NET MVC specifically?

Hi Robin,

Thanks for your post.

Robin20091010

I’m a fresh man of Asp.net

I suggest that you can follow this tutorial:

http://www.asp.net/mvc/tutorials/mvc-music-store and you can download the completed code to learn

Hope this can be helpful.

Best Regards,

Eileen

Hi Steve,

Many thanks 2u man! That’s almost the perfect answer I’m looking for! 

Also I’m thinking about that maybe I need a "more complicated" sample for me to learn to.

Actually in the past few year I’ve majored in Winform development using C#, so I think I’m kinda familiar with C#/MsSql/CI/UnitTest methodoloies,but web developing skills are always my weakness :(    Recently I’ve learned by myself HTML/CSS/Javascript, yet
cannot expertly to use those three. So my question after I finished the "Getting Start Sample" was how to use MVC to create an excellent/good looking page…like some popup dialogs or something else to make it more "professional" , or as "Enterprise grade
" like you said. I have a little experience on WebForm developing, but it doesn’t help me at all. Anyway, thanks for your advise so much!

Have a nice day, thank you again :)

Robin.

Hi Eileen,

Thanks very much.It’s a good suggestion for me. I’ll check it out immediately!!!

Robin.

Hi hlyates,

Thanks very much!

"Do you have a project at work you are working on" — yes, it’s coming soon to me in 1 week :( 

Anyway, I would like to read that book you recommend to me ASAP.

Have a nice day :)

Hey Robin,

The quickest way to get started with design is to use Bootstrap, which is actually included in new MVC projects.

You can find it here:

http://getbootstrap.com/

It sounds like there are two different things you are asking for.

The first is the skill of HTML/CSS/Javascript, and the second is how to design and make things look professional.

While they are related they are also two different things.

What resources have you used for HTML/CSS/Javascript? For design, check out this book:

Design For Hackers

It goes over the main design principles for developers.

Steve

Hello Stephen,

Again, thanks for you suggestion.

Well , I basically learned Front-end developing skills from W3CSchool site and a book "javascript professional", and I tried a lot of tiny demos, but that’s far away to be called professional. I agree with you about " two different things you are asking
for
" and yes, both of those two are my weakness :(  

Maybe I asked that in a wrong way, I think actually I’m wondering if there’re some examples for me to understand how could I create an "enterprising" website with asp.net MVC. 

As you may know, with Asp.net, it’s a little bit easier to create an aspx webform page contains a popup window, or some cool/good-looking things, because the web controllers make it easy to do so. I guess it’s not a good way to develop any web applications
with web controller, but with MVC, eh…I don’t know how to arrange my page at all. The reason I like the artical "Getting started with mvc5" so much is the author introduce me a lot of basic knowledge about MVC through a simple demo. But I still have many
questions about MVC and don’t know what kind of things I need to know deeper for the coming project :( And that’s why I post my question here for help.

Anyway, thank you sooooo much! Have a nice day man :)

Robin.

[RESOLVED]Suggestions on Single Page Applicatin Design

we have a new project requirement where we need to develop a single page application. My manager told me to do a research like whether we can use any content management system. Our requirement is we have lots of plugins. We are planning to create plugin
download and help system, where others can download the plugins,see demos and copy the code like the jquery.com and getbootstrap like below.Also we need to add a rating feature for each plugin.

http://getbootstrap.com/components/

Our client need it as a SPA and asked to check any CMS(content management system) like orchard,Drupal,WordPress or anything will help. Or we he put an option of Sharepoint or a MVC application with Angular/JQuery. Could you please give your suggestions for
the same.

If you are going to use a content management system (CMS) to host your SPA, then you looking for a CMS system that has a rest interface that supports the feature you need. Is the SPA just for the end user, or do need it to create content and do approval?

With a CMS system, you will probably not be writing much server code, so you want a full featured one. You also want a CMS that supports javascript pages. Your choices of CMS should support the content creation feature you require.

You would still use angular or client framework of your choice.

[RESOLVED]Drop Down with bootstrap can't format it… New help.

I have the following code and I’m not sure how to apply the bootstrap on the drop down.

Full code:

  <div class="form-inline">
            Find by Last Name or First Name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as String, new { style = "width:200px", @class = "form-control" })

            Location:

            @Html.DropDownList("LocationList", "All")

            <input type="submit" value="Search" class="btn btn-default" />
        </div>

Drop Down. Not sure what I have to modify here.

            @Html.DropDownList("LocationList", "All")

Generally, Bootstrap would use the "form-control" class to indicate a particular element should be a DropDown as your DropDownList helper should render a <select> element :

@Html.DropDownList("LocationList, new SelectList(...), "Select A Location", new { @class = "form-control" })

The second parameter for the DropDownList helper accepts a SelectList, which you’ll likely want to populate within your Controller Action and pass to your DropDownList using something like the following that would define a List of Roles :

// Build a List of Roles
ViewBag.Roles = new SelectList(await RoleManager.Roles.ToList(), "Name", "Name");
// Show your View
return View();

and :

@Html.DropDownList("Role, ViewBag.Roles, "Select A Role", new { @class = "form-control" })

I’ve also found that it’s quite easy to handle this manually as well :

<div class="dropdown">
    <select id='LocationList' name="LocationList" class="form-control">
        <!-- Add your elements either manually or using a Collection -->
        @foreach (var location in ViewBag.PossibleLocations)
        {
              <option value="@location .Value" @(location .Selected ? "selected" : "")>@location.Text</option>
        }
    </select>
</div>

You can see a very rough example of what this might look like here.