Migrating from ASP to ASP.NET

Transcription

1

2 Migrating from ASP to ASP.NET Leveraging ASP.NET Server Controls Dan Wahlin Wahlin Consulting LLC Summary: Converting ASP web applications to ASP.NET can prove to be a timeconsuming process unless you re armed with a few tips and techniques to get you started in the right direction. This paper will introduce you to different types of ASP.NET server controls and explain how they can be used. The topics presented in this paper are targeted toward programmers with existing VBScript and ASP application development experience. Topics covered include: Introduction Why Move to ASP.NET? Language Differences Introducing ASP.NET Server Controls HTML Controls Web Server Controls Validation Controls Conclusion Changing from one technology to another is a time-consuming and often frustrating process that typically involves learning new language syntax, new ways of performing common programming tasks, and even different ways of thinking. However, with all of the cons associated with a technology shift, moving to a new technology can actually have many pros and turn out to be quite rewarding in the long run. Moving from Active Server Pages (ASP) to ASP.NET doesn t have to be a frustrating or intimidating process as long as you re armed with a few tips and code samples that help lower the learning curve. It s true that there is a lot to learn when moving to Microsoft s.net platform, enough that one paper (or even one book) can t possibly cover everything involved. However, by focusing on common scenarios that you face on a daily basis, the.net learning curve can be minimized, resulting in a more fun and efficient learning environment. As you get more and more proficient at creating ASP.NET applications, you ll see that the time you put into learning the technology is definitely worthwhile. The goal of this paper is to arm you with different code conversion examples and explain how ASP.NET server controls can reduce bugs and minimize the amount of code you write. Before showing any sample code, let s take a quick look at why jumping into the world of ASP.NET is well worth the effort and a few of the ways ASP.NET differs from ASP.

3 Why Move to ASP.NET? ASP provides a robust development environment that makes it quick and easy to integrate dynamic data into web applications. With this in mind, you may be wondering why Microsoft replaced ASP with ASP.NET. After all, why replace something that works quite well and is extremely popular worldwide? While ASP has many strengths, it also has its own set of weaknesses. ASP.NET builds upon ASP s strengths, overcomes its weaknesses, and adds numerous features and capabilities that provide you with even more power as a web developer. Table 1 provides a high-level comparison of the two technologies. Table 1. Comparing ASP with ASP.NET. ASP ASP.NET Code Execution Interpreted code Compiled code Security Security controlled by operating system, through custom code, or through COM objects Integrated support for Code Access Security (CAS), operating system specific security, forms authentication, role management, Passport, cryptography, and more Languages Scripted languages such as VBScript or JScript Object-oriented languages such as VB.NET and C# (plus over 20 others) Caching Support None Built-in page, user control, State Management Application state and inprocess Session state and data caching support Session data can be stored: In-process On a dedicated state server In SQL Server Support for Application state, Caching, and ViewState Data Access ADO ADO.NET Deployment Copy ASP files, use RegSvr32.exe to register COM objects XCopy deployment Component Support Little built-in support for HTML components Built-in support for numerous web controls, Datagrids, calendars, and more File Extensions.asp.aspx Code Separation None HTML code can be physically separated from programming code using code-behind pages

4 While the items in Table 1 are by no means a complete listing of the differences between ASP and ASP.NET, the comparisons highlight some of the major differences and set the stage for concepts you ll be introduced to later in the paper. Language Differences In addition to differences found between ASP and ASP.NET, there are also differences in the languages that can be used with the two development environments. ASP relies upon interpreted scripts written in languages such as VBScript. ASP.NET, on the other hand, doesn t support scripted languages. Instead, ASP.NET pages must be written using code that can compiled into a special.net language, referred to as Microsoft Intermediate Language (or MSIL). While this paper won t focus on language syntax or Object- Oriented Programming (OOP) techniques, it is in your best interest to begin researching these topics since they are important in the world of.net. When migrating to ASP.NET, developers coming from a VBScript or VB background will find that VB.NET is the logical language choice. Developers used to working with C, C++, or Java will likely move to C#. Since all.net languages are interoperable (C# programs can talk with VB.NET or even Cobol.NET programs), you should choose the language you are most comfortable using since speed and performance between languages isn t an issue in the.net platform. Once you learn one.net language, it is rather straightforward to learn another. Since many ASP developers use VBScript, the ASP.NET code samples that follow are written using VB.NET. The code download associated with this paper also includes C# code (my personal preference). Introducing ASP.NET Server Controls As you re undoubtedly aware, ASP relies upon HTML tags such as the <input> or <select> tags to capture end user input. When wrapped in a <form> tag, data can be posted back to the server for collection and accessed using VBScript code similar to the following: <% Dim fname fname = Request.Form( txtfirstname ) %> Listing 1 shows a portion of an ASP page that contains several different HTML input tags. If you ve worked with HTML, much the code will look very familiar.

5 Listing 1. ASP relies upon standard HTML tags to capture form data entered by an end user. Accessing the values entered into the HTML tags is accomplished by using the ASP Request collection on the server side. <form method="post" action="insertcustomer.asp"> <table width="640"> <td width="130"><b>name:</b> <td><input type="text" name="txtname" id="txtname" /> <td width="130"><b>company:</b> <td><input type="text" name="txtcompany" id="txtcompany" /> <td width="130"><b>title:</b> <td><input type="text" name="txttitle" id="txttitle" /> <!-- Code omitted for brevity --> <td colspan="2"> <input type="button" id="btnsubmit" name="btnsubmit" value="submit" onclick="validateform(this.form);" /> </table> </form> While the HTML form tags shown in Listing 1 can also be used in ASP.NET applications and accessed through a built-in Request object on the server side in much the same manner as ASP, a more efficient and less error-prone way of capturing form data is now available. By employing new functionality found in ASP.NET, you can minimize the amount of code you have to write to perform tasks such as generating tables filled with data, filling drop-down lists, or even capturing submitted form data. You can also minimize the number of pages required to display and collect data. ASP.NET web forms post back to themselves, resulting in less complex applications since the form display and data collection activities are handled by one page. ASP.NET introduces several built-in server controls referred to as HTML Controls, Web Server Controls, and Validation Controls. These controls are simply mini software programs written by Microsoft that can be used (with little effort on your part) to generate HTML code that is sent to the browser and to validate user input. The controls greatly simplify the process of accessing form data on the server side and can be used to automatically create calendars, data grids, form controls (textboxes, buttons, etc.), ad rotators, bulleted lists, and much more. The next few sections will focus on HTML Controls, Web Server Controls, and Validation Controls.

6 HTML Controls HTML Controls mirror functionality found in standard HTML tags but allow data to be collected on the server side without resorting to the Request collection. HTML Controls are very lightweight and therefore have a small footprint on the server. Upgrading an existing ASP page to use ASP.NET HTML controls is as simple as adding a runat= server attribute to different form tags. To use HTML Controls in an ASP.NET page, simply add them to a page saved with an.aspx file extension and then look at the page in any browser. An example of creating three HTML Controls is shown in Listing 2. Listing 2. ASP.NET has several different built-in server controls that can be leveraged to automatically generate HTML. The code shown below contains three different HTML Controls. Each control has the runat= server attribute applied to it. <form runat="server"> <b>name:</b> <input type="text" id="txttitle" runat="server"> <p> <input type="button" id="btnsubmit" value="submit" OnServerClick="btnSubmit_ServerClick" runat="server"> <br> <span id="lbloutput" runat="server" /> </form> Looking at the code syntax in Listing 2, you ll see the addition of the runat attribute with a value set to server on the different HTML Control tags. By adding this special attribute, the controls can easily be accessed on the server side by referencing the control s id. For example, to get the value of the textbox control (named txttitle) after the form is submitted, the following VB.NET code can be used: Dim title as String = txttitle.value Notice that the fname variable has a declared data type of String and that it is created and assigned to using a single line of code. This is different from VBScript, where variables must be declared and assigned to separate code lines. VBScript also treats variables as Variants, whereas VB.NET (and all.net languages) require that a specific data type be applied when a variable is defined. When a form is submitted, the values of ASP.NET HTML Controls are normally accessed by relying upon special sections of code referred to as event handlers. For example, when a button is clicked within an ASP.NET web form, a notification that the button was clicked is created on the server side, letting your program know what action occurred. These notifications are called events. By using events and event handlers, it s very easy to detect which button is selected in cases where a form may have more than one button, such as Insert, Update, Delete, or Cancel buttons. Although a complete discussion of events and event handlers is beyond the scope of this paper, let s take a quick look at how the button shown earlier in Listing 2 can be hooked up to an event handler so that you know when the button is clicked and can act

7 upon it. First, an event handler subroutine must be written that can be notified once the button has been clicked and the form is submitted to the server. Next, the button must be hooked up to the event handler subroutine. When the button is clicked, the code within the event handler will be executed on the server side. Listing 3 contains a VB.NET event handler for the btnsubmit button. This subroutine accepts two parameters, including the control causing the code to be called (the button, in this example) as well as a generic event argument, which isn t of any use in this particular situation. Listing 3. HTML Controls can be associated with event handlers that are called when the end user initiates specific actions, such as clicking a button. Event handlers such as btnsubmit_serverclick are called on the server side once a form is submitted. They can be placed within a script block that has the runat= server attribute or in a separate page referred to as a code-behind page. <script runat="server"> This event handler will be called when the button is clicked. The routine executes on the server side rather than on the client side. Public Sub btnsubmit_serverclick(byval sender as Object, _ ByVal e as EventArgs) lbloutput.innertext = "You submitted: " + txttitle.value End Sub </script> Once the subroutine (named btnsubmit_serverclick) is called, it handles writing the value entered into the txttitle textbox to the span control named lbloutput. This is accomplished by calling the textbox HTML Control s Value property and assigning it to the span control s InnerText property. More details about the different properties found on HTML Controls can be found in the.net Software Developer s Kit (SDK) documentation installed with.net. If you take a look back at Listing 2, you ll notice that no <%= code %> syntax must be embedded into the ASP.NET page in order to update the span control. The event handler updates the span control directly using VB.NET code. This is a big change from ASP that makes your code much more readable and less likely to turn into spaghetti code. This change also means that you don t have to rely on Response.Write statements to write HTML content back to the browser. The code shown in Listing 3 can only be called on the server side if the btnsubmit button click is somehow hooked to the btnsubmit_serverclick event handler as the form is submitted to the server. One way to hook the button to the event handler is to add

8 the OnServerClick attribute to the button as shown below (additional ways exist as well, including the use of special function pointers called delegates): <input type="button" id="btnsubmit" value="submit" OnServerClick="btnSubmit_ServerClick" runat="server"> The OnServerClick attribute defines the name of the subroutine that will be called when the form is posted to the server after the button is clicked. By adding this attribute, the ASP.NET runtime will automatically parse the incoming control values, identify that the button was clicked, and cause the event handler code to be called. You can see that all of this work is done with very little effort on your part. Going this route avoids tedious Select Case statements typically used in ASP to detect when different buttons are clicked in order to execute specific code. Although not directly related to HTML Controls, another advantage ASP.NET offers is compiled code. All of the VB.NET code shown to this point must be compiled to run properly on the server (either automatically compiled by ASP.NET, using Visual Studio.NET, or by using a command-line compiler name vbc.exe). As a result, the compiler can check the syntax and let you know of any errors at compile time. When using the older ASP Request.Form ( txttitle ) syntax, no code validity checks can be performed until run-time since the HTML tag name is in quotes. This means there is no way to know if the txttitle name is mistyped until you run the ASP page. With ASP.NET, many errors can be caught early on before you ever try testing the web form in the browser. Web Server Controls While HTML controls offer a great way to access data on the server side, ASP.NET also supports a more robust set of controls, referred to as Web Server Controls. Web Server Controls follow the overall object design patterns found in the.net platform and offer a richer feature set than HTML Controls. These controls are special pieces of code Microsoft has written that are designed to output HTML code that can be sent from the server to the browser. You can use Server Controls without worrying about browser type since they are always executed on the web server and generate regular HTML. Web Server controls are prefixed with an asp namespace prefix to differentiate them from standard HTML tags. Aside from the asp namespace prefix, Web Server Controls are used by defining the type of the control and the id for the control, and by adding the runat attribute. Listing 4 shows several different ASP.NET server controls that replace the standard HTML tags shown earlier in Listing 1.

9 Listing 4. ASP.NET has built-in Server Controls that provide a powerful way to access data, expose events, plus much more. The code shown here demonstrates using the Textbox and Button Server controls. <form runat="server"> <table height="249" width="640"> <td width="130"><b>user ID:</b> <td> <asp:textbox id="txtcustomerid" runat="server" /> <td width="130"><b>name:</b> <td> <asp:textbox id="txtname" runat="server" /> <td width="130"><b>company:</b> <td> <asp:textbox id="txtcompany" runat="server" /> <td colspan="2"> <asp:button id="btnsubmit" runat="server" text="submit" /> </table> </form> As with HTML Controls, Web Server Controls such as the button can cause event handlers to be called on the server side when they are clicked by the end user and the form is posted back. However, the OnClick attribute is used rather than the OnServerClick attribute. Although an onclick attribute is often applied to standard HTML tags to cause JavaScript functions to be called, the OnClick attribute discussed here is specific to Web Server Controls. The sample code that accompanies this article contains an event handler for the Button server control shown in Listing 4, which accesses the textbox data and updates a SQL Server database using ADO.NET.

10 The TextBox control shown in Listing 4 can be used to create standard textboxes, password textboxes, or text areas. To change between the different types, the TextMode attribute can be added to the control as shown below: Regular Textbox: <asp:textbox id="txttitle" runat="server" /> Password Textbox: <asp:textbox id="txtpassword" TextMode="Password" runat="server" /> TextArea: <asp:textbox id="txtcomments" TextMode="MultiLine" Rows="10" Columns="60" runat="server" /> Values entered into the different types of textboxes can be accessed on the server once a form is submitted through the TextBox s Text property: Dim title as String = txttitle.text Dim password as String = txtpassword.text Dim comments as String = txtcomments.text It s very important to remember that the browser only sees the HTML code generated by the Web Server Controls. If you execute an ASP.NET page and view the HTML source sent to the browser, you will never see the <asp:controlname /> syntax, since the controls are always executed on the server and simply output standard HTML. Many other types of Web Server Controls exist, including: Calendar Ad Rotator DataGrid DataList Repeater Panel Button DropDownList RadioButtonList CheckBoxList Many more! Listing 5 shows how to use the ASP.NET Calendar Web Server Control to create a fully functional calendar. Figure 1 shows the result that is generated when the calendar control executes on the server and outputs HTML to the browser. Listing 5. The Calendar control is capable of generating fully functioning calendars with minimal effort on your part. <html> <body bgcolor="#ffffff"> <h2>asp.net Calendar Control</h2> <form runat="server"> <asp:calendar id="calmonths" runat="server" /> </form> </body> </html>

11 Figure 1. The ASP.NET Calendar control makes generating calendars a snap. Although not shown, events, meetings, and other data can be added to the calendar without writing a lot of code. Another Web Server Control named Panel allows portions of a page to be turned on and off by changing the control s Visible property as data is sent from the server to the browser. For example, the following ASP.NET and HTML code can be used to define two panels: <asp:panel id= pnlstart runat= Server Visible= true > <!-- Form fields go here --> </asp:panel> <asp:panel id= pnlend runat= Server Visible= false > <!-- After form is submitted pnlstart will be hidden (using code) and this panel will be shown --> </asp:panel> The pnlstart Panel will be shown when the page first loads. Once the user submits the form, pnlstart s Visible property will be set to false and pnlend s Visible property will be set to true. The results of the form submission can then be displayed without requiring multiple pages or a lot of conditional logic, as is often the case in ASP pages that require this functionality.

12 Although we ve only scratched the surface when it comes to Web Server Controls, you can see the power they can provide to your ASP.NET web applications. With only a minimal amount of code, you can generate robust output that the end user can respond to and interact with. More details about other data-centric server controls such as the DataGrid will follow in a future paper covering the topic of migrating from ADO to ADO.NET. Validation Controls To this point, you ve seen that ASP.NET HTML and Web Server Controls are both designed to output HTML that can be viewed in the browser. While these controls can save you a lot of time, they don t necessarily prevent the end user from entering bad data. Data validation is normally handled by you as the developer. ASP applications require that all validation code (both client side and server side) be written by the developer. As an example, JavaScript can be written to check that all required fields in a form have data in them (see Listing 6). Although the code shown in Listing 6 is quite simple, validation routines can get much more complex depending upon the type of validation being performed. Listing 6. JavaScript code allows user input to be validated on the client side. This code demonstrates the validation of several HTML form elements. <script language="javascript"> function ValidateForm(form) { if (form.elements["txtname"].value == "") { alert("please enter your name."); return; } if (form.elements["txtcompany"].value == "") { alert("please enter your city."); return; } if (form.elements["txttitle"].value == "") { alert("please enter your title."); return; } } </script> document.forms[0].submit(); Although custom JavaScript can still be written to validate form data in ASP.NET, new Validation Controls are now available that perform the bulk of data validation for you without writing any JavaScript code. By using validation controls, you can ensure that

13 required fields contain data, validate dates, ranges, patterns, and more. Several different types of Validation Controls exist, including: CompareValidator Used to compare two fields (ex: password 1 and password 2) or to ensure valid dates or numbers are entered. CustomValidator Used along with custom JavaScript code to validate data. RangeValidator Used to validate numeric or character ranges. RegularExpressionValidator Used to match field values with patterns ( addresses, URLs, etc.). Pattern matching is performed using regular expressions. RequiredFieldValidator Used to ensure that required fields contain data. ValidationSummary Used to group all validation errors into one location, making it easier for the end user to know what is wrong. Rather than writing the JavaScript code shown earlier in Listing 6, Validation Controls can be added into the ASP.NET web form to automatically perform the validation without writing any JavaScript code. Listing 7 demonstrates how this is done. Notice that like Web Server Controls, Validation Controls are prefixed with the asp namespace prefix. Validation Controls allow you to specify which control to validate through the ControlToValidate property. They also allow you to control the error message that is emitted when validation fails through the ErrorMessage property.

14 Listing 7. ASP.NET Validation Controls simplify the process of validating end user input. This code demonstrates how to use the RequiredFieldValidator and ValidationSummary controls. <form method="post" runat="server" id="form1"> <asp:panel id="pnlform" runat="server"> <h2>customer Information</h2> <table height="249" width="640"> <td width="130"><b>name:</b> <td> <asp:textbox id="txtname" runat="server" /> <asp:requiredfieldvalidator id="requiredfieldvalidator1" runat="server" errormessage="please enter your name." controltovalidate="txtname">*</asp:requiredfieldvalidator> <td width="130"><b>company:</b> <td> <asp:textbox id="txtcompany" runat="server" /> <asp:requiredfieldvalidator id="requiredfieldvalidator2" runat="server" errormessage="please enter your company." controltovalidate="txtcompany">*</asp:requiredfieldvalidator> <td width="130"><b>title:</b> <td> <asp:textbox id="txttitle" runat="server"></asp:textbox> <asp:requiredfieldvalidator id="requiredfieldvalidator3" runat="server" errormessage="please enter your job title." controltovalidate="txttitle">*</asp:requiredfieldvalidator> <td colspan="2"> <asp:validationsummary id="validationsummary1" runat="server" displaymode="list" /><br> <asp:button id="btnsubmit" runat="server" text="submit" /> </table> </asp:panel><asp:panel id="pnlmessage" runat="server"> <h2><asp:label id="lbloutput" runat="server" /></h2> </asp:panel> </form> Figure 2 shows the output generated by the ValidationSummary control when the end user doesn t enter data correctly into the form. Notice that an error indicator shows up next to each form field that is incorrect, and all error messages are displayed in a central location on the page.

15 Figure 2. Validation Controls make it easy to alert the user about data errors through using either Dynamic HTML (DHTML) or alert boxes. This figure shows how errors are automatically grouped together using the ValidationSummary control. In addition to validating form data on the client side, Validation Controls also validate data on the server side. This prevents an end user from stripping out JavaScript code to

16 bypass the validation checks. An example of using VB.NET code to ensure that data is valid once it is posted to the server is shown below. btnsubmit click event handler Private Sub btnsubmit_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles btnsubmit.click Page.Validate() If (Page.IsValid) Then Data is valid so perform necessary validation End If End Sub This event handler code will be called after the user clicks the button and posts the form data back to the server. Checking whether or not the form data is valid based upon Validation Controls added into the form is accomplished by calling the Page object s Validate() method and IsValid property. The Page object provides baseline functionality for ASP.NET web pages, and although it won t be discussed here, you ll find several details in the.net SDK documentation. Conclusion ASP.NET offers a lot of new functionality previously not available in ASP, such as HTML Controls, Web Server Controls, and Validation Controls. By learning how these controls work, you can greatly minimize the amount of code you write to perform different activities in a web application and reduce bugs. You can also more easily ensure that data submitted by an end user is valid before updating a database or performing another activity. While this paper has introduced you to the fundamentals of server controls, there is still a lot more that can be learned about them. It is recommended that you first walk through the sample code provided with this paper in order to master the fundamentals. Once you ve done that, you ll be better prepared to move into more advanced aspects of server controls and ASP.NET, which will make it easier to migrate existing ASP applications to the.net platform.