Subscribe to Sergio Tapia - Lost in the GC.        RSS Feed

Using jQueryUI in EditorTemplates for your ASP.Net MVC3 website.

Icon 2 Comments
Today I'm going to show you how to create an editor template for DateTime objects in your model.

This is what we're aiming for. A label for our input, and when the input has focus we should display a nice DatePicker widget kindly provided for free by the excellent jQueryUI library.

Posted Image

First let's head on over the web, and find the link to Google's copy of jQuery and jQueryUI. The key benefit of using these copies is that there is a very high chance your end users already have the libs in their browser cache. This means a snappier loading time and less bandwith costs to your website.

You can find the libs here, free of charge:

Let's open up our _Layout.cshtml file and make a reference to the two addresses that provide the libraries.

<!-- This is the jQuery library. Minified to make the loading smaller. -->
<script src="" type="text/javascript"></script>

<!-- This is the jQueryUI library. Minified to make the loading smaller. -->
<script src="" type="text/javascript"></script>

The reason we've placed this into our _Layout.cshtml file, is so we can easily reference any part of jQuery or jQueryUI from any View in our application. Is this the best choice? That depends on what your needs are, you have to make that call.

The Model

Let's shift our focus to the model. We're going to use this model, called UserModel.cs

public class UserModel 
    [Required(ErrorMessage = "Debe escribir su fecha de nacimiento")]
    [Display(Name = "Fecha de Nacimiento")]
    public DateTime DateOfBirth { get; set; }

Notice that the type for our property is DateTime.

Next in our View (which can be any view), we're going to be calling on this model and it's property.

@model Project.WebUI.Models.UserModel

<div class="editor-label">
    @Html.LabelFor(model => model.DateOfBirth)
<div class="editor-field">
    @Html.EditorFor(model => model.DateOfBirth)
    @Html.ValidationMessageFor(model => model.DateOfBirth)

The Editor Template

The EditorFor method is going to go looking for an EditorTemplate, however we don't have one setup. Let's make one now.

In your Views/Shared folder, create a new folder called EditorTemplates. Inside create a PartialView called DateTime.cshtml. This is going to force MVC3 to use this editor template for all DateTime objects in any model.

Posted Image

@model DateTime

@Html.TextBox("", Model, new { @class = "date-selector" })

We explicitly state that the model for that PartialView is a DateTime object. Next we generate a textbox input for that property and also assign a css class to it, called "date.selector".

Now we need to break out some jQuery to wire up the widget. We're going to ask jQuery that for every element with the date-selector class, attach a DatePicker widget to it. This is done in the _Layout.cshtml file or you can do it in that specific view. Once again, your choice.

<script type="text/javascript">
    $(document).ready(function () {

With all that in place, you now have a nifty jQuery widget that will always pop up on properties that have DateTime as the type. Thanks for reading!

2 Comments On This Entry

Page 1 of 1


23 August 2011 - 03:44 PM
I'm learning MVC along with beginning c#, you're tutorials are great and I always hunger for more!

Sergio Tapia 

23 August 2011 - 03:55 PM
Hey thanks for the kind words. I'm glad you enjoy them. :)
Page 1 of 1

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

0 user(s) viewing

0 Guests
0 member(s)
0 anonymous member(s)

About Me

Posted Image

Bienvenidos! I'm a USA ex-pat living in Bolivia for the past 10 years. Web development is my forte with a heavy lean for usability and optimization. I'm fluent in both English and Spanish. I guest write for the popular Python website Python Central. Visit my website.