1 Web-Enabled Decision Support Systems Introduction to ASP.NET Prof. Name Position (123) University Name

2 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

3 Introduction  Active Server Pages (ASP).NET allows us to combine HTML and VB.NET to have extended functionalities in Web applications –Build front-end (interface) HTML files –Utilize back-end (code behind) VB.NET files to perform:  Database retrievals  Data manipulation  Data presentation –Thus, we can utilize the power of VB.NET programming in a Web environment by means of ASP.NET  In a Windows application, all files are stored and viewed on the same computer or within a local network  In a Web application, however, application files are stored on a Web server and are viewed on client machines by several users at a time

4 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

5 ASP.NET Primer: Sum of N Numbers  How-to: Create an ASP.NET Web Site Project 1.Select the File | New Web Site option from the Main menu to open the New Web Site dialog box. Choose the ASP.NET Web Site option under Visual Studio installed templates. 2.In the Location drop-down list, enter the name and the path of the Web site. Creating a New Web Site

6 Renaming Files and Viewing HTML Source 3.Visual Studio opens a default file named “Default.aspx” in the Design Window. Use the Properties Window to rename the file as “Sum.aspx”. 4.We can view the HTML source of the page by clicking on the Source button at the bottom of the page. Auto-Generated HTML Source

7 Designing the Form 5.Switch to design mode by clicking on the Design button. 6.Drag and drop two Label controls, a Button, and a TextBox control from the Standard tab of the Toolbox onto the form. Adjust their properties as listed. Adding Web Controls in the Design Window Control Property Values

8 Adding Code and Testing 7.Double-click on the Button control to open its Click event code in the Code Window, and enter the code as shown below. 8.Run and test the application by pressing Ctrl + F5. Enter the number 50 in the TextBox, and click on the command button to see the results. Code for Handling the Click Event Running Application

9 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

10 Hands-On Tutorial: Currency Conversion  How-to: Add a New Web Form to an Existing Web Site 1.In the WebSite1 project created in the previous tutorial, choose the Website | Add New Item option from the Main menu. 2.In the Add New Item dialog box, select the Web Form item. Name the new page as “Currency.aspx”. Click the Add button. Adding a New Web Form to an Existing Web Site

11 Designing the Form 3.Drag and drop two Label controls, a Button, and a TextBox control from the Standard tab of the Toolbox onto the Currency.aspx form. Adjust the properties of the controls as listed below. Design Window with Web Controls Web Control Properties

12 Adding Code 4.Double-click on the Button control to open its Click event code in the Code Window, and enter the code as shown below. Code for Handling the Click Event

13 Setting Start Page and Testing 5.In the Solution Explorer, right-click on “Currency.aspx” and select the Set as Start Page option. 6.Run and test the application by pressing Ctrl + F5. Enter the number 11 in the TextBox, and click on the command button to see the results. Setting the Start Page of the Application Running Application

14 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

15 Creating a Web Page Layout  How-to: Use the AutoPostBack Property of Web Controls 1.In WebSite1, open the Add New Item dialog box by choosing Web Site | Add New Item from the Main menu. 2.Select the Web Form item. Name the new page as “CurrencyNew.aspx”. Click the Add button. 3.Open the Insert Table dialog box by choosing Layout | Insert Table from the Main menu. Inserting a HTML Table Using the Layout Menu

16 Setting up the Table 14.Use the Insert Table dialog box to set the table properties as shown below and click OK. Set the column heading text of the table as shown. HTML Table in the Design Window Creating a Custom Template for the Table

17 Using a ListBox Web Control 5.Drag and drop a TextBox control from the Standard tab of the Toolbox onto the third row, first column cell of the table. Set its ID property to txtInput. Similarly, drag and drop a ListBox Web control in the third row, second column cell. Set its ID property to lbxType. 6.Click on the ListBox control and select the smart tag on the top right-hand corner of the control. In the Tasks list that appears, select the Edit Items option to open the ListItem Collection Editor dialog box. Opening the ListBox Control’s ListItem Collection Editor Dialog Box

18 Using a ListBox Web Control (cont.) 7.Click on the Add button four times. For each item, set its Text as shown and enter appropriate conversion ratio values for the Value property. Set the first list item’s Selected property to True. Click OK. Adding Items to a ListBox Control and Setting Properties

19 Using a ListBox Web Control (cont.) 8.Drag and drop a Label control from the Standard tab of the Toolbox onto the third row, third column cell of the table. Set its ID property to lblAnswer and Text property to an empty string. 9.Add the code below for the SelectedIndexChanged event of the ListBox. Layout for the Web Form Event Code

20 Run the Application 10.Right-click on CurrencyNew.aspx in the Solution Explorer Window and set it as the start page of the application. Run and test the application.  When we enter a value in the TextBox control and select an item from the ListBox control, we expect to see the results.  Though we have entered the code correctly, the application does not run as expected.

21 Post Backs  Web pages are post back for server-side processing when events occur on the client-side –In the previous example, this occurred when the user clicked the button to convert the currency value –The event code associated with the button was executed on the Web server –The converted value was then sent back to the user for display  However, a post back does not automatically occur upon a change in selection in the ListBox control –Hence our extension is not working

22 Post Backs (cont.)  There can be several events occurring on a Web page: –Mouse movements, mouse clicks, and so forth –Page performance deteriorates if post backs occur for each and every event  Causes multiple client-server round trips –We want to send data to the server exactly when we would like to process it  AutoPostBack is a property of Web controls which indicates whether auto post back will be trigged for the control –For all controls except the Button control, the AutoPostBack default is False –We must set the AutoPostBack property of the ListBox control to True  Trigger a post back on the SelectedIndexChanged event

23 Enabling the AutoPostBack Property 11.Click on the smart tag of the ListBox control to view its Task list. Select the Enable AutoPostBack option. 12.Run and test the application. Enabling the AutoPostBack Property Testing the Web Page

24 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

25 Adding Code  How-to: Use the IsPostBack Method with a Page_Load Event Handler 1.Open the CurrencyNew.aspx page and double-click anywhere to open the Code Window with the Page_Load event handler. 2.Enter the code as shown below. The Page_Load Event

26 Testing the Application –Run and test the application. –Note that any post back reloads the original conversion value (10)  The answer field retains the correct value for the previous conversion value 3.Modify the Page_Load event handler code as shown. Test the application. Running Web Page Using the IsPostBack Property in the Page_Load Event Handler Code

27 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

28 Working with the Page Directive  Page directive is a special ASP.NET tag that appears at the beginning of the HTML code of a Web page –Governs many aspects of a Web page:  Appearance  Behavior –Supports eight different properties Page Directive for the CurrencyNew.aspx Web Page

29 Page Directive Properties  Language: –Language for the inline code within the HTML code for the ASP.NET page –For code between “ ” tags –Values: C#, VB, or JS  CodeFile: –The name of the code behind file  AutoEventWireup: –Boolean regarding the requirement of events to specify event handlers  Inherits: –Qualified class module from which this ASP.NET page should inherited  ErrorPage: –URL for redirection if an unhandled error occurs on the Web page

30 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

31 Validation Controls  Validation is a procedure that is used to check for the correctness of the data entered by users  Validation controls are used to validate users' input –Can be attached to any Web control –There are various types of validation controls available under the Validation tab in the Toolbox  RequiredFieldValidator: Forces the user to enter a value for a Web control  RegularExpressionValidator: Checks the format of the value entered by the user  In this section, we will create a Web page that will accept personal details from the user such as name, , and phone

32 Adding Validation Controls to a Web Form  How-to: Use RequiredFieldValidator and RegularExpressionValidator 1.Add a new a Web page to the WebSite1 Web site using the Add New Item dialog box. Name the page as “Validation.aspx”. 2.Add a HTML table as shown below. Add Label controls and TextBox controls to the page. Add a “Validate” Button control and lblMsg Label control. Layout for the Validation.aspx Web Page

33 Adding Code 3.Enter the code shown below for the Click event handler of the Validate Button control. Click Event Handler Code for the Validate Button Control

34 Testing the Application 4.Run and test the application. Enter the values as shown below. 5.Now test the application by leaving the Name TextBox controls empty and by entering invalid values for the and Phone TextBox controls.  We should not get any error message. Testing the Running Application

35 The RequiredFieldValidator Control 6.From the Toolbox, drag and drop the RequiredFieldValidator control onto the Validation.aspx page beside the Name TextBox control. Adding a RequiredFieldValidator Control

36 Adjusting Properties and Testing 7.Using the Properties Window, change the Display property of the control to Dynamic and the ErrorMessage property to “*”. Select txtName as the control to validate using the Control property. 8.Run and test the application for the Name TextBox control. Attaching the RequiredFieldValidator Control and Setting Its Properties

37 The RegularExpressionValidator Control 9.From the Toolbox, drag and drop the RegularExpressionValidator control onto the form next to the TextBox control. 10.Using the Properties Window, set the Display property to Dynamic and the ErrorMessage property to “Invalid.” Select txt as the control to validate using the Control property. Validation Controls for Name, and Phone Fields

38 Adjusting Properties 11.Locate the ValidationExpression property and click the available Build (…) button to open the Regular Expression Editor dialog box. 12.Select the Internet address option, and click OK. Setting Properties and Building a Validation Expression

39 The RegularExpressionValidator Control (cont.) 13.From the Toolbox, drag and drop another RegularExpressionValidator control onto the form next to the Phone TextBox control. 14.Using the Properties Windows, set the Display property to Dynamic and the ErrorMessage property to “Invalid.” Select txtPhone as the control to validate using the Control property. 15.Locate the ValidationExpression property and click the available Build (…) button to open Regular Expression Editor dialog box. Select the U.S. phone number option, and click OK.

40 Testing the Application 16.Run and test the application. Do not enter any value for the name field, enter in for the field, and “ ” in the phone field.  Note that even before clicking on the Validate button, we see that that the page displays a “*” mark beside the name field and Invalid message besides the and phone fields. Testing the Validation Controls

41 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

42 Passing Parameters through URL  Passing values from one Web page to another is a very common task in Web development –Importance has faded with ASP.NET's inherent support for post back forms and Session variables  Passing parameter values through URL remains as one of the simplest and most efficient way of passing data –The query string is the string that is added at the end of a URL, separated by a question mark (?) –Example:  Page2.aspx?Name=bookreader&Phone=  Name and Phone are the parameters with values Bookreader and  Parameters and their values are accessible on Page2.aspx  We use an ampersand (&) operator to concatenate multiple parameters

43 Passing Parameter through URL (cont.)  How-to: Pass Parameter Values through URL 1.Open the Validation.aspx page and add a Button control. Set the ID property of the control to “btnRedirect,” and the Text property to “Redirect Display”. 2.Double-click the Redirect Display button and enter the code shown below. Validation.aspx Page with the Redirect Display Button Control Creating the Query String and Redirecting

44 Passing Parameter through URL (cont.) 3.Add a new Web page, “ValidationNew.aspx”, to the Web site. 4.Enter the code below in the Page_Load event handler of the new Web page. 5.Run and test the application. Displaying the Parameters from a URL on a Web Page Running Application Showing the Output on the Redirected Page

45 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

46 User-Defined Controls  Till now we have used the Web controls that already existed in the Toolbox –Although these controls provide a great deal of functionality, they may not satisfy all application requirements  User-defined Web controls enable us to easily define and design controls as required by applications –Can be added to a Web page and work just like any other control  In this section, we create a user-defined control that features a top banner –Consists of an image and a label showing the current date and time

47 Creating a User Defined Control  How-to: Create a User Defined Control 1.Choose Web Site | Add New Item option from the Main menu to open the Add New Item dialog box. Select the Web User Control icon and specify its name as “TopBanner.ascx”. Click Add. Adding a User Defined Control

48 Creating a User Defined Control (cont.) 2.Add an Image control from the Toolbox onto TopBanner.ascx. Set the ImageURL to the banner1.jpg file from the Chapter 18 folder available on the book website. Add a Label control and set its ID property to lblWhen. 3.Double-click anywhere on the page to open its Page_Load event code. Enter the code as shown below. 4.Save the control by choosing the File | Save option from the Main menu. Layout for the TopBanner Control Displaying Current Date and Time

49 Adding User Control to a Web Form 5.Add a new Web page named “UserControl.aspx” to the Web site. 6.Insert an HTML table as shown below. Drag and drop TopBanner.ascx from the Solution Explorer Window onto the Web page. Enter the text “Top Banner Design 1” in row 1 and “Top Banner Design 2” in row 3. Layout for the UserControl.aspx Web Page

50 Setting Start Page and Testing 7.Set the UserControl.aspx page as the start page of the application. Run and test the application. Testing the Web Form with Two Instances of the User Control

51 Adding a Property to a User-Defined Control  How-to: Add a Property to a User-Defined Control 1.Open the “TopBanner.ascx.vb” code file by double-clicking the file from the Solution Explorer Window. 2.As shown below, add an Imports System.Drawing statement (line 1). Also, declare a global variable thisColor of type Color (line 6), and assign it a default value of Black. Declaring a Global Variable of Type Color

52 Adding Code 3.Add the property declaration code shown below. 4.Modify the Page_Load event as shown below. Adding the Get and Set Methods for the Color Property Setting the ForeColor Property of the Label Control

53 Adding Code (cont.) 5.Open the “UserControl.aspx” form, and double-click anywhere on the form to open its Page_Load event handler code. Set the value of the Color property of the TopBanner1 control to Drawing.Color.Blue. Similarly, set the Color property for the TopBanner2 control to Drawing.Color.Red. Using the Color Property of the User-Defined Controls

54 Testing the Application 6.Run and test the application.  We should see the Web page with the date and time Label controls in the user- defined control being displayed in two different colors. Running Application

55 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

56 In-Class Assignment  Develop a greeting card Web page similar to the application we developed in Chapter 14. –Use Web controls to take in user input for various parameters of the card:  Background color  Font type, size and color  Border style  Greeting text –Make sure to set the AutoPostBack property wherever required –Also make sure to validate the user inputs  Hint: Use RequiredFieldValidator controls

57 Overview  18.1 Introduction  18.2 ASP.NET Primer: Sum of N Numbers  18.3 Hands-On Tutorial: Currency Conversion Example  18.4 Extending the Conversion Example – AutoPostBack Property  18.5 Using the Page_Load Event and IsPostback Property  18.6 Working with the Page Directive  18.7 Validation Controls  18.8 Passing Parameters through URL  18.9 User-Defined Controls  In-Class Assignment  Summary

58 Summary  ASP.NET combines HTML front-end with VB.NET back-end to utilize the power of VB.NET programming in a Web environment.  The process of sending data from a Web page to the Web server is known as post back. –Pages are post back for server-side processing when an event occurs on the client-side  AutoPostBack is a property of Web controls which indicates whether auto post back will be trigged for the control. –The AutoPostBack property of a Button control is set to True by default.  The IsPostBack method tells us if the page is loaded for the first time or is it a post back. –Returns True if the page is getting loaded after a post back. –Returns False if the page is getting loaded for the very first time.

59 Summary (cont.)  Page directive is a special ASP.NET tag that appears at the beginning of the HTML code of a Web page. –Governs many aspects of appearance and behavior of a Web page.  Validation is a procedure that is used to check for the correctness of the data entered by users. –Validation controls are used to validate users' input. –RequireFieldValidator control:  Makes sure that the user enters a value for a control. –RegularExpressionValidator control:  Makes sure that the user enters a value in valid format for a control.

60 Summary (cont.)  Passing values from one Web page to another is a very common task in Web development. –Passing parameter values through URL remains as one of the simplest and most efficient way of passing data from one Web page to another.  User-defined Web controls enable us to easily define and design controls as required by applications. –A user-defined Web control can be added to a Web page and work just like any other existing Web control.