ASP.NET MVC 4, VS 2012 and the Usage of jQuery UI

It took really some time to get the ASP.NET MVC jQuery sample on ASP.NET running.

At the time of writing, the sample was based on MVC 3, while I was working with MVC 4. Well, not a big deal, just change the name of some .css and .js files. But that doesn’t made it work. Starting the app, there was always an error indicating the datepicker function was unkown. And of course, the datepicker was not shown.

The solution was, as almost always, quite simple. For whatever reason, the _Layout.cshtml file generated by VS 2012 when creating an ASP.NET MVC 4 project, contains the following line at the bottom:

@Scripts.Render("~/bundles/jquery")

Removing this line made the jQuery UI parts work. Of course one should not forget to include the jQuery script and .css files into the header section of the layout file or move that line up there.

VS 2012 Recent Project List

For whatever reason, the VS dev team decided to remove the Recent Projects from the File menu. Thankfully, they did not removed the command itself.

The only thing one has to do is right-click the menu bar (or go to Tools / Customize), switch to the Commands tab page, select the File menu bar entry in the combo box, add a new menu named Recent &Projects, and move it wherever you like. Then select the newly created menu bar in the “Menu bar” combo box and add the command Recent Project List.

Tired Of Office / Visual Studio Yelling!

Have you already installed Office 2013 and / or Visual Studio 2012? And are you one of the “old-fashioned” internet guys who understand UPPERCASE as yelling? Then you might feel uncomfortable when you are looking at the headings of Office’s and Visual Studio’s ribbon bar.

Thankfully, others were already tired of too, so there is an almost simple solution.

For Office, go to www.dreamwalkerblog.com/blog/2012/12/fix-the-casing-on-new-microsoft-applications/, download the zip file, and run it. Maybe have a look at it prior to execution, it might contain a virus 😉 At the time of writing it didn’t. It was just copying a few files. This saves you from manually editing the ribbon bar, as described in www.askvg.com/how-to-get-rid-of-all-caps-tab-titles-in-microsoft-office-2013-ribbon/.

To change Visual Studio, one has to set a registry key, as described in blogs.msdn.com/b/zainnab/archive/2012/06/14/turn-off-the-uppercase-menu-in-visual-studio-2012.aspx. The zip file mentioned above includes this too. But you should remove the registry settings you do not need. Maybe you have to open the command line as an administrator. On my machine, that part did not work, but it’s really easy to use regedit.

And to see what the community thinks about this “feature”, see social.msdn.microsoft.com/Forums/eu/officedevpreview/thread/39b4b762-5ffa-4306-8c6a-7811d022334a.

Update 2013-07-31: Configure VS 2013 (Preview)
Found a good description at Stack Overflow. Just setting the registry key like done for VS2012 did not work on my machine. I installed the VSCommands.

ASP.NET MVC 4 jQuery Validation Globalization

Going thru the ASP.NET MVC 4 intro on www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-model, I thought that I couldn’t believe what I saw.

In this intro, a MVC Web application is built, having a page to enter movie data, including a date and a price. The price is a decimal value.

Now on my machine, the culture is en-US, while the UI culture is de-DE. Saving a price of 9.78 (where the point is the decimal separator), the app writes 978 into the database. And trying to save a date in German format (dd.MM.yyyy) leads to an “invalid date format” error on the client. On the other hand, the date entered in en-US format (MM/dd/yyyy), was displayed in German format after reading.

The kind of problem is not new to me. Working with UI apps (and not just in that case), one always has to consider the culture settings. What causes my surprise was the fact that still there seems to be no built-in support to handle this issue. Even ASP.NET MVC 4 is not able to handle this itself, making sure the client side validator validates the values using the correct culture settings 🙁

Well, I looked around a little bit, and found a solution. It doesn’t make me happy, but it works.

First, I extended the system.web section of the web.config to enable ASP.NET to set the UI culture and culture for a Web page automatically, based on the values that are sent by a browser:

<globalization enableClientBasedCulture="true" 
  culture="auto:en-US" 
  uiCulture="auto:en"/>

And then I extended the view with this code:

<script src="~/Scripts/globalize.js" type="text/javascript">
</script>
<script src="~/Scripts/globalize.culture.de-DE.js" type="text/javascript">
</script>
<script src="~/Scripts/globalize.culture.en-US.js" type="text/javascript">
</script>

<script>
  $.validator.methods.number = function (value, element) {
    return this.optional(element) ||
        !isNaN(Globalize.parseFloat(value));
  }

  $.validator.methods.date = function (value, element) {
    return this.optional(element) ||
        Globalize.parseDate(value);
  }

  $(document).ready(function () {
    Globalize.culture('@System.Threading.Thread.CurrentThread.CurrentCulture');
  });
</script>

<script>
  jQuery.extend(jQuery.validator.methods, {
    range: function (value, element, param) {
      //Use the Globalization plugin to parse the value        
      var val = Globalize.parseFloat(value);
      return this.optional(element) || (
          val >= param[0] && val <= param[1]);
    }
  });
</script>

Update: Please have a look at the comments below. Dan shared his solution for the situation when the user is in a browser that has native datepicker/number support and an unknown culture (i.e. you don’t want to account for and load ALL globalize.js culture files. Thanks, Dan!

Since this code is needed by several views, I put it into a partial view and included it into the Scripts section using

@Html.Partial("_PartialViewName");

In this context I think it’s worth it to mention that the link to the jQuery Globalization plugin https://github.com/nje/jquery-glob, which is mentioned in the Web several times, works, but the new location, where it should reside now (https://github.com/jquery/jquery-global, is not valid. I found the required files on https://github.com/jquery/globalize and copied the required files from the lib directory.