Bind GridView Using jQuery Load In ASP.NET With No Page Reload

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        BindGridView();
}

void BindGridView()
{
    string productName = Request.Form["productName"];
    string query = productName == "All" ? "SELECT PRODUCTNAME,QUANTITYPERUNIT,UNITPRICE,UNITSINSTOCK FROM PRODUCTS" : "SELECT PRODUCTNAME,QUANTITYPERUNIT,UNITPRICE,UNITSINSTOCK FROM PRODUCTS WHERE PRODUCTNAME='"+ productName + "'";

    SqlConnection conn = new SqlConnection();
    SqlCommand cmd = new SqlCommand();
    DataTable dataTable = new DataTable();
    conn.ConnectionString = ConfigurationManager.ConnectionStrings["CS"].ConnectionString;
    cmd.Connection = conn;

    cmd.CommandType = CommandType.Text;
    cmd.CommandText = query;
    cmd.Connection = conn;

    SqlDataAdapter sqlDataAdapter = new SqlDataAdapter();
    sqlDataAdapter.SelectCommand = cmd;
    try
    {
        sqlDataAdapter.Fill(dataTable);
        gridView.DataSource = dataTable;
        gridView.DataBind();
    }
    catch (Exception ex)
    {
        Response.Write(ex.Message);
    }
    finally
    {
    }
}

<asp:GridView ID="gridView" runat="server">
    <Columns>
        <asp:TemplateField HeaderText="Serial No">
            <ItemTemplate>
                <%#Container.DataItemIndex+1 %>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

The code of the HTML page

In HTML page, we will bind GridView of ASP.NET page and show that GridView is here in HTML page. In HTML page, we have the controls given below..

1. Select
   It contains the product names. They will used to filter the database values and we use them in the where clause of the SQL query (see the query given in ASP.NET code).
   
2. Button
   The button click will call the jQuery load method. The load method will cause the GridView of the ASP.NET page to bind with the database values.
   
3. Div
   Div is used to show the GridView of ASP.NET page.
   
4. Image
   It is a loading .GIF image that will be shown during AJAX calls.

HTML code of the page is given below.

<div class="container">     
    <div id="content">  
        <h3>Bind GridView using jQuery Load</h3>  
        <select id="productSelect">  
            <option value="All">All</option>  
            <option value="Chai">Chai</option>  
            <option value="Chang">Chang</option>  
            <option value="Konbu">Konbu</option>  
            <option value="Tunnbröd">Tunnbröd</option>  
        </select>  
        <button id="bindButton">Click Here</button>  
        <div class="imageDiv">  
            <img src="loading.gif" />  
        </div>  
        <div id="gridViewDiv"></div>  
    </div>  
</div>  

To style HTML controls, add CSS to the Page Head section.

<style>  
    .container {  
        width: 960px;  
        margin: auto;  
        color: #FFF;  
        font-size: 25px;  
    }  
  
        .container h3 {  
            font-size: 25px;  
            text-decoration: underline;  
            text-align: left;  
        }  
  
        .container #content {  
            border: dashed 2px #CCC;  
            padding: 10px;  
        }  
  
            .container #content #gridViewDiv {  
                padding-top: 20px;  
            }  
  
            .container #content #gridViewDiv {  
                margin-top: 20px;  
            }  
  
                .container #content #gridViewDiv tr:nth-child(1) {  
                    background: #0184e3;  
                }  
  
            .container #content .imageDiv {  
                text-align: center;  
            }  
  
                .container #content .imageDiv img {  
                    display: none;  
                }  
</style>  

To start up with jQuery, first include its reference in your HTML page, as shown below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
JavaScript

Note

Put this reference just before the ending body tag of your page. Now, add the jQuery code given below after jQuery reference.

<script>
    $(document).ready(function () {
        $("#bindButton").click(function (e) {
            $("#gridViewDiv").load("result.aspx #gridView", { "productName": "" + $("#productSelect").val() + "" }, function (response, status, xhr) {
                if (status == "error")
                    $("#gridViewDiv").html("Error: " + xhr.status + ": " + xhr.statusText);
            });
        });

        $(document).ajaxStart(function () {
            $("img").show();
        });

        $(document).ajaxStop(function () {
            $("img").hide();
        });
    });
</script>

Explanation

We place jQuery code inside the “$(document).ready(function () { //code });” block. Inside this, we have created the button click event for the button with Id “bindButton”.

In this button click event, we are calling the jQuery Load method to do the AJAX call. It calls ASP.NET page and loads the GridView by providing GridView’s Id “#gridView”.

It is also passing the value of the select to ASP.NET page and shows the GridView inside the div with an Id “gridViewDiv”.

In general, the syntax of jQuery load method is given below.

$("Div Id where GridView will be shown").load("asp.net page #gridView id", { "value to send": "value of the select" }, function (response, status, xhr) {  
       //code that executes when the AJAX call finishes    
    });  
});  

The ajaxStart() event is called, when the AJAX request starts. In this event, we had shown the loading .GIF image. Similarly, the ajaxStop() event is called, when the AJAX request finishes. In this event, we hide the loading image.

How it all works

We have written the full jQuery Load code. Now, it’s time to check how it works. The user can select a value from the select control and click the button. On clicking the button, jQuery load calls ASP.NET page, binds it with the database values and shows the GridView inside a div.

Everything is done with no page reload, as the work is done with AJAX, using jQuery.

Conclusion

I hope, you enjoyed this tutorial and can now understand that it is very easy to make AJAX features with jQuery. Please share this on Facebook, Twitter and your other social accounts, so that your friends can also know about this tutorial.

Check my latest tutorial on C# Corner - Delete records from GridView without Page Reload using jQuery