CODEWITHSUNDEEP
asp.netajaxtimerupdatepanel
Raghu
Raghu

Reputation: 2758

Asp.Net / Ajax updating update panel automatically how to?

I have an Asp.net page which requires certain sections to be partially updated automatically at an interval of 5 seconds.

I was planning to use the good old Timer control with the AJAX Update Panel for this purpose, but after a bit of reading on this control i found out that it may have some problems especially if,

1) The time difference between the async event performed ( 4 seconds ) by the update panel and the Timer's tick interval ( which is 5 seconds ) are quite small, the update panel will be held up in the async operation all the time.

2) Also, the fact that timer control doesn't work very well with Firefox.

I just wanted to get your opinion as to whether if i should go ahead with the timer and update panel approach, write some custom javascript that does the partial page update or some other strategy altogether.

Upvotes: 0

Views: 2916

Answers (1)

codes_occasionally
codes_occasionally

Reputation: 9566

Personally, I tend to think that the DIY approach is better -- easier to debug and easier to write.

You can use a javascript setInterval for a timer, and every time the function is called, you can initiate an ajax request to your asp.net code-behind to fetch whatever data needs to be updated.

For example, let's say you simply need to, every 5 seconds, update the current time on a page. Let's assume you have a span of ID currentTime on your page, something like:

<asp:Label id="CurrentTime" runat="server" CSSClass="currentTimeLabel" />

In your initial PageLoad event, you set the time:

protected void PageLoad(...)
{
    CurrentTime.Text = DateTime.Now.ToString();
}

Now you need to define some javascript on your page that will, every 5 seconds, call the code-behind and get the new date/time value.

Doing this with something like jQuery is very simple:

$(document).ready(function() {
    setInterval(5000, updateTime);
});

function updateTime() {
    url: "myPage.aspx/SomePageMethod",
    success: function(data) {
        $(".currentTimeLabel").text(data);
    });
}

In ASP.NET, getting the PageMethod to work is the trickiest part (for me, anyway). You need to create a public function in your code-behind with a 'WebMethod' attribute. Something like this:

[WebMethod]
public static string GetCurrentTime()
{
    return DateTime.Now.ToSTring();
}

I didn't test any of this code, but the basic premise is sound and should work fine.

Now, this may seem more complicated than using an UpdatePanel, but I find it easier when I know what code is actually running on my page.

If you need to update a series of controls instead of just one control, you can use a more complicated web method that returns xml or json data, and then parse that using javascript.

Upvotes: 3

Related Questions