Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to get GridView Cell values using jQuery in ASP.NET

Author: Rachel Nicole
Download Source Code : 1418_GetCellValuesJQuery.zip

The purpose of this article is to explain how we can get GridView cell values using jQuery in ASP.NET.

 

 
If we need to get cell values from GridView using client side code in ASP.NET, we can do it easily using jQuery. Following example shows the way how we can do it. I have used Products table of NORTHWND database to get data and used a DataTable object to bind data to GridView control.
 
  1. Open Visual Studio 2010
  2. File > New > Web Site
  3. Visual Basic or Visual C# > ASP.NET Empty Web Site
  4. Right click on web site > Add New Item > Web Form
  5. Right click on website > New Folder (Name the folder as “Scripts”). Download jQuery and include below file in this folder.

    jquery-1.7.2.min.js
     
  6. Add a <script> tag in between <head> tag of Default.aspx page. You have to give reference for jQuery as below.

    <head runat="server">
        <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    </head>
     
  7. Add code below in between <form> tag

    <div>
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
        <input id="Button1" type="button" value="Get Product Names" />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </div>
     
  8. Add code below in page load event

    C#
     
    protected void Page_Load(object sender, EventArgs e)
    {
        string cmdText = "SELECT ProductName, CategoryID, UnitPrice FROM Products WHERE UnitPrice <= 10";
        string myConnection = "Data Source=Local;Initial Catalog=NORTHWND;Integrated Security=True";
        SqlConnection connection = new SqlConnection(myConnection);
        SqlCommand command = new SqlCommand(cmdText, connection);
        SqlDataAdapter adapter = new SqlDataAdapter(command);
        DataTable table = new DataTable();
        adapter.Fill(table);
        connection.Close();
     
        GridView1.DataSource = table;
        GridView1.DataBind();
    }
     
    VB.NET

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        Dim cmdText As String = "SELECT ProductName, CategoryID, UnitPrice FROM Products WHERE UnitPrice <= 10"
        Dim myConnection As String = "Data Source=Local;Initial Catalog=NORTHWND;Integrated Security=True"
        Dim connection As New SqlConnection(myConnection)
        Dim command As New SqlCommand(cmdText, connection)
        Dim adapter As New SqlDataAdapter(command)
        Dim table As New DataTable()
        adapter.Fill(table)
        connection.Close()
     
        GridView1.DataSource = table
        GridView1.DataBind()
    End Sub

  9. Add another <script> tag in between <head> tag and write code below in it

    <script type="text/javascript">
        $(document).ready(function () {
            var data = "";
            $("#Button1").click(function () {
                $("#<%=GridView1.ClientID %> tr").each(function () {
                    if (!this.rowIndex) return;
                    var product = $(this).find("td:first").html();
                      data += product + "<br/>";
                  });
                  $("#Label1").append(data)
            });
        });
    </script>
     
  10. Now you can see it in your browser.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Namespaces in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net