---
title: "jQuery with ASP.NET"  
description: "JQuery is a light weight JavaScript library which that simplifies the way of HTML DOM traversing and manipulation, event handling, client side animati"  
author: "Dev Vrat Sahu"  
published: 2012-09-04  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/992/jquery-with-asp-dot-net  
category: "asp.net"  
tags: ["asp.net"]  
reading_time: 18 minutes  

---

# jQuery with ASP.NET

JQuery is a light weight JavaScript library which that simplifies the way of HTML DOM traversing and manipulation, event handling, client side animations, etc. [One of the greatest](https://answers.mindstick.com/qa/31387/cyber-bullying-is-one-of-the-greatest-problems-in-the-world-today-how-would-you-solve-this) features of jQuery is, it supports an efficient way to implement AJAX applications because of its light weight nature. A few of its characteristics are light-weight, cross-browser compatibility and simplicity. The [jQuery code](https://www.mindstick.com/forum/157821/write-a-jquery-code-that-selects-all-the-checkboxes-in-a-form-when-a-select-all-button-is-clicked) we write is compatible with all the browsers and hence it prevents the need to write separate client [side code](https://www.mindstick.com/forum/143/close-popup-window-by-server-side-code) for different browsers.\

It provides “Write less but do more” concept.

Ex.

##### To select a HTML element in javascript,

##### ```
document.getElementById('txtName');
```

The above equivalent in jQuery will be,

```
$('#txtName');
```

Sample Program: Hello World!

##### Display “Hello World” using jQuery.

1. Create a Website File>New>WebSite>Choose ‘ASP.NET 3.5 website’ from the templates>Choose Location and Give name to your website.

2. Now [drag and drop](https://www.mindstick.com/forum/454/how-to-drag-and-drop-multiple-image-from-one-canvas-to-onther-canvas-in-html5) the jquery-1.1.1.js file from the Solution Explorer’s >Script Folder on to your page to create a reference as shown below.

![jQuery with ASP.NET](https://www.mindstick.com/mindstickarticle/3f155c1c-84dc-4f27-993e-2eb4a92f11c5/images/79dfff4b-7539-4b25-a199-999527568240.png)

3. Now, add a Button control to your page.

4. Now, in .aspx file add this block of code to tell your browser to perform some task when page is loaded.

```
<script type="text/javascript">
        $(document).ready(function() {
        // add code here
        });
</script>
```

5. Now, Add your Code in this block to Display “Hello World !” using alert. Following are the codes:

```
<script type="text/javascript">
        $(document).ready(function () {
            $("#Button1").click(function () {
                alert("Hello world!");
            });
 
        });
    </script>
```

6. Run the Website and Click on Button, you will see the following window:

![jQuery with ASP.NET](https://www.mindstick.com/mindstickarticle/3f155c1c-84dc-4f27-993e-2eb4a92f11c5/images/4be9e519-36c5-4cc0-a3aa-e39d022880ff.png)

Creating another Sample in ASP.NET using jQuery:

Here I have another example of jQuery with ASP.NET which will show some advance concept of jQuery.

Here, in this example I have used a GridView and inserted a CheckBox at the initial of every row and also I have added a CheckBox in Header of the GridView to make the GridView enable to Select or Deselect the all the CheckBoxes of the GridView at a time.

Start with Creating a GUI: Create a GUI as Follows.

![jQuery with ASP.NET](https://www.mindstick.com/mindstickarticle/3f155c1c-84dc-4f27-993e-2eb4a92f11c5/images/612004ce-4aa6-41bd-ab41-128d7339bef5.png)

Bind the Columns of the table using TemplateField. Here I named the page “Default.aspx”

Following is the Complete JavaScript code to make it functional to Select/Deselect all the CheckBoxes

```
<script type="text/javascript">
 
        //this function will tell browser to do something as soon as page is loaded
        $(document).ready(function () {
 
            //$("#<%=GridViewShowRecords.ClientID%> will get ther reference og GridView
            $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").click(CheckUncheckAllCheckBoxAsNeeded);
            $("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").click(
            function () {
 
                //.is() method is used to find the state of the current checkbox, by querying its checked property.
                if ($(this).is(':checked'))
                    //setting the Checked Status of CheckBox to True
                    $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', true);
                else
                    //setting the Checked Status of CheckBox to False
                    $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', false);
            });
        });
 
        function CheckUncheckAllCheckBoxAsNeeded()
        {
            //this will count and store the no. of CheckBoes with id='chkEmployee'
            var totalCheckboxes = $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").size();
            var checkedCheckboxes = $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox:checked").size();
 
            if (totalCheckboxes == checkedCheckboxes)
             {
                $("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").attr('checked', true);
            }
            else
             {
                $("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").attr('checked', false);
            }
        }
    </script>
```

Don’t forget to add the reference.( drag and drop the jquery-1.1.1.js file from the Solution Explorer’s >Script Folder on to your page to create a reference ).

##### Code for Default.aspx file

```
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowRecords.aspx.cs" Inherits="ShowRecords"
    Debug="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>List of All Records</title>
    <%--This will add a reference for using jQuery--%>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //this function will tell browser to do something as soon as page is loaded
        $(document).ready(function () {
            //$("#<%=GridViewShowRecords.ClientID%> will get ther reference og GridView
            $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").click(CheckUncheckAllCheckBoxAsNeeded);
            $("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").click(
            function () {
                //.is() method is used to find the state of the current checkbox, by querying its checked property.
                if ($(this).is(':checked'))
                    //setting the Checked Status of CheckBox to True
                    $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', true);
                else
                    //setting the Checked Status of CheckBox to False
                    $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', false);
            });
        });
        function CheckUncheckAllCheckBoxAsNeeded()
        {
            //this will count and store the no. of CheckBoes with id='chkEmployee'
            var totalCheckboxes = $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").size();
            var checkedCheckboxes = $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox:checked").size();
            if (totalCheckboxes == checkedCheckboxes)
             {
                $("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").attr('checked', true);
            }
            else
             {
                $("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").attr('checked', false);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin: 0 auto;" width="1100px">
        <table style="margin: 0 auto;" width="1100px">
            <tr>
                <td>
                    <asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Georgia" Text="Check all CheckBoxes in GridView using jQuery"></asp:Label>
                </td>
            </tr>
            <tr>
                <td bgcolor="#6699FF" align="center">
                    &nbsp;
                    <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Georgia" ForeColor="White"
                        Text="List of All Records"></asp:Label>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <asp:GridView ID="GridViewShowRecords" runat="server" BackColor="White" BorderColor="#DEDFDE"
                        BorderStyle="None" BorderWidth="1px" CellPadding="4" EnableModelValidation="True"
                        ForeColor="Black" GridLines="Vertical" AutoGenerateColumns="false">
                        <AlternatingRowStyle BackColor="White" />
                        <FooterStyle BackColor="#CCCC99" />
                        <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
                        <RowStyle BackColor="#F7F7DE" />
                        <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                        <Columns>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    <asp:CheckBox runat="server" ID="chkAll" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox runat="server" ID="chkEmployee" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    ID</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblUserID" runat="server" Text='<%#Bind("UserId") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtUserID" Text='<%#Bind("UserId") %>' runat="server" Width="20px"
                                        Enabled="False"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    FirstName</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblFirstName" runat="server" Text='<%#Bind("FName") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtFirstName" Text='<%#Bind("FName") %>' runat="server" Width="80px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    LastName</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblLastName" runat="server" Text='<%#Bind("LName") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtLastName" Text='<%#Bind("LName") %>' runat="server" Width="80px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    FatherName</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblFatherName" runat="server" Text='<%#Bind("FatherName") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtFatherName" Text='<%#Bind("FatherName") %>' runat="server" Width="100px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    Age</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblAge" runat="server" Text='<%#Bind("Age") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtAge" Text='<%#Bind("Age") %>' runat="server" Width="30px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    Address</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblAddress" runat="server" Text='<%#Bind("Address") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtAddress" Text='<%#Bind("Address") %>' runat="server" Width="150px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    Phone</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblPhone" runat="server" Text='<%#Bind("Phone") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtPhone" Text='<%#Bind("Phone") %>' runat="server" Width="80px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    Email</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblEmail" runat="server" Text='<%#Bind("Email") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtEmail" Text='<%#Bind("Email") %>' runat="server" Width="120px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td>
                    <hr style="border-color: #6699FF" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
```

Don’t have much more to code on Default.aspx.cs file. Simple you to do is Create your Connection to [SQL SERVER](https://www.mindstick.com/articles/34/create-table-in-microsoft-sql-server) and Bind the DataSource to GridView.

```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data; 
using System.Data.SqlClient;
using System.IO;
public partial class ShowRecords : System.Web.UI.Page
{  
  
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Binding the GridView
            BindGridViewShowRecords();
        }
    }
    private void BindGridViewShowRecords()
    {
        //Creating Connection and Binding the GridView
        connection.con = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString);
        connection.con.Open();
        string query = "select * from tblUserInfo";       
        connection.da = new System.Data.SqlClient.SqlDataAdapter(query, connection.con);
        connection.bui = new SqlCommandBuilder(connection.da);
        connection.dt = new System.Data.DataTable();
        connection.da.Fill(connection.dt);
        GridViewShowRecords.DataSource = connection.dt;
        GridViewShowRecords.DataBind();
    }
}
```

\
If you will click on Header CheckBox, it will select/deselect all checkboxes of the GridView.\

---

Original Source: https://www.mindstick.com/articles/992/jquery-with-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.