Programming an ASP.NET AJAX Server-Centric Based Online Shopping Website
(Page 1 of 4 )
Welcome to the third part of an 11-part series. From now on, we will set our feet on the long journey of doing all the related programming work. However, to make things simple we will leave out the discussion about the general database access modules. Instead, we will go directly into the registration and login-related programming.
A
downloadable .rar file is available for this article.
Registration and Login
Just as with a typical web application the first step is to register, we'll start our web page design by preparing the registration and login processes.
Registering the User Info
First of all, we should make it clear that the registration discussed here is mainly aimed at common users/customers, i.e. the role of all the newly-registered users is the same: "Common Customer" (with a RoleID of 3). By the way, when we get into a later discussion of background management, we will build some special web pages to manage the role data.
Interface Design
The following Figure 6 corresponds to the design-time snapshot of the "Register.aspx."
Figure 6—the design-time snapshot for registration
/Building_ASP.NET_AJAX_Server-Centric_Shopping_Website(3)_html_42a478ed.png)
Since this is the first time in this article series that you'll be authoring an ASP.NET AJAX server-centric based page, I'm going to give you some details in constructing such a page. At the very beginning, we must drag the server-side control ScriptManageronto the topmost part of the page. The ScriptManagermainly takes the responsibility of sending the necessary JavaScript files and Web Service proxy in the run time to the client-side browser. In a word, it serves as the center of the whole ASP.NET AJAX architecture. And also, in a common ASP.NET page, the recommended position in which to anchor ScriptManageris just after the <form> element is declared, as is indicated in the following code snippet:
……
<body style="margin-left:0;margin-top:0">
<form id="MyForm" method="post" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
As the foundation is laid, you can then safely drag other ASP.NET AJAX controls onto the page, which also include the controls provided by the ASP.NET AJAX Toolkits.
As Figure 6 indicates, we have leveraged three Extender controls out of the ASP.NET AJAX Control Toolkit here: TextBoxWatermarkExtender, PasswordStrength and ValidatorCalloutExtender. TextBoxWatermarkis an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to get "watermark" behavior. When a watermarked TextBox is empty, it displays a message to the user with a custom CSS style. Once the user has typed some text into the TextBox, the watermarked appearance goes away. The typical purpose of a watermark is to provide more information to the user about the TextBox itself without cluttering up the rest of the page.
The second control mentioned above, PasswordStrength, however, is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control used for the entry of passwords. The PasswordStrengthextender shows the strength of the password in the TextBox and updates itself as the user types the password. The indicator can display the strength of the password as a text message or with a progress bar indicator. The styling and position of both types of indicators is configurable.
Finally, the third control, ValidatorCallout,is also an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators. To use this control, add an input field and a validator control as you normally would. Then add the ValidatorCalloutand set its TargetControlIDproperty to reference the validator control.
Next: Running Time >>
More ASP.NET Articles
More By Xianzhong Zhu
/ 6 
