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:

I have created a folder named "Custom JQuery Scripts" to keep my .js files separate. I don't want to include the javascript code in the .aspx file enclosed within the script tags.

Open your Master Page file where you could see lines similar to what I have show below:

Master Language="C#" AutoEventWireup="true" CodeBehind="master1.Master.cs" inherits="TestApp.master1" %>
            html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            runat="server">
            <title>[Test Application]</title>
            <asp:ContentPlaceHolder ff0000;">ID="head" runat="server">
            </asp:ContentPlaceHolder>

Now coming to the Web Content Form [Child Page of the above Master Page], we need to add a Content area referencing the ContentPlaceHolder shown above.
Please note the ID, MasterContentArea, of the ContentPlaceHolder above. This ContentPlaceHolder is located in the HTML Body section of our Master Page.

<asp:Content ContentPlaceHolderID="head" runat="server">
            <!-- CSS References -->
            <link href="../AJAX/jqueryUI/css/ui-lightness/jquery.datepick.css" rel="stylesheet"
                type="text/css" />
            <script src="../AJAX/jqueryUI/js/jquery-1.5.1.min.js" type="text/javascript"></script>
            // <!--[CDATA[-->
        src="../AJAX/jqueryUI/js/jquery.datepick.js" type="text/javascript"></script>
            // <!--[CDATA[-->
        src="../AJAX/Custom%20JQuery%20Scripts/EntryFormEffects.js" type="text/javascript"></script>
        </asp:Content>

Add another Content Area just below the above code. This is where we are creating our Input Box.

<asp:Content ID="Content1" ContentPlaceHolderID="MasterContentArea" runat="server">
                <div id="Div2" runat="server" class="longValue">
                     <asp:TextBox ID="txtDate" runat="server" CssClass="TxtStyle"
                         Width="295px" MaxLength="50"></asp:TextBox>
                </div>
            </asp:Content>

Now comes the turn of our JQuery script. We are storing our script in a file named: EntryFormEffects.js. Remember, we added a reference to this file in the Content Head area of our child page (Web Content Form). See the code above.

EntryFormEffects.js:

$(document).ready(function()
            {
            $(function DatePick() {
            $("input[id$='txtDate']").datepick({ dateFormat: 'dd-MMM-yyyy' });
            })
            });

That's it! Now is the time to visualize the fruit of our little labor. Our DatePicker will appear as and when the TextBox, txtDate, gets focus. Below is the final output:

You can try out other JQuery plugins similarly. It is the head section that plays a vital role while adding the references to the external files. Since a child page does not contain a direct HTML layout, you need to add a content area and add a reference to the ID of the ContentPlaceHolder located in the head section of the Master Page.

 

Pingbacks and trackbacks (1)+

Add comment

biuquote
  • Comment
  • Preview
Loading

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

-----------------------------------------

LinkedIn:

in.linkedin.com/in/rohitpkhare

Twitter:

@BuzzRohit

-----------------------------------------

Month List

Protected by Copyscape Web Plagiarism Software