Aug 1

Add jQuery to an ASP.NET Web Application

.NET No comments

jQuery is the default AJAX library when you create a new ASP.NET Web Application or ASP.NET MVC Web Application in Visual Studio 2010. But if you have an existing web application (Web Forms), you’ll need to manually add jQuery to your project.

Open Visual Studio or Visual Web Developer Express and open your web application. I’ve created a new project named jQuerySample.

If you don’t have it yet, create a new folder in your project (Right-click -> Add -> New Folder) and name it Scripts.

Download jQuery from the download page. Current version is 1.6.2. Right-click on the Minified link and choose Save Target As. Save the jquery-1.6.2.min.js file to the Scripts folder.

You can rename the file to jquery-min.js or just jquery.js if you prefer a short name. I didn’t rename it in this sample.

You’ll need to include the new file in the project. Go to Project –> View All Files or click on the Show All Files button in the Solution Explorer. Right-click the jquery-1.6.2.min.js file and select Include In Project.

Now let’s enable jQuery. You could enable jQuery in specific pages or in all pages if you’re using a Master page.

Open the Site.Master file and add the following script tag inside the head tag.

<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.6.2.min.js") %>"></script>

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

When the head tag runs on the server, the href attribute of the link tag is automatically resolved at runtime, but the src attribute of the script tag is not, so we need to use the ResolveUrl function.

If you’re creating a public website, you could also load jQuery from Google’s CDN with this tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

Thanks to Encosia for this tip. The URL starts with // so it works with both http and https.

Let’s create a little sample similar to the one we created when we introduced the $get function.

Add a new Web Form to the project or open the Default.aspx page.

Add the following.

    <script type="text/javascript">
        function changeColorAndSize() {
            $('#<%= container.ClientID %>').css("background-color","Red");
            $('#<%= container.ClientID %>').css("height","200px");
            $('#<%= container.ClientID %>').css("width", "300px");
            $('#container2').css("background-color", "Yellow");
            $('#container2').css("height", "200px");
            $('#container2').css("width", "300px");
        }
    </script>

    <div id="container" runat="server" style="height: 100px; width: 200px; background-color: Blue;"></div>
    <div id="container2" style="height: 100px; width: 200px; background-color: Green;"></div>
    <asp:Button ID="Button1" runat="server" Text="Click Me" OnClientClick="changeColorAndSize(); return false;" />

Here, we display two div elements, a blue one and a green one, and a button. Notice how one of the div runs on the server.

When the button is clicked, it calls the changeColorAndSize function.

The $() function takes a CSS selector and finds all elements that match. In this case, we use # to find the element with a specific ID. For the div that run on the server we use the ClientID property.

Then we use the css() function to change an element’s style.

Go ahead and run the project.

ASP.NET and jQuery

Click on the button.

ASP.NET and jQuery

The color and size of the two div elements will change.

Please leave a comment if you have a question or suggestion.

Tagged with , ,

Get Free Updates
Related Posts
Comments