Sunday, 21 October 2007

Auto Refresh update panel on page using AJAX - c#

In this article, I am going to explain how we can auto refresh data on an ASP.NET page after a certain interval using AJAX UpdatePanel and other controls (assuming you have some basic knowledge of AJAX Toolkit). I am using some Ajax controls and using SQL server database and Data Grid control. Lets for the time, use database north wind and set our interval time for refreshing data as 30 seconds.




Code behind page :

public void BindData()
{
con = new SqlConnection("Initial Catalog=Northwind; Data Source=localhost; Uid=sa; pwd=;");
cmd.CommandText = "select * from Employees ";
cmd.Connection = con;
con.Open();
da = new SqlDataAdapter(cmd);
da.Fill(ds);
cmd.ExecuteNonQuery();
GridData.DataSource = ds;
GridData.DataBind();
}


protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Grid Refreshed at: " + DateTime.Now.ToLongTimeString();
}



Here is HTML desing code:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="30000">
</asp:Timer>
</div>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Grid not refreshed yet."></asp:Label><br />
<asp:Label ID="Label4" runat="server" Text="(Grid Will Referesh after Every 30 Sec)" Font-Bold="true"></asp:Label>
<br /><br />
<asp:DataGrid ID=GridData runat="server" Width="100%" GridLines="Both" HeaderStyle-BackColor="#999999" AutoGenerateColumns="false">
<Columns>
<asp:BoundColumn DataField="EmployeeID" HeaderText="Employee ID"></asp:BoundColumn>
<asp:BoundColumn DataField="FirstName" HeaderText="First Name"></asp:BoundColumn>
<asp:BoundColumn DataField="LastName" HeaderText="Last Name"></asp:BoundColumn>
<asp:BoundColumn DataField="City" HeaderText="City"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
</ContentTemplate>
</asp:UpdatePanel>
</form>


I hope you liked this article..if yes please drop some comments


kick it on DotNetKicks.com

53 comments:

  1. Thank's - it's very good sample. :-)

    ReplyDelete
  2. Great work and nice article. Keep it up

    ReplyDelete
  3. This is great stuff fro beginners ..like me... thanks alot..

    ReplyDelete
  4. super cooooooooolllll it helped me a lot for my project

    ReplyDelete
  5. hi sanjeev,

    very well written. very nice and precise article..exactly to the point....thanx for the help

    ReplyDelete
  6. thats exactly i want
    thanx buddy

    ReplyDelete
  7. Great Article.

    Have you seen client side memory leak problems with code before? I have a gridview and a dropdownlist inside the update panel and my timer refreshes every 30 seconds. If I watch the Memory Usage in the task manager, it goes up by about 10K with each ajax refresh. If you have any advice on what would be causing this it would be greatly appreciated.

    I'm using ASP.Net 2.0.
    Thanks,
    Greg

    ReplyDelete
  8. Thanks nice, the asynchpostback is just what I was looking for.
    Ta,

    Dale from London.

    ReplyDelete
  9. Great work and nice article.

    Rajiv Sharma

    iam@rajivsharma.com

    ReplyDelete
  10. Hi, I've also doing some stuff like this. But I'm facing a problem on the ajax refresh. My gridview contains a lot of data. So, I used paging. Everything is OK but when I navigate to next page, I need to wait until the timer ticked, then it just navigate to next page of the gridview. Any idea?

    ReplyDelete
  11. Fine , and i have one doubt, how to refresh a label , which displays current time, and i want to refresh it every second with out refresh a page

    ReplyDelete
  12. Mudassar.S.C23 June 2008 18:37

    Great Work.... Really nice one

    ReplyDelete
  13. I have read the article, and it sounds just like what I need. However, having implemented it with some slight modifications (a DataView being filled from an Dataset), my text field updates, but the dataset doesn't.

    Any ideas anyone?

    ReplyDelete
  14. thank u , that is very good

    ReplyDelete
  15. thank u , that is very good

    ReplyDelete
  16. Dear that whoooooooole code can be written like this HTML tag.......

    meta http-equiv="Refresh" content="300"

    Cheers....
    Saurabh

    ReplyDelete
  17. Hey Saurabh,

    You have a long way to go.. you in still live in the 90s...

    Mads

    ReplyDelete
  18. Great, thanks a lot for this informative example on AJAX refresh. Works like a charm!

    ReplyDelete
  19. nice work dude... thats xacly wat i wanted!!!

    ReplyDelete
  20. My Gridview gets data from an ObjectDataSource and doesnt gets refreshed! Whyyyyy? :(

    ReplyDelete
  21. thx, really a time saver!

    ReplyDelete
  22. Great stuff!

    ReplyDelete
  23. very nice give me your ph number

    ReplyDelete
  24. does this retain viewstate info?

    does the meta tag method?

    ReplyDelete
  25. Great solution!, but I have one question. What about server performance with every timer tick?.

    I need implement something like this in an application that will have 400 or 500 concurrent users. How this approach might affect my server throughput

    ReplyDelete
  26. "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "meta" must be terminated by the matching end-tag ""

    this message show when i put ur code.why?
    and how and wher exactly iput it.

    ReplyDelete
  27. Provided me what I needed, and got me on my way. My thanks.

    ReplyDelete
  28. simple and clear. very helpful.

    ReplyDelete
  29. thanks for very good and clear code.

    ReplyDelete
  30. Nice Work.
    Thanks for the clear and good Example.
    You Saved My time Lot.

    ReplyDelete
  31. Thanks alot...

    ReplyDelete
  32. Ur Article is nice. Gud Job Buddy.

    ReplyDelete
  33. u explained it so simply...
    thanks a lot..

    ReplyDelete
  34. really a nice and decent work

    ReplyDelete
  35. Excellent job
    It works great........

    ReplyDelete
  36. nice yar..........
    i like it very much....

    ReplyDelete
  37. Thanks! help me a lot!

    ReplyDelete
  38. Thank you in advance!

    ReplyDelete
  39. hi,
    i want only gridview refresh 30sec

    bt ur programmer refresh the page which create problem for me
    example:if u put a textbox & write some text u cant.

    contact me:sameer31.das@gmail.com

    ReplyDelete
  40. Perfect, I had started to look into writing this myself in javascript but found your post after a few problems. This solution worked perfectly and was very easy to implement. Exactly what I wanted the end result to be. Thanks!

    ReplyDelete
  41. great article!!!!

    but because of page refresh, when you scroll down the page it scrolls up. any solution to that?

    please contact me on patilmilindv@gmail.com

    ReplyDelete
  42. Thanks ..
    Good article ..

    ReplyDelete