Gridview with updatepanel in Asp.net C#
The updatepanel control in asp.net lets you to update the page without refreshing the whole page but only the specified content.
To use the updatepanel control with GridView in asp.net you need to use asyncpostbacktrigger triggers in your page.
To do that first add the gridview control in your .aspx page as below :
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="datagridview" EventName="PageIndexChanging" />
</Triggers>
<ContentTemplate>
<asp:GridView runat="server" ID="datagridview" CssClass="mydatagrid" AllowPaging="True"
CellPadding="4" ForeColor="#333333" GridLines="None" BorderColor="#003300" BorderStyle="Solid"
BorderWidth="1px" Font-Size="11pt" Font-Names="Century" OnPageIndexChanging="datagridview_PageIndexChanging">
<RowStyle BackColor="#EFF3FB" BorderColor="Black" BorderWidth="1px" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="White" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Here we are adding update panel control and specifying a trigger which will handle the event of gridview page index changing :
Don’t copy again
<Triggers>
<asp:AsyncPostBackTrigger ControlID="datagridview" EventName="PageIndexChanging" />
</Triggers>
The script manager control is important as without it the page will produce an error at run-time
Open your Web.config file and define your connectionString :
<connectionStrings>
<add name="myconnectionString" connectionString="Data Source=HITESH\SQLEXPRESS;Initial Catalog=MyDatabase;User ID=hitesh;Password=789"/>
</connectionStrings>
Now add the following code to your .cs page :
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Data.Sql;
using System.IO;
using System.Text;
public partial class GridViewUpdatePanel : System.Web.UI.Page
{
String myconnectionString = ConfigurationManager.ConnectionStrings["myconnectionstring"].ConnectionString;
SqlConnection con;
SqlDataAdapter adapter;
DataSet ds;
SqlCommand cmd;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
fillDataGrid();
}
}
public void fillDataGrid()
{
con = new SqlConnection(myconnectionString);
cmd = new SqlCommand("select * from mytable", con);
con.Open();
adapter = new SqlDataAdapter(cmd);
ds = new DataSet();
adapter.Fill(ds, "mytable");
datagridview.DataSource = ds.Tables[0];
datagridview.DataBind();
con.Close();
}
protected void datagridview_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
datagridview.PageIndex = e.NewPageIndex;
fillDataGrid();
}
}
The code is complete and pretty simple to understand.
Now when you run the page the asyncpostbacktrigger postback trigger will be fired when the user clicks on next page and it will load without refreshing the whole page.
Comment below if you have any questions or just type Thanks to let me know, this post was useful to you.
Pingback: How to fill data in gridview in asp net - ParallelCodes
Pingback: ASP.NET GridView Export to CSV File • ParallelCodes();
Pingback: ASP.NET Export GridView to Excel • ParallelCodes();