From this simple example, you can see clearly the following problems with the current ASP technology: ■ Mixture of HTML and scripting codes Our code in Figure 9.4 contains a mixture of d
Trang 1When we click on the Submit button, we print a message on the same page,
as shown in Figure 9.3
Notice that the name in the textbox is gone and the item in the selection list has been reset to the first item Figure 9.4 shows the ASP code for our sample Web application
Figure 9.1MobileQuickStart Page
Figure 9.2Web Application Using ASP
Trang 2Figure 9.4Eg1.asp
<html>
<b>Tell us about yourself:</b>
<form method="post" action="eg1.asp">
Name<input type="text" name="userName"> <br/>
Which part of the world are you from?
<select name="partOfWorld">
<option value="Europe">Europe
<option value="Asia">Asia
<option value="United States of America">United States of America
</select>
<input type="submit" value="submit">
<%
if Request.Form("userName")<>""then Response.Write "<i>Welcome to ASP.NET, " &
Request.Form("userName") & " (from
" & Request.Form("partOfWorld") & ")!</i>"
end if
%>
</html>
To ensure that the name and selection item remains selected after submission,
we must modify our codes as shown in Figure 9.5
Figure 9.3State Is Lost When the ASP Page Is Submitted
Trang 3Figure 9.5Eg2.asp
<html>
<b>Tell us about yourself:</b>
<form method="post" action="eg2.asp">
Name<input type="text" name="userName" value="<%
=Request.Form("userName") %>"> <br/>
Which part of the world are you from?
<% itemSelected=Request.Form("partOfWorld") %>
<select name="partOfWorld">
<option <%if itemSelected="Europe" then Response.write "SELECTED" end if %>
value="Europe">Europe
<option <%if itemSelected="Asia" then Response.write "SELECTED" end if %> value="Asia">Asia
<option <%if itemSelected="United States of America" then Response.write "SELECTED" end if
%> value="United States of America">United States of America
</select>
<input type="submit" value="submit">
<%
if Request.Form("userName")<>""then Response.Write "<i>Welcome to ASP.NET, " &
Request.Form("userName") & " (from " &
Request.Form("partOfWorld") & ")!</i>"
end if
%>
</html>
And now our Web application will behave as we intend it to, as shown in Figure 9.6
Trang 4From this simple example, you can see clearly the following problems with the current ASP technology:
■ Mixture of HTML and scripting codes Our code in Figure 9.4 contains a mixture of display codes (HTML) and application logic (using VBScript) Because building Web applications often involves graphic
designers and programmers, the current ASP technology does not
pro-vide a clean separation of display from content.This often results in bugs and difficulties in post-project maintenance
■ Extra effort must be spent on maintaining states In Figure 9.5, look at the amount of code you have to write in order for the server to maintain the state when transiting from page to page Most of the time spent on maintaining states could be directed toward implementing busi-ness logic
Now let’s look at how we can do the same thing using ASP.NET—look at the code shown in Figure 9.7
ASP.NET pages ends with a aspx extension.
Figure 9.7Eg1.aspx
<script language="vb" runat="server">
Sub Button1_clicked (sender as Object, e as EventArgs) Figure 9.6Preserving State in ASP Requires Substantial Effort
Continued
Trang 5message.text = "<i>Welcome to ASP.NET, " & userName.Text &
"(from " & partOfWorld.Value & ") !</i>"
End Sub
</script>
<html>
<body>
<form runat="server">
<b>Tell us about yourself : </b><br/>
Name : <asp:textbox runat="server" id="userName"/><br/>
Which part of the world are you from?
<select id="partOfWorld" runat="server">
<option value="Europe"/>
<option value="Asia"/>
<option value="United States of America"/>
</select>
<asp:button runat="server" id="button1" onClick="Button1_clicked" text="Submit"/>
</form>
<asp:label runat="server" id="message"/>
</body>
</html>
The ASP.NET code shown in Figure 9.7 deserves our closer attention.We
can divide this code into two main parts, content and code In the figure, the part
related to code rather than content is depicted in in boldface
The Content Components
Within the user interface (UI) part of Figure 9.7, we can see familiar HTML
code In addition, we also see a few new tags starting with an asp: prefix You
might also notice some of the elements have the additional runat attribute Let’s
define some terms used in ASP.NET.The whole ASP.NET document shown in
our example is known as a Web Form A Web Form contains two components: Code and Content.The Content component of a Web Form can contain Web
Form Server controls.Web Form Server controls contain the following types of
Figure 9.7Continued
Trang 6controls: HTML Server control, ASP.NET Server control, Validation controls, and User
controls.The examples in the next section illustrate the first two kinds of controls.
(We’ll examine the validation controls later in the chapter User controls are much more complex and won’t be addressed here.)
HTML Server Controls
An example of an HTML Server control is as follows:
<select id="partOfWorld" runat="server">
Notice that HTML Server controls are similar to the normal HTML elements,
except that they have the additional runat attribute In ASP.NET, normal HTML
elements are converted to HTML Server controls so that they can be programmed
on the server.The id attribute acts as a unique identifier for the server controls.
If you have experience programming Visual Basic, a good way to view ASP.NET programming is to imagine yourself writing VB codes, except that this time your application runs on the Web platform You can imagine an ASP.NET page as an executable file, producing HTML codes to
be sent to the Web browser
ASP.NET Server Controls Besides the HTML server controls, ASP.NET provides a different set of server controls known as ASP.NET server controls.You can think of ASP.NET server controls as ActiveX controls in VB Unlike the HTML Server controls, they do not provide a one-to-one mapping.The following is an example of an ASP.NET Server control:
<asp:button runat="server" id="button1" onClick="Button1_clicked"
text="Submit"/>
This ASP.NET server control will render itself as an <input> element when viewed using a Web browser ASP.NET server controls expose properties and events that you can set and service For example, this ASP.NET server control
defines the onClick event.When the button is clicked, the Button1_clicked
subrou-tine would be serviced (which is covered in the next section)
Trang 7If you are experienced with HTML, think of ASP NET server controls as another set of tags and elements that you can use to create dynamic Web applications For example, instead of using the <input> tag for text input, you can also use the <asp:input> element (but with more features!).
The Code Components
The Content component basically concerns itself with display issues.The Code components are the “glue” that binds things up Our example shows a subroutine defined in the Code section.This subroutine is fired when the user clicks on the
Submitbutton It then displays a welcome message by referencing the controls defined in the Content section
<script language="vb" runat="server">
Sub Button1_clicked (sender as Object, e as EventArgs) message.text = "<i>Welcome to ASP.NET, " & userName.Text &
"(from " & partOfWorld.Value & ") !</i>"
End Sub
</script>
NOTE
Again, the processing model of ASP.NET should be very familiar to VB programmers.
Figure 9.8 shows what our ASP.NET page looks like on the Web browser After a page has been submitted, it will retain its state before the submission
To see the HTML codes generated by the ASP.NET runtime, select View
Source (see Figure 9.9)
Trang 8Figure 9.9Our Example’s HTML Output
<html>
<body>
<form name="ctrl1" method="post" action="eg1.aspx" id="ctrl1">
<input type="hidden" name=" VIEWSTATE"
value="YTB6OTY0MzM4NTkzX2Ewel9oejV6M3hfYTB6YTB6aHpUZVx4dF88aT5XZWxjb21lI HRvIEFTUC5ORVQsIFdlaSBNZW5nIExlZShmcm9tIEFzaWEpICE8L2k+eF9feF9feHhfeF9fe A==f77c15df" />
<b>Tell us about yourself : </b><br/>
Name : <input name="userName" type="text" value="Wei Meng Lee"
id="userName" /><br/>
Which part of the world are you from?
<select name="partOfWorld" id="partOfWorld">
<option value="Europe">Europe</option>
<option selected value="Asia">Asia</option>
<option value="United States of America">United States of America</option>
</select>
<input type="submit" name="button1" value="Submit" id="button1" />
</form>
Figure 9.8ASP.NET Preserves the State Automatically
Trang 9<span id="message"><i>Welcome to ASP.NET, Wei Meng Lee(from Asia)
!</i></span>
</body>
</html>
What is interesting in this HTML output is the hidden input element, indi-cated in Figure 9.9 in boldface
The VIEWSTATE hidden element is the one that performs all the magic It
is responsible for “maintaining” states between pages.The value of this hidden ele-ment is used by the ASP.NET runtime to recall the previous state the page was in
The concept of using a hidden element to maintain state is somewhat similar to that of using a browser session, with a sessionid passed as a hidden form value, or of using a cookie.
ASP.NET Architecture
Figure 9.10 illustrates the architecture of ASP.NET.The Web client first interacts with Internet Information Server (IIS) If the Web client is accessing HTML pages, IIS will communicate with the underlying operating system to fetch the HTML pages If the Web client is accessing an ASP.NET application, the
ASP.NET application will first be compiled to produce a NET runtime class The NET runtime class is then compiled and invoked to produce HTML to be sent to the client side
One important difference between ASP.NET and ASP is that ASP.NET appli-cations are parsed and compiled once and then cached, so that subsequent
requests do not go through the same time-consuming steps.This creates a positive impact on the performance of ASP.NET applications
Figure 9.9Continued
Trang 10Developing Mobile Web Forms
Now that you have seen how ASP.NET works, it is time to take a look at a very simple Mobile Web Form and the components it contains (Figure 9.11)
Figure 9.11Welcome.aspx
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage"
Language="VB" %>
<%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<Mobile:Form id="FormOne" runat="server">
<Mobile:Label runat="server">Welcome to the Microsoft Mobile Internet Toolkit!</Mobile:Label>
</Mobile:Form>
Figure 9.12 shows the code from Figure 9.11 displayed in different kinds of browsers: Pocket PC, UP.SDK 4.1, and IE 5.5
If you have been developing WAP application using WML and ASP, you would be surprised that the same application can be displayed on all these dif-ferent devices, with no effort on your side for customization.That’s the power of the Microsoft Mobile Internet Toolkit SDK
Figure 9.10Architecture of ASP.NET
Web Clients
Internet Information Server (IIS) ASP.NET
Application
.NET Framework
Windows NT/2000 OS