listing for this page is as follows:
ajaxsampleform aspx
<%@ Page Language=”vb” AutoEventWireup=”false”
CodeBehind=”AjaxSampleForm.aspx.vb”
Inherits=”ASPNetWebApp.AjaxSampleForm” %>
<!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>ASP.NET AJAX Sample</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
Select an option:
<asp:DropDownList ID=”DropDownList1” runat=”server” AutoPostBack=”True”>
<asp:ListItem Text=”Option 1” Value=”Option 1” />
<asp:ListItem Text=”Option 2” Value=”Option 2” />
<asp:ListItem Text=”Option 3” Value=”Option 3” />
428 .
chaPter 20 ASp.neT Web FormS
</asp:DropDownList>
<br />
Option selected:
<asp:TextBox ID=”TextBox1” runat=”server”></asp:TextBox>
</div>
</form>
</body>
</html>
ajaxsampleform aspx vb
Public Partial Class AjaxSampleForm
Inherits System.Web.UI.Page
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, _
ByVal e As EventArgs) _
Handles DropDownList1.SelectedIndexChanged
System.Threading.Thread.Sleep(2000)
Me.TextBox1.Text = Me.DropDownList1.SelectedValue
End Sub
End Class
Notice that in the DropDownList1_SelectedIndexChanged method we have added a statement to
sleep for two seconds. This will exaggerate the server processing time, thereby making it easier to see
the effect of the changes we will make. When you run this page and change an option in the drop-down
list, the whole page will be refreshed in the browser.
The first AJAX control that you need to add to your web page is a ScriptManager. This is a
nonvisual control that’s central to ASP.NET AJAX and is responsible for tasks such as sending script
libraries and files to the client and generating any required client proxy classes. You can have only
one ScriptManager control per ASP.NET web page, which can pose a problem when you’re using
master pages and user controls. In that case, you should add the ScriptManager to the topmost
parent page, and a ScriptManagerProxy control to all child pages.
After you add the ScriptManager control, you can add any other ASP.NET AJAX controls. In this
case, add an UpdatePanel control to the web page, as shown in the following listing. Notice that
TextBox1 is now contained within the new UpdatePanel control.
<%@ Page Language=”vb” AutoEventWireup=”false”
CodeBehind=”AjaxSampleForm.aspx.vb”
Inherits=”ASPNetWebApp.AjaxSampleForm” %>
<!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>ASP.NET AJAX Sample</title>
</head>
<body>
<form id=”form1” runat=”server”>
<asp:ScriptManager ID=”ScriptManager1” runat=”server”></asp:ScriptManager>
<div>
Select an option:
<asp:DropDownList ID=”DropDownList1” runat=”server” AutoPostBack=”True”>
<asp:ListItem Text=”Option 1” Value=”Option 1” />
<asp:ListItem Text=”Option 2” Value=”Option 2” />
rich Client-side Development .
429
<asp:ListItem Text=”Option 3” Value=”Option 3” />
</asp:DropDownList>
<br />
Option selected:
<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>
<ContentTemplate>
<asp:TextBox ID=”TextBox1” runat=”server”></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”DropDownList1”
EventName=”SelectedIndexChanged” />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
The web page now uses AJAX to provide a partial-page update. When you now run this page and
change an option in the drop-down list, the whole page is no longer refreshed. Instead, just the text
within the textbox is updated. In fact, if you run this page you will notice that AJAX is too good at
just updating part of the page. There is no feedback and if you didn’t know any better you would
think that nothing is happening. This is where the UpdateProgress control becomes useful. You can
place an UpdateProgress control on the page, and when an AJAX request is invoked the HTML
within the ProgressTemplate section of the control is rendered. The following listing shows an
example of an UpdateProgress control for our web form:
<asp:UpdateProgress ID=”UpdateProgress1” runat="server">
<ProgressTemplate>
Loading.
</ProgressTemplate>
</asp:UpdateProgress>
The final server control in ASP.NET AJAX that hasn’t been mentioned is the Timer control, which
enables you to perform asynchronous or synchronous client-side postbacks at a defined interval.
This can be useful for scenarios such as checking with the server to see if a value has changed.
Once you have added some basic AJAX functionality to your web application, you can further
improve the client user experience by adding one or more elements from the AJAX Control Toolkit,
which is discussed in the following section.
using aJax control extenders
AJAX Control Extenders provide a way to add AJAX functionality
to a standard ASP.NET server control. The best-known set of control
extenders is the AJAX Control Toolkit, a free open-source library of
client behaviors that includes almost 40 control extenders. These either
provide enhancements to existing ASP.NET web controls or provide
completely new rich-client UI elements. Figure 20-37 shows a Calendar
Extender that has been attached to a TextBox control.
fiGure 20-37
430 .
chaPter 20 ASp.neT Web FormS
The ASP.NET AJAX Control Toolkit is available for download via a link from http://
ajaxcontroltoolkit.codeplex.com. The binary version of the download includes an assembly
called AjaxControlToolkit.dll. Copy this to a directory where you won’t accidentally delete it.
To add the controls to the Visual Studio Control Toolbox, you should first create a new tab to house
them. Right-click anywhere in the Toolbox window, choose Add Tab, and then rename the new
tab something meaningful, such as AJAX Control Toolkit. Next, right-click in the new tab and
select Choose Items. Click the Browse button and locate the AjaxControlToolkit.dll to add the
AJAX controls to the list of available .NET Framework Components. Click OK and the tab will be
populated with all the controls in the AJAX Control Toolkit.
Visual Studio 2010 provides designer support for any
AJAX Control Extenders, including the AJAX Control
Toolkit. Once you have added the controls to the Toolbox,
Visual Studio adds an entry to the smart-tag Tasks fiGure 20-38
list of any web controls with extenders, as shown
in Figure 20-38.
When you select the Add Extender task it launches the Extender Wizard, shown in Figure 20-39.
Choose an extender from the list and click OK to add it to your web form. In most cases, the Extender
Wizard will also automatically add a reference to the AJAX Control Toolkit library. However, if it
does not you can manually add a binary reference to the AjaxControlToolkit.dll
assembly.
Because the Extender Controls are built on top of ASP.NET AJAX, you will need
to ensure that a ScriptManager control is on your web form.
fiGure 20-39
asP.neT Web site administration .
431
As shown in Figure 20-40, Visual Studio 2010 includes all the
properties for the control extender in the property grid, under
the control to which the extender is attached.
Because the AJAX Control Toolkit is open source, you can
customize or further enhance any of the control extenders it
includes. Visual Studio 2010 also ships with C# and Visual Basic
project templates to create your own AJAX Control Extenders
and ASP.NET AJAX Controls. This makes it easy to build rich
web applications with UI functionality that can be easily reused
across your web pages and projects.
asP net web site adMinistration
Although running your web application with default behavior
will work in most situations, sometimes you’ll need to manage
the application settings beyond simply setting the properties of
components and page items. The Web Site Administration Tool
provides you with a web-based configuration application that
enables you to define various security-related settings, such as
users and roles, as well as application-wide settings that can
come in handy, such as a default error page, and global SMTP e-mail settings that are used by
various components, such as the PasswordRecovery control.
To start the Administration Tool, use the Project . ASP.NET Configuration menu command for
Web Application projects, or Website .
ASP.NET Configuration for Web Site projects. When the
tool is launched, Visual Studio 2010 instantiates a temporary web server on a unique port and
opens a web browser to the Administration Tool home page for the application you’re currently
administering.
You can determine whether the web server
is active by looking in the notification area
of your taskbar and finding the development
server icon connected to the port that Visual
Studio 2010 allocated when it was started up.
You can stop an active web server by
right-clicking its icon in the notification area
and selecting Show Details. When the server
information is displayed (see Figure 20-41),
click the Stop button to stop the specific
instance of the development web server.
fiGure 20-40
fiGure 20-41
Note that stopping an active web server won’t affect any other development
servers that are currently running.
432 .
chaPter 20 ASp.neT Web FormS
When the Administration Tool is displayed in your web browser, it shows the application name,
accompanied by the name of the current Windows-based authenticated user. The tool has three
main sections: security for the creation and maintenance of users, roles, and authentication;
application configuration to control application-specific key-value pairs, SMTP settings, and debug
configurations; and provider configuration to control the way the user administration data is stored
for the site.
security
The security section of the tool provides you with a summary of the users and roles defined in the
site, and the authentication mode. You can change individual settings from this summary page by
clicking their associated links, or use the Security Setup Wizard to step through each section of the
security settings in turn.
The authentication mode is controlled by the access method page (shown in the wizard in
Figure 20-42). If you choose From the Internet, the tool sets the authentication mode to Forms,
whereas the From a Local Area Network option results in an authentication mode of Windows.
The most useful part of this tool is the ability it gives you to add and edit roles. In the wizard you’ll
first need to enable role management by checking the Enable Roles for this Web Site option. Once
roles are active you can define them either through the wizard or from the summary page. Each role
is defined by a single string value, and it’s up to you to control how that role will be used in your
web application (with the exception of access rules, which are discussed in a moment).
The next step in the wizard is to create user accounts. The information on this page is a replication
of the CreateUserAccount component, and enables you to create an initial user who can serve as
administrator for your web site.
fiGure 20-42
asP.neT Web site administration .
433
The access rules page (shown in Figure 20-43) enables you to restrict access to certain parts of your
site to a specific role or user, or to grant access only when any user is logged in. As Figure 20-43
shows, by default there is a single rule (which is actually implicitly defined and inherited from
the server) that defines full access to the entire site for all users.
Web site processing will look at the rules in the order in which they are defined, stopping at the first
rule that applies to the particular context. For example, if you define first a rule that allows access
to the Admin folder for anyone belonging to the Administrator’s role, and then define a subsequent
rule that denies access to the same folder for all users, it will effectively block access to the Admin
folder for all users who do not belong to the Administrator’s role.
Once you have users, roles, and rules defined in your site, you can then start applying the access by
clicking the Manage Users link from the summary security page. This presents you with a list of all
users defined in the system. Click the Edit User or Edit Roles link to specify the roles to which each
user belongs.
This information can be used to customize the content in your web pages with the LoginView
component discussed earlier in this chapter.
fiGure 20-43
application settings
The application section of the Web Site Administration Tool enables you to define and edit
application-specific settings in the form of key-value pairs, as well as to configure SMTP e-mail
settings, including the default SMTP mail server and sender’s e-mail address.
434 .
chaPter 20 ASp.neT Web FormS
You can also specify what level of debugging you want to perform on the application, and customize
the tracing information being kept as you run the application.
asP net configuration in iis
If you have already deployed an ASP.NET application to a production server, you can edit
the configuration settings directly within Internet Information Services (IIS), located in the
Administrative Tools section of the Control Panel. When ASP.NET is installed on a machine, you’ll
find that each web site (including virtual directories) will have a set of configuration tools in IIS