Sunday, April 11, 2010

Ajax to update GridView after certain interval using Asp.net C#




Please visit my new Web Site WWW.Codedisplay.com



In most of the cases like Dashboard developers often need to update GridView data after certain interval. In this Asp.Net article i am going to discuss Updating GridView using AJAX. To do that first create a new aspx page in your project. Then drag and drop the below controls within the page.

1. ScriptManager
2. UpdatePanel
3. GridView
4. Timer







Now your aspx HTML markup looks like below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Update_Gridview.aspx.cs" Inherits="Update_Gridview" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Updating GridView using AJAX</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
            
         <asp:GridView ID="GridView_Products" runat="server" AutoGenerateColumns="False" 
            Width="100%" Font-Names="tahoma" >
        <HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
        <RowStyle BackColor="Gray" />
        <AlternatingRowStyle BackColor="LightGray" />
        <SelectedRowStyle BackColor="Pink" ForeColor="White" Font-Bold="true" />
        <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:BoundField DataField="Color" HeaderText="Color" />
        <asp:BoundField DataField="Size" HeaderText="Size" />
        <asp:CommandField ShowSelectButton="True" />
        </Columns>
        </asp:GridView>    
                <asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick">
                </asp:Timer>
          </ContentTemplate>

        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
Now right click on Timer control from design view. Click on event. Select Tick event and click twice to go to the code behind. Now within the Timer Tick event just bind the GridView data. Its automatically refresh the GridView after certain interval which you can mention in the Interval properties of the Timer control in seconds. The code sample is given below:
protected void Timer1_Tick(object sender, EventArgs e)
    {
        GridView_Products.DataSource = clsDbUtility.ExecuteQuery("Select * FROM Product");
        GridView_Products.DataBind();
    }
Now insert data from another page and check back your GridView that it has been refreshed. Hope it will help you.

4 comments:

Dattaprasad Kulkarni said...

Very nice article.. Thanks!!

Anonymous said...

What a Great Work! I will try it with some changes.
Zen Cart Templates

Anonymous said...

Nice one.

Dileep Kumar said...

hey! it is refreshing the whole page yar..

We should not refresh the whole page only the gridview should be refreshed. do u have any idea about that...

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash