Thông tin tài liệu
372 Chapter 9 • Microsoft Mobile Internet Toolkit When 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. www.syngress.com Figure 9.1 MobileQuickStart Page Figure 9.2 Web Application Using ASP 159_wg_wi_09 10/22/01 5:29 PM Page 372 Microsoft Mobile Internet Toolkit • Chapter 9 373 Figure 9.4 Eg1.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. www.syngress.com Figure 9.3 State Is Lost When the ASP Page Is Submitted 159_wg_wi_09 10/22/01 5:29 PM Page 373 374 Chapter 9 • Microsoft Mobile Internet Toolkit Figure 9.5 Eg2.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. www.syngress.com 159_wg_wi_09 10/22/01 5:29 PM Page 374 Microsoft Mobile Internet Toolkit • Chapter 9 375 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 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. NOTE ASP.NET pages ends with a .aspx extension. Figure 9.7 Eg1.aspx <script language="vb" runat="server"> Sub Button1_clicked (sender as Object, e as EventArgs) www.syngress.com Figure 9.6 Preserving State in ASP Requires Substantial Effort Continued 159_wg_wi_09 10/22/01 5:29 PM Page 375 376 Chapter 9 • Microsoft Mobile Internet Toolkit message.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 www.syngress.com Figure 9.7 Continued 159_wg_wi_09 10/22/01 5:29 PM Page 376 Microsoft Mobile Internet Toolkit • Chapter 9 377 controls: 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. NOTE 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). www.syngress.com 159_wg_wi_09 10/22/01 5:29 PM Page 377 378 Chapter 9 • Microsoft Mobile Internet Toolkit NOTE If 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 Submit button. 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). www.syngress.com 159_wg_wi_09 10/22/01 5:29 PM Page 378 Microsoft Mobile Internet Toolkit • Chapter 9 379 Figure 9.9 Our 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> www.syngress.com Figure 9.8 ASP.NET Preserves the State Automatically Continued 159_wg_wi_09 10/22/01 5:29 PM Page 379 380 Chapter 9 • Microsoft Mobile Internet Toolkit <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. NOTE 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. www.syngress.com Figure 9.9 Continued 159_wg_wi_09 10/22/01 5:29 PM Page 380 Microsoft Mobile Internet Toolkit • Chapter 9 381 Developing 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.11 Welcome.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. www.syngress.com Figure 9.10 Architecture of ASP.NET Web Clients Internet Information Server (IIS) ASP.NET Application .NET Framework Windows NT/2000 OS 159_wg_wi_09 10/22/01 5:29 PM Page 381 . Microsoft Mobile Internet Toolkit When 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. 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. 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
Ngày đăng: 04/07/2014, 02:20
Xem thêm: Webmaster''''s Guide to the Wireless Internet part 41 ppt, Webmaster''''s Guide to the Wireless Internet part 41 ppt
