1. Creating Web Applications
CHAPTER NINE
Creating Web Applications

2. Objectives Create a web application Build a web form using ASP.NET 5
Set web form properties
Use the full screen view
Add objects to a web form
Add a DropDownList object
Chapter 9: Creating Web Applications

3. Objectives Add a Calendar object Add a custom table for layout
Validate data on web forms
Use the <br> tag in Visual Basic code
Use string manipulation methods in the String class
Chapter 9: Creating Web Applications

4. Introduction
Visual Studio allows you to create applications that can run on the web
Visual Basic 2015 includes ASP.NET 5 technology, with which you can create a user interface and a form for a web application
A web form is a page displayed in a web browser, such as Internet Explorer and Firefox, and requests data from the user
Chapter 9: Creating Web Applications

5. Introduction
Chapter 9: Creating Web Applications

6. Creating a Web Application
A webpage that allows users to enter information on a web form is considered a dynamic webpage because the user enters data and the webpage reacts to the data
A static webpage contains no interactivity
A web server is a computer that stores web documents and makes them available to people on the Internet
The ASP.NET 5 technology used with Visual Basic 2015 creates an active server page (ASP)
Chapter 9: Creating Web Applications

7. Creating a Dynamic Website Using Visual Basic
Start Visual Studio. Tap or click the File tab and then tap or click New Web Site
In the center pane, tap or click ASP.NET Web Forms Site. Use the Location text box to name the chapter project application cabin
Tap or click the OK button in the New Web Site dialog box
Chapter 9: Creating Web Applications

8. Creating a Dynamic Website Using Visual Basic
Chapter 9: Creating Web Applications

9. Customizing the Master Page
In the Solution Explorer window, double-tap or double-click Site.master to open the page
Tap or click View on the menu bar, point to Toolbars, and then tap or click Formatting. Select the “Application name” placeholder text at the top of the Site.master page. Type Big Bear Cabins to replace the original title. On the Formatting toolbar, tap or click the Font Size box arrow, and then select xx-large
Chapter 9: Creating Web Applications

10. Customizing the Master Page
Chapter 9: Creating Web Applications

11. Customizing Navigation Links on the Master Template
On the Site.master page, tap or click the Source tab at the bottom left. Select the HTML code <li><a runat="server" href="~/Contact">Contact</a></li>
Press the DELETE key to delete the Contact list item line of code. Select the black text “About” in the About list item link and type Reservations to rename the displayed text in the link
Chapter 9: Creating Web Applications

12. Customizing Navigation Links on the Master Template
Select the following HTML code that displays Register and Log in links on the Site.Master page:
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
Press the DELETE key to remove the Register and Log in links from the Site.master page
Chapter 9: Creating Web Applications

13. Customizing Navigation Links on the Master Template
Chapter 9: Creating Web Applications

14. Adding an Image Object
Close and save Site.master. Open the Toolbox. If necessary, in the Solution Explorer, double-tap or double-click Default.aspx. Notice that the Default.aspx page has inherited the title from the Site.master. Select the “ASP.NET” heading in the MainContent (Custom) area, and then press the DELETE key
Double-tap or double-click the Image object in the Standard category of the Toolbox to display it on the webpage in the FeaturedContent area. Resize the object so that it is 175 pixels (Width property) by 150 pixels (Height property)
In the Properties window, name the Image object by entering picCabins in its (ID) property. Specify which image to display by entering the web address bearcabins.jpg as the ImageUrl property. Press the enter key. You need Internet connectivity to view the image
Chapter 9: Creating Web Applications

15. Adding an Image Object
Chapter 9: Creating Web Applications

16. Entering Text Directly on the Webpage
Tap or click to the right of the Image object. Add a space using the SPACEBAR and type Enjoy a Mountain Getaway directly on the Default.aspx page
To change the vertical alignment, select the text, tap or click the style property in the Properties window, and then tap or click the ellipsis button to the right of the style property to display the Modify Style dialog box. In the Category pane of the Modify Style dialog box, tap or click Block. In the vertical-align drop box, select top
Tap or click the OK button, and then tap or click a blank spot to deselect the text
Chapter 9: Creating Web Applications

17. Entering Text Directly on the Webpage
Select the text in the placeholder paragraph below the image and press the delete key. Change the font size to large using the Formatting toolbar. Enter the text Nestled in the trees surrounded by the Beartooth Mountains, our cabin retreat provides modern comfort with genuine mountain elegance, offering a rustic ambiance with wood burning fireplaces and cozy furnished kitchens.
Delete the button and the rest of the text on the page. Do not delete the footnote © - My ASP.NET Application
Chapter 9: Creating Web Applications

18. Entering Text Directly on the Webpage
Chapter 9: Creating Web Applications

19. Adding a Table for Alignment on a Web Form
In the Solution Explorer window, double-tap or double-click About.aspx to create a web form for the Reservations page. Delete the text in the MainContent area. Tap or click in the MainContent area and type Guest Reservation Form. Press the ENTER key. Tap or click in the paragraph below the typed text and delete all the text below Guest Reservation Form. Tap or click Table on the menu bar, and then tap or click Insert Table. In the Size section of the Insert Table dialog box, change the number of Rows to 7 and the number of Columns to 3
Chapter 9: Creating Web Applications

20. Adding a Table for Alignment on a Web Form
Tap or click the OK button. To resize the columns, point to a column divider until a two-sided arrow appears. Drag the divider to change the column width. As you drag, a ScreenTip shows the width of the column in pixels. Resize the first column until it is 150 px wide. Resize the second column to 250 px wide
Chapter 9: Creating Web Applications

21. Adding a Table for Alignment on a Web Form
Chapter 9: Creating Web Applications

22. Adding TextBox and Button Objects
On the About.aspx web form, tap or click in the first cell of the table and type Name: to enter text directly into the table. Open the Toolbox, drag a Text-Box object from the Toolbox to the form, and then position the TextBox object in the second cell in the first row of the table. Resize the TextBox object to a width of 250 px (Width property). Name this TextBox object txtName using the (ID) property
In the first cell in the second row of the table, type Address: to enter text directly into the table. Drag a TextBox object from the Toolbox to the form and then position the TextBox object in the second cell in the second row in the table. Resize the TextBox object to a width of 250 px (Width property). Name this TextBox object txt using the (ID) property
Chapter 9: Creating Web Applications

23. Adding TextBox and Button Objects
Chapter 9: Creating Web Applications

24. Adding CheckBox Objects
On the third row, type Cabin Selection: in the first cell. Drag the CheckBox object from the Toolbox to the web form, and then position it in the third row, second cell
Name the CheckBox object by tapping or clicking to the right of its (ID) property in the Properties window and then entering chkGrizzly. Change the Text property of the CheckBox object to Grizzly (3 bedrooms) $99
At the Big Bear Cabins, the Grizzly is the most popular cabin. This cabin, therefore, should be checked when the form opens to save time for the user. To select the Grizzly check box, change the Checked property for the object from False to True
In the second column, fourth and fifth rows of the table, add two more CheckBox objects named chkPolar and chkKodiak, respectively. Change the Text property of the first CheckBox object to Polar (2 bedrooms) $89 and the second CheckBox object to Kodiak (1 bedroom) $79
Chapter 9: Creating Web Applications

25. Adding CheckBox Objects
Chapter 9: Creating Web Applications

26. Coding for Check Box Objects
Chapter 9: Creating Web Applications

27. Adding a DropDownList Object
In the sixth row of the table, type Night(s): in the first column. Drag the DropDownList object to the second column of the sixth row. Name the DropDownList object by tapping or clicking to the right of the (ID) property in the object’s Properties window and then typing ddlNights
To fill the DropDownList object with list items, tap or click the Smart Tag on the upper-right corner of the object
Tap or click Edit Items on the DropDownList Tasks menu
Chapter 9: Creating Web Applications

28. Adding a DropDownList Object
Tap or click the Add button. In the ListItem Properties pane on the right side of the dialog box, tap or click to the right of the Text property and enter 1
Tap or click the Add button and enter 2 as its Text property. Repeat this step, entering the numbers 3 through 7 to specify the number of nights users can select in the DropDownList object. Tap or click the OK button in the ListItem Collection Editor dialog box. Resize the DropDownList object to the width of a single digit, if necessary. To view the completed DropDownList object, run the application by tapping or clicking the Start Debugging button on the Standard toolbar. If necessary, tap or click the Reservations navigation button to open the Reservations page in the browser. Tap or click the list arrow on the DropDownList object on the webpage
Chapter 9: Creating Web Applications

29. Adding a DropDownList Object
Chapter 9: Creating Web Applications

30. Adding a Calendar Object
Close the browser window. In the last row of the table, type Check-in Date:. Drag the Calendar object from the Toolbox to the web form, and then position it on the form. In the (ID) property, name the Calendar object cldArrival
Select the Calendar object, if necessary, and then tap or click the Smart Tag on the upper-right corner of the Calendar object
Tap or click Auto Format on the Calendar Tasks menu. When the Auto Format dialog box opens, tap or click the Colorful 2 scheme in the Select a scheme list
Chapter 9: Creating Web Applications

31. Adding a Calendar Object
Chapter 9: Creating Web Applications

32. Specifying a Web Form Title
Tap or click the OK button to close the AutoFormat dialog box. In the Properties window of the Reservations web form, tap or click the drop-down box at the top and select DOCUMENT
In the Properties window, scroll until the Title property is visible, and then tap or click in the right column of the Title property. Enter the title Big Bear Cabins with a blank space following the text entry. When the webpage is displayed, the Title property appears before the MainContent title
Chapter 9: Creating Web Applications

33. Specifying a Web Form Title
Chapter 9: Creating Web Applications

34. Code for a Calendar Object
Chapter 9: Creating Web Applications

35. Adding a Required Field Validator
In the Toolbox, hide the Standard tools by tapping or clicking the filled triangle icon next to Standard. Expand the Validation tools by tapping or clicking the open triangle icon next to Validation
Drag the RequiredFieldValidator to the right of the Name TextBox object in the third column of the table
Name the RequiredFieldValidator by typing rfvName in its (ID) property
Chapter 9: Creating Web Applications

36. Adding a Required Field Validator
To specify that the rfvName RequiredFieldValidator object validates the txtName TextBox object, tap or click to the right of the ControlToValidate property in the Properties window, tap or click the list arrow, and then select txtName
In the Properties window for the RequiredFieldValidator, change the ErrorMessage property to *Enter Name
Chapter 9: Creating Web Applications

37. Adding a Required Field Validator
Chapter 9: Creating Web Applications

38. Applying the Range Validator
ControlToValidate property contains the name of the object you are validating
MinimumValue property contains the smallest value in the range
MaximumValue property contains the largest value in the range
Type property matches the data type of the value, such as Integer or String
ErrorMessage property explains to the user what value is requested
Chapter 9: Creating Web Applications

39. Applying the Compare Validator
ControlToValidate property contains the name of the object that you are validating
ControlToCompare property contains the name of the object that you are comparing to the ControlToValidate property
ErrorMessage property contains a message stating that the value does not match
Chapter 9: Creating Web Applications

40. Applying the Regular Expression Validator
ControlToValidate property contains the name of the object that you are validating
ErrorMessage property contains a message stating that the value does not match the valid format
ValidationExpression property allows the user to select the format for the object
Chapter 9: Creating Web Applications

41. Applying the Regular Expression Validator
Drag the RegularExpressionValidator object from the Toolbox to the right of the Address TextBox object in the table
Name the RegularExpressionValidator by typing rev in its (ID) property
Tap or click to the right of the ControlToValidate property, tap or click the list arrow, and then tap or click txt
Change the ErrorMessage property to * Error Format
Chapter 9: Creating Web Applications

42. Applying the Regular Expression Validator
To set txt to validate that it contains a standard address, tap or click to the right of the ValidationExpression property, and then tap or click its ellipsis button. In the Regular Expression Editor dialog box, select Internet address in the Standard expressions list
Tap or click the OK button in the Regular Expression Editor dialog box. Run the application by tapping or clicking the Start Debugging button on the Standard toolbar. Enter a name and an address without symbol, such as lochlan. .com, and then press the ENTER key
Chapter 9: Creating Web Applications

43. Applying the Regular Expression Validator
Chapter 9: Creating Web Applications

44. Applying Multiple Validations
Chapter 9: Creating Web Applications

45. Displaying the Validation Summary Control
The ValidationSummary control lets you display validation error messages in a single location, creating a clean layout for the web form
You can use the ValidationSummary object to display all of the error messages in a different place, listing them in a blank area at the top or bottom of the form
To use a ValidationSummary object, drag the object to the location on the webpage where you want the summary to appear
Chapter 9: Creating Web Applications

46. Using the <br> Tag in Visual Basic Code
Chapter 9: Creating Web Applications

47. Finding String Length
Chapter 9: Creating Web Applications

48. Using the Trim Procedure
Chapter 9: Creating Web Applications

49. Converting Uppercase and Lowercase Text
Chapter 9: Creating Web Applications

50. Program Design
Chapter 9: Creating Web Applications

51. Program Design
Chapter 9: Creating Web Applications

52. Event Planning Document
Chapter 9: Creating Web Applications

53. Summary Create a web application Build a web form using ASP.NET 5
Set web form properties
Use the full screen view
Add objects to a web form
Add a DropDownList object
Chapter 9: Creating Web Applications

54. Summary Add a Calendar object Add a custom table for layout
Validate data on web forms
Use the <br> tag in Visual Basic code
Use string manipulation methods in the String class
Chapter 9: Creating Web Applications

55. Creating Web Applications
CHAPTER NINE COMPLETE
Creating Web Applications