Results 1 to 1 of 1

Thread: Databinding ASP.NET GridView with jQuery

Threaded View

  1. #1

    Thread Starter
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    Databinding ASP.NET GridView with jQuery

    Hi all,

    Here's an example of databinding an ASP.NET Gridview with jQuery. The jQuery binding occurs when a dropdownlist keyup/selection occurs.
    For the server side, I bind the gridview with all the products and dropdownlist with all subcategories. There's also a webmethod that handles
    client side databinding.

    Client Side Databinding using jQuery/javascript
    javascript Code:
    1. <script type="text/javascript">
    2.         $(document).ready(function () {
    3.            
    4.             $('#<%=ddlProductCategory.ClientID%>').bind("change keyup", function () {
    5.                 $.ajax({
    6.                     type: "POST",
    7.                     contentType: "application/json; charset=utf-8",
    8.                     url: "Default.aspx/GetProductsByCategory",
    9.                     data: '{data: ' + $('#<%=ddlProductCategory.ClientID%>').val() + '}',
    10.                     dataType: "json",
    11.                     success: function (response) {
    12.                         //clear rows below header
    13.                         $("#gvProducts tr:not(:first-child)").html("");
    14.                        
    15.                         //add new table rows
    16.                         for (var i = 0; i < response.d.length; i++) {
    17.                             $('#<%=gvProducts.ClientID%>').append("<tr><td>"
    18.                                 + response.d[i].ProductName + "</td><td>"
    19.                                 + response.d[i].ProductNumber + "</td><td>"
    20.                                 + response.d[i].ProductReorderPoint + "</td></tr>");
    21.                         }
    22.                     },
    23.                     error: function(result) {
    24.                         alert("Databinding unsuccessful!");
    25.                     }
    26.                });
    27.             });
    28.         });
    29.     </script>

    WebMethod called by jQuery
    csharp Code:
    1. [WebMethod]
    2.         public static IEnumerable<ProductInformation> GetProductsByCategory(string data)
    3.         {
    4.             products = new List<ProductInformation>();
    5.             dtResult = new DataTable();
    6.  
    7.  
    8.             try
    9.             {
    10.                 String strConnString = ConfigurationManager.ConnectionStrings["AdventureWorks2012"].ConnectionString;
    11.                 String strQuery = "SELECT ProductNumber, [Name] as ProductName, ReorderPoint FROM [Production].[Product] where ProductSubcategoryID=" + data;
    12.                 SqlConnection con = new SqlConnection(strConnString);
    13.                 SqlCommand cmd = new SqlCommand();
    14.                 cmd.CommandType = CommandType.Text;
    15.                 cmd.CommandText = strQuery;
    16.                 cmd.Connection = con;
    17.                 SqlDataAdapter dataAdapter = new SqlDataAdapter(cmd);
    18.  
    19.  
    20.                 try
    21.                 {
    22.                     con.Open();
    23.                     dataAdapter.Fill(dtResult);
    24.                     if (dtResult.Rows.Count > 0)
    25.                     {
    26.                         foreach (DataRow row in dtResult.Rows)
    27.                         {
    28.                             products.Add(new ProductInformation()
    29.                             {
    30.                                 ProductName = row["ProductNumber"].ToString(),
    31.                                 ProductNumber = row["ProductName"].ToString(),
    32.                                 ProductReorderPoint = row["ReorderPoint"].ToString()
    33.                             });
    34.                         }
    35.                     }
    36.                 }
    37.                 catch (Exception ex)
    38.                 {
    39.                     throw ex;
    40.                 }
    41.                 finally
    42.                 {
    43.                     con.Close();
    44.                     con.Dispose();
    45.                 }
    46.             }
    47.             catch (Exception exception)
    48.             {
    49.                 throw;
    50.             }
    51.  
    52.  
    53.             return products;
    54.         }

    Software used:
    VS 2012, AdventureWorks 2012 database, SQL Server 2012, ASP.NET 4.5.



    KGC
    Attached Files Attached Files
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width