Web-Enabled Decision Support Systems

1

Web-Enabled Decision Support Systems

Introduction to ASP .NET

Prof. Name [email protected] (123) 456-7890University 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


5

ASP .NET Primer: Sum of N Numbers

How-to: Create an ASP .NET Web Site Project1. 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.

Control Attribute Value

ID lblDisplay Label

Text “Sum of Numbers from 1 to ”

TextBox ID txtEnd

ID btnCal Button

Text “is = “

ID lblSum Label

Text “ ”

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 Handlingthe Click Event

Running Application

9

Overview


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.

Control Attribute Value

TextBox ID txtInput

ID lblDisplay Label

Text “US to Dollar to Euro”

Button ID btnConvert

ID lblAnswer Label

Text “ ”

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 18.10 In-Class Assignment 18.11 Summary

15

Creating a Web Page Layout

How-to: Use the AutoPostBack Property of Web Controls1. 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


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


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


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 RegularExpressionValidator1. 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


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 Email 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 Email TextBox control.

10.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

11. Locate the ValidationExpression property and click the available Build (…) button to open the Regular Expression Editor dialog box.

12.Select the Internet e-mail address option, and click OK.

Setting Properties andBuilding 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


16.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


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 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 aURL on a Web Page

Running Application Showing the Output on the Redirected Page

45

Overview


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 Control1. 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 UserDefined 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 Control1. 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


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


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


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.

Documents

Web-Enabled Decision Support Systems