Using jQuery datepicker with MVC3 textboxes

This post addresses two issues:

1. Using the built-in ASP.NET Development Server vs. IIS to render the datepicker. If you are using IIS, skip to the second section.
2. Dependencies necessary to get the jquery ui datepicker to work in an MVC3 project.

ASP.NET Development Server

I repeatedly have issues with AJAX controls (like the ModalPopup control) rendering with the correct styles using the ASP.NET Development Server vs. IIS. The jquery datepicker is no exception, but this time it surfaces as the following error “Microsoft JScript runtime error: Object doesn't support this property or method” in the jquery-1.5.1.min.js, which isn’t very helpful for troubleshooting.

On a hunch, I decided to configure the project as an application in IIS and access it via localhost/appname instead of the dynamically addressed port of the ASP.NET Development Server - giving me a more meaningful error to troubleshoot.

jQuery UI dependencies

Using the IIS served application, I received the tiny warning triangle in the lower left corner of IE that indicates a javascript error, “Message: Object doesn't support this property or method”. The offending line of code was $("#EstDateStarted").datepicker();.

My project was based on the standard Visual Studio 2010 MVC3 project template which included only the jquery-1.5.1.min.js in the _Layout.cshtml file using the Razor rendering engine. The .datepicker function is not located in that javascript file it is in the jquery-ui-1.8.11.min.js file. All I needed do to enable that functionality and resolve the error was to add the following reference to the head of the _Layout.cshtml file, which includes it on all the pages of the app:

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">

photo credit: augapfel / CC BY-SA 2.0