How to avoid postback when paging in gridview
In this article we will focus on how to avoid postback when you page through records in GridView. We will use ScriptManager and UpdatePanel controls to avoid complete page postback to the server. The controls in the update panel control will be part of the postback rather than the complete page when paging through GridView records.
In this article we will focus on how to avoid postback when you page through records in GridView.
1.Assuming that we are using SQLDataSource to get the records from the database and GridView control to display the data. If we have many records in the database and when we page through the records in GridView we do not want to postback the complete page rather we only want to refresh the content of gridview with updated records.
2.Drag and Drop a ScriptManager control from the toolbox to the .aspx page.
3.Drag and Drop a UpdatePanel from the toolbox to the .aspx page.Then in the contentTemplate tag of UpdatePanel, Encapsulate the GridView control as shown below:
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="uPanel1">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmpId" DataSourceID="SqlDataSource1" AllowPaging="True" PageSize="10">
<Columns>
<asp:BoundField DataField="EmpId" HeaderText="EmpId" InsertVisible="False" ReadOnly="True" SortExpression="EmpId" />
<asp:BoundField DataField="EmpName" HeaderText="EmpName" SortExpression="EmpName" />
<asp:BoundField DataField="Salary" HeaderText="Salary" SortExpression="Salary" />
<asp:TemplateField HeaderText="HireDate" SortExpression="HireDate">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#Convert.ToDateTime( Eval("HireDate")).ToShortDateString() %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView> </ContentTemplate></asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EmployeeDBConnectionString %>" SelectCommand="SELECT [EmpId], [EmpName], [Salary], [HireDate] FROM [Emp]"></asp:SqlDataSource>
</div>
4.Now when you Page through the records in the GridView, It will refresh the content of only the GridView because it is encapsulated in UpdatePanel Control. Update Panel control allows us to refresh only part of the page which is part of the UpdatePanel. ScripManager control is responsible for handling this functionality.
Follow