Using Server Controls in ASP.NET
AJAX
T
his chapter follows on from Chapter 5, which introduced you to the ASP.NET AJAX
server controls and showed you how to use them. In this chapter, you’ll look at two small
ASP.NET AJAX applications and dissect them to see how they work. In the process, you’ll
glean a lot of new information about how to use the ASP.NET AJAX server controls to
build powerful AJAX-style applications and how to extend your existing applications with
asynchrony.
One of the applications that will be discussed happens to be also one of the first
small apps built to showcase some of the features of ASP.NET AJAX. This application,
called Scott’s ToDo List, is a great example of a simple data-driven AJAX-enabled ASP.NET
web application. But before that, let’s combine the controls discussed in the previous
chapter to create a practical solution to a common scenario.
Using the UpdatePanel, UpdateProgress, and
Timer Controls
For this first example, consider the following scenario: You have a data-driven web page
that needs to continuously alert the user with fast changing data, for instance, a page that
displays the major financial indices in the U.S. capital markets: Dow Jones Industrial Aver-
age (DJIA), NASDAQ, and S&P500. One approach is to place a
<META>
tag in your page with
refresh values that then force the page to refresh itself in regular intervals based on the pro-
vided value. But if you wanted to make the page behave more like a desktop application
and update the data without page refresh, AJAX is definitely the recommended path.
By now, you have seen the basics of the
ScriptManager
,
UpdatePanel
,
UpdateProgress
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<u>Market Summary:</u>
<br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
CHAPTER 6
■
USING SERVER CONTROLS IN ASP.NET AJAX110
828-8 CH06.qxd 9/28/07 4:46 PM Page 110
</Triggers>
<ContentTemplate>
<table border="1">
<tr>
<td><asp:Label ID="Label1" runat="server" Text="DJIA"></asp:Label>
</td>
<td align=right><asp:Label ID="lblDowJones" runat="server"
Text="12000"></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="Label2" runat="server" Text="NASDAQ"></asp:Label>
</td>
<td align=right><asp:Label ID="lblNasdaq" runat="server"
Text="2500"></asp:Label></td>
tag. In the
Timer
control, you set the interval to 2 seconds (2000 milliseconds) and point the
OnTick
event to the
Timer1_Tick
event handler in the code behind, which will be responsible for
writing the logic to fetch and display the new values for the three indices.
Obviously, the point of this application is to showcase a good scenario for using
ASP.NET AJAX server controls and not to build a practical market data reporting
application. As such, the initial values for the three indices have been hard-coded in the
tags themselves. The initial value for the DJIA is set to
12000
, the NASDAQ is set to
2500
,
CHAPTER 6
■
USING SERVER CONTROLS IN ASP.NET AJAX 111
828-8 CH06.qxd 9/28/07 4:46 PM Page 111
and the S&P is set to
1400
. There will also be some simple logic to update the display
values of those indices with some fictitious data as shown in the following code block in
the code-behind class:
protected void Timer1_Tick(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(1000);
lblDowJones.Text = ((int.Parse(lblDowJones.Text)) + 1).ToString();
lblNasdaq.Text = ((float.Parse(lblNasdaq.Text)) + 0.5).ToString();
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwULLTE0NDcxODQxOTNkZBVyy3kZPCaHntKg63oJ/pIvM3rf" />
</div>
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<script src="/AjaxChapter7/WebResource.axd?d=2k35oXVI5C1fsATKa8kOpQ2&
amp;t=633008366579531250" type="text/javascript"></script>
<script src="/AjaxChapter7/ScriptResource.axd?d=zmjix_F07KXpA6m02uaB_q52a3TPiFz24p4h
x51TaC3HYCrvlQk4ongK5kg1IR8XFf7DTDlMUGM-Uucre6H3Yy1K_8vru25LXaz6lsl_p0U1&t=
633051881703906250" type="text/javascript"></script>
CHAPTER 6
■
USING SERVER CONTROLS IN ASP.NET AJAX 113
828-8 CH06.qxd 9/28/07 4:46 PM Page 113
<script src="/AjaxChapter7/ScriptResource.axd?d=zmjix_F07KXpA6m02uaB_
</tr>
</table>
</div>
<div id="UpdateProgress1" style="display:none;">
Updating...
</div>
<span id="Timer1" style="visibility:hidden;display:none;"></span>
<script type="text/javascript">
<!--
Sys.Application.initialize();
CHAPTER 6
■
USING SERVER CONTROLS IN ASP.NET AJAX114
828-8 CH06.qxd 9/28/07 4:46 PM Page 114
Sys.Application.add_init(function() {
$create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":null,"displayAfter"
:500,"dynamicLayout":true}, null, null, $get("UpdateProgress1"));
});
Sys.Application.add_init(function() {
$create(Sys.UI._Timer, {"enabled":true,"interval":2000,"uniqueID":"Timer1"},
null, null, $get("Timer1"));
});
// -->
</script>
</form>
</body>
</html>
The ASP.NET AJAX server controls emit JavaScript functions that copy and build a
new
innerHTML
the scope of this chapter. If you are interested in having a more in-depth understanding
of the inner workings of these script blocks on the page, you can view them by using
either an HTTP sniffer, the JSView plug-in for FireFox (
/>en-US/firefox/addon/2076
), or other third-party tools designed to capture the browser
output.
Using a Task List Manager
One of the first reference applications publicly available for ASP.NET AJAX was Scott
Guthrie’s task list manager, ToDo List. This application is a simple yet powerful demon-
stration of the power of the ASP.NET 2.0 Framework and how easy it is to extend it for
AJAX-style functionality using ASP.NET AJAX.
This application is a simple task manager using SQL Server 2005 Express edition as
a container for its data. You can download and run it on your local machine with the
complete source available online. Feel free to customize this app in any way you want
by adding or modifying new items as long as you accommodate these changes in the
CHAPTER 6
■
USING SERVER CONTROLS IN ASP.NET AJAX 115
828-8 CH06.qxd 9/28/07 4:46 PM Page 115
provided database. The entire application really consists of a single .aspx page and a
.master page. Figure 6-3 shows the main screen for this application.
■
Note
You can download Scott’s ToDo List application in addition to video tutorials about this and other
ASP.NET AJAX topics on
.
Figure 6-3. The task list manager application
CHAPTER 6
■
Copyright: Tài liệu đại học ©