Web-Enabled Decision Support Systems

1
Web-Enabled Decision Support Systems

• Introduction to ASP .NET

Prof. Name
name_at_email.com Position
[phone] 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

1. Visual Studio opens a default file named
   Default.aspx in the Design Window. Use the
   Properties Window to rename the file as
   Sum.aspx.
2. 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

1. Switch to design mode by clicking on the Design
   button.
2. 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

1. Double-click on the Button control to open its
   Click event code in the Code Window, and enter
   the code as shown below.
2. 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

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

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

1. In the Solution Explorer, right-click on
   Currency.aspx and select the Set as Start Page
   option.
2. 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

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

1. 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.
2. 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 Controls ListItem Collection
Editor Dialog Box
18
Using a ListBox Web Control (cont.)

1. 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 items Selected property to
   True. Click OK.

Adding Items to a ListBox Control and Setting
Properties
19
Using a ListBox Web Control (cont.)

1. 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.
2. 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

1. Click on the smart tag of the ListBox control to
   view its Task list. Select the Enable
   AutoPostBack option.
2. 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 lt and gt 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 Add New Item 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 lblMsg Label
  control.

Layout for the Validation.aspx Web Page
33
Adding Code

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

• Run and test the application. Enter the values as
  shown below.
• 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

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

1. 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.
2. Run and test the application for the Name TextBox
   control.

Attaching the RequiredFieldValidator Control and
Setting Its Properties
37
The RegularExpressionValidator Control

1. From the Toolbox, drag and drop the
   RegularExpressionValidator control onto the form
   next to the Email TextBox control.
2. 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

1. Locate the ValidationExpression property and
   click the available Build () button to open the
   Regular Expression Editor dialog box.
2. Select the Internet e-mail address option, and
   click OK.

Setting Properties and Building a Validation
Expression
39
The RegularExpressionValidator Control (cont.)

1. From the Toolbox, drag and drop another
   RegularExpressionValidator control onto the form
   next to the Phone TextBox control.
2. 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.
3. 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_at_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?NamebookreaderPhone1729172917
• 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.)

1. Add a new Web page, ValidationNew.aspx, to the
   Web site.
2. Enter the code below in the Page_Load event
   handler of the new Web page.
3. 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.)

1. 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.
2. Double-click anywhere on the page to open its
   Page_Load event code. Enter the code as shown
   below.
3. 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

1. Add a new Web page named UserControl.aspx to
   the Web site.
2. 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

1. 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
• Open the TopBanner.ascx.vb code file by
  double-clicking the file from the Solution
  Explorer Window.
• 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

1. Add the property declaration code shown below.
2. 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.)

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

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