Refresh (Reload) only GridView on Button click using jQuery in ASP.Net

princy
 
on Aug 06, 2021 05:49 AM
387 Views

I have asp.net GridView and button on top of grid.

On button click how can i refresh only GridView using jQuery ?

Please help.

<button id="refreshGrid" type="button">Refresh Grid</button>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Gender">
            <ItemTemplate>
                <asp:DropDownList ID="genderDdl" CssClass="gender" runat="server">
                    <asp:ListItem Text="None" Value="None"></asp:ListItem>
                    <asp:ListItem Text="Male" Value="Male"></asp:ListItem>
                    <asp:ListItem Text="Female" Value="Female"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="City">
            <ItemTemplate>
                <asp:DropDownList ID="cityDdl" CssClass="city" runat="server">
                    <asp:ListItem Text="None" Value="None"></asp:ListItem>
                    <asp:ListItem Text="Mumbai" Value="Mumbai"></asp:ListItem>
                    <asp:ListItem Text="Pune" Value="Pune"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Country">
            <ItemTemplate>
                <asp:DropDownList ID="countryDdl" CssClass="country" runat="server">
                    <asp:ListItem Text="None" Value="None"></asp:ListItem>
                    <asp:ListItem Text="India" Value="India"></asp:ListItem>
                    <asp:ListItem Text="USA" Value="USA"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Age">
            <ItemTemplate>
                <asp:TextBox runat="server" ID="age" CssClass="age" Text="1"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 06, 2021 05:51 AM

You have to make use of jQuery Ajax to bind and refresh the GridView without complete page refresh. 

Bind Dataset to ASP.Net GridView using jQuery AJAX