Easy asynchronous data loading with ASP.NET / AJAX
January 4, 2012 1 Comment
I will freely admit – there is a hole in my skill set as a developer. As I’ve mentioned earlier in this blog, I was trained as a “classic” developer, writing console applications in C++, and while I’ve done plenty of web-based work, HTML5, JavaScript, and AJAX are not my friends. I like ASP.NET because the majority of the “guts” are done in C#, which is my bread and butter. However, doing everything server side is not very performant, nor is it a great user experience. This is where AJAX comes into play.
Luckily, ASP.NET provides some tools that shields us javascriptaphobic types from these things. I presume you already know about the UpdatePanel. Using these, you can do AJAX-style updates to your page, without a full refresh. They work like this:
ASP:
<asp:ScriptManager ID="PageScriptManager" runat="server" /> <asp:Button ID="MyButton" Text="Click Me" runat="server" onClick="MyButton_Clicked" /> <asp:UpdatePanel ID="MyUpdatePanel" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="MyButton" EventName="Click" /> </Triggers> <ContentTemplate> <asp:Label ID="MyLabel" Text="OldText" runat="server" /> </ContentTemplate> </asp:UpdatePanel>C# CodeBehind:
private void MyButton_Clicked(object sender, EventArgs e) { MyLabel.Text = "NewText!"; }Without the UpdatePanel, clicking the button requires a full post back, causing an unslightly flicker as the page reloads. With the UpdatePanel, the text box will seamlessly change from “OldText” to “NewText!” in AJAX style. Very nice, very easy.
That’s all well and good – but what if your page is heavily data driven? Techniques like caching certainly help reduce page loading time, but on the first page view, there is an inevitable waiting period while the data loads, and even that cached data takes some time to render. If you put that in your PageLoad event, the browser will sit on a white screen waiting for the query to complete – an experience that users just don’t like. I ran into this with deekfit.com – the more you used DeekFit, the longer and longer pages loads were taking as your data history grew. Definitely not the experience I wanted. Still hesitent to really dive into the HTML5 / JavaScript head first, I figured there must be a way I can get ASP.NET to do this for me…and after a little research, I discovered, there is!
The solution is actually quite simple – insert a timer to your UpdatePanel that fires a PostBack immediately after the page is loaded, removes itself from the page, and does your loading there. Coupled with the ASP progress indicator and an animated gif (I used http://ajaxload.info/ to create one), you get a much nicer experience. Like so:
ASP:
<asp:UpdatePanel ID="MyUpdatePanel" runat="server"> <ContentTemplate> <asp:Panel ID="TimerPanel" runat="server"> <asp:Timer ID="PageLoadTimer" runat="server" interval="1" OnTick="timerTick" /> </asp:Panel> <asp:UpdateProgress id="PageProgressIndicator" runat="server"> <ProgressTemplate> <p><img src="ajax-loader.gif" /> Loading your data...</p> </ProgressTemplate> </asp:UpdateProgress> <asp:DataGrid ID="MyDataGrid" runat="server" /> </ContentTemplate> </asp:UpdatePanel>C# CodeBehind:
private void timerTick(object sender, EventArgs e) { TimerPanel.Controls.Remove(TimerPanel.FindControl("PageLoadTimer")); MyDataGrid.DataSource = LongRunningLoadingOperation(); MyDataGrid.DataBind(); }That does it! Your page will load immediately, with the progress indicator displayed until the loading operation completes. Make sure the timer is inside the UpdatePanel, otherwise the method will fail to remove it from the page – I learned this one the hard way!
There you go – very easy, clean, does the job, no JavaScript required. Sure…some day we’ll all have to learn HTML5, CSS3, and JavaScript….but if you’re an ASP.NET holdout, you don’t have to just yet 🙂
deekodev 