How to make JQuery work with ASP.NET Web Content Form?

by Rohit 6. May 2011 16:50

In an ASP.NET application, making JQuery work with a Master Page and Web Content Form is often a matter of confusion for beginners. Since the Web Content Form doesn't have a HTML HEAD section, novice programmers often get baffled on where to put references to JQuery necessary files and CSS files.

Below I show you how simply you can make JQuery work in an application with a Master Page and a Web Content Form. To make this example work, you need to download few files and add their references to your Visual Studio project. This example uses Visual Studio 2008 with .NET Framework 3.5 SP1.

JQuery core file needed

jquery-1.5.1.min.js

You can download this file from JQueryUI website.

JQuery DatePicker plugin

I am taking a JQuery DatePicker plugin from Keith Wood's blog.

A DatePicker can easily be added as a popup to a text field or inline in a division or span with appropriate default settings. The popup shows when the field gains focus and is closed by clicking on the Close link or clicking anywhere else on the page. You can also remove the DatePicker widget if it is no longer required.

We need two files of this plugin to display a simple DatePicker:

jquery.datepick.js, and
jquery.datepick.css

To start with:

  • Create a simple ASP.NET website using Visual Studio. As I said before, I am using Visual Studio 2008 for this example. (You can try this example with the latest version as well, but I have not tested this example on the latest version.)
  • Add a Master Page [In this example it is named: Master1.master]
  • Add a Web Content Form. Don't forget to link it up with the Master Page, Master1.master, we added above.

This is how the Solution Explorer on my desktop looks like:

More...

About Rohit Prakash

Software Craftsman @ Fortune 100 Company. Technical Reviewer of few programming books.

A Single, Writer, Reader and Adventurist.

You can reach me at:

rohit [at] irohitable.com

Month List

Protected by Copyscape Web Plagiarism Software