1 / 60

Web-Enabled Decision Support Systems

Web-Enabled Decision Support Systems. Introduction to ASP .NET. Prof. Name name@email.com Position (123) 456-7890 University Name. Overview. 18.1 Introduction 18.2 ASP .NET Primer: Sum of N Numbers

tehya
Télécharger la présentation

Web-Enabled Decision Support Systems

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web-Enabled Decision Support Systems Introduction to ASP .NET Prof. Name name@email.com Position (123) 456-7890 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 • 18.10 In-Class Assignment • 18.11 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 • 18.10 In-Class Assignment • 18.11 Summary

  5. ASP .NET Primer: Sum of N Numbers • How-to: Create an ASP .NET Web Site Project • 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. • 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 • Visual Studio opens a default file named “Default.aspx” in the Design Window. Use the Properties Window to rename the file as “Sum.aspx”. • 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 • Switch to design mode by clicking on the Design button. • 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 • Double-click on the Button control to open its Click event code in the Code Window, and enter the code as shown below. • 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 • 18.10 In-Class Assignment • 18.11 Summary

  10. Hands-On Tutorial: Currency Conversion • How-to: Add a New Web Form to an Existing Web Site • In the WebSite1 project created in the previous tutorial, choose the Website | Add New Item option from the Main menu. • 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 • 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 • 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 • In the Solution Explorer, right-click on “Currency.aspx” and select the Set as Start Page option. • 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 • 18.10 In-Class Assignment • 18.11 Summary

  15. Creating a Web Page Layout • How-to: Use the AutoPostBack Property of Web Controls • In WebSite1, open the Add New Item dialog box by choosing Web Site | Add New Item from the Main menu. • Select the Web Form item. Name the new page as “CurrencyNew.aspx”. Click the Add button. • 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 • 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 • 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. • 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.) • 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.) • 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. • Add the code below for the SelectedIndexChanged event of the ListBox. Layout for the Web Form Event Code

  20. Run the Application • 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 • Click on the smart tag of the ListBox control to view its Task list. Select the Enable AutoPostBack option. • 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 • 18.10 In-Class Assignment • 18.11 Summary

  25. Adding Code • How-to: Use the IsPostBack Method with a Page_Load Event Handler • Open the CurrencyNew.aspx page and double-click anywhere to open the Code Window with the Page_Load event handler. • 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 • 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 • 18.10 In-Class Assignment • 18.11 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 “<%” and “%>” 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 • 18.10 In-Class Assignment • 18.11 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, email, and phone

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

  33. Adding Code • Enter the code shown below for the Click event handler of the ValidateButton control. Click Event Handler Code for the ValidateButton Control

  34. Testing the Application • Run and test the application. Enter the values as shown below. • Now test the application by leaving the NameTextBox controls empty and by entering invalid values for the Email and PhoneTextBox controls. • We should not get any error message. Testing the Running Application

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

  36. Adjusting Properties and Testing • 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. • Run and test the application for the NameTextBox control. Attaching the RequiredFieldValidator Control and Setting Its Properties

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

  38. Adjusting Properties • Locate the ValidationExpression property and click the available Build (…) button to open the RegularExpressionEditor dialog box. • Select the Internet e-mail address option, and click OK. Setting Properties and Building a Validation Expression

  39. The RegularExpressionValidator Control (cont.) • From the Toolbox, drag and drop another RegularExpressionValidator control onto the form next to the PhoneTextBox control. • 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. • 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 • Run and test the application. Do not enter any value for the name field, enter “john.doe@mailcom” in for the email field, and “111 1111 111” 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 email 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 • 18.10 In-Class Assignment • 18.11 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=1729172917 • Name and Phone are the parameters with values Bookreader and 1729172917 • 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 • 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”. • 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.) • Add a new Web page, “ValidationNew.aspx”, to the Web site. • Enter the code below in the Page_Load event handler of the new Web page. • 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 • 18.10 In-Class Assignment • 18.11 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 • 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.) • 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. • Double-click anywhere on the page to open its Page_Load event code. Enter the code as shown below. • 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 • Add a new Web page named “UserControl.aspx” to the Web site. • 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 • 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

More Related