Chapter 07
- 1. CHAPTER SEVENCreating Web Applications
- 2. Chapter 7: Creating Web Applications2ObjectivesCreate a Web applicationBuild a Web form using ASP.NET 4.0Set Web form propertiesUse the full screen viewAdd objects to a Web formAdd a DropDownList object
- 3. Chapter 7: Creating Web Applications3ObjectivesAdd a Calendar objectAdd a custom table for layoutValidate data on Web formsUse the <br> tag in Visual Basic codeUse string manipulation methods in the String class
- 4. Chapter 7: Creating Web Applications4IntroductionVisual Studio allows you to create applications that can execute on the World Wide WebVisual Basic 2010 includes ASP.NET 4.0 technology, with which you can create a user interface and a form for a Web applicationA Web form is a page displayed in a Web browser such as Internet Explorer and Firefox that requests data from the user
- 5. IntroductionChapter 7: Creating Web Applications5
- 6. Chapter 7: Creating Web Applications6Creating a Web ApplicationA Web page that allows users to enter information on a Web form is considered a dynamic Web page because the user enters data and the Web page reacts to the dataA Web server is a computer that stores Web documents and makes them available to people on the InternetThe ASP.NET 4.0 technology used with Visual Basic 2010 creates an active server page (ASP)
- 7. Chapter 7: Creating Web Applications7Creating a Dynamic Web Site Using Visual BasicStart Visual Studio. Click the New Web Site button on the Standard toolbarIn the center pane, click ASP.NET Web Site, if necessary. Name the chapter project application Mystic in the Location text boxClick the OK button in the New Web Site dialog box
- 8. Chapter 7: Creating Web Applications8Creating a Dynamic Web Site Using Visual Basic
- 9. Customizing the Master PageIn the Solution Explorer window, double-click Site.master to open the pageClick View on the menu bar, point to Toolbars, and then click Formatting. Select the text at the top of the Site.master page MY ASP.NET APPLICATION. Type MYSTIC BED AND BREAKFAST to replace the original title. On the Formatting toolbar, click the Font Name tool, select Lucida Calligraphy, click the Font Size tool, and then select xx-largeChapter 7: Creating Web Applications9
- 10. Customizing the Master PageChapter 7: Creating Web Applications10
- 11. Customizing Navigation Buttons on the Master TemplateOn the Site.master page, point to the two navigation buttons. Click theSmartTag and then click Edit Menu ItemsClick the About item in the list. In the Properties pane, change the Text property from About to ReservationsClick the OK button, and then click a blank spot on the form to close the Menu Tasks menuChapter 7: Creating Web Applications11
- 12. Customizing Navigation Buttons on the Master TemplateChapter 7: Creating Web Applications12
- 13. Adding an Image ObjectIn the Solution Explorer, double-click Default.aspx.Notice that the Default.aspx page has inherited the title and Reservations navigation page from the Site.master. Select the three lines starting with WELCOME TO ASP.NET! in the MainContentarea and press the DELETE keyDrag the Image object from the Standard category in the Toolbox to the Web page under the navigation buttons. Resize the object so that it is 175 pixels by 150 pixels (px)In the Properties window, name the Image object by entering picMysticin its (ID) property. Specify which image to display by entering the Web address http://scsite.com/vb2010/ch7/images/bb.jpg as the ImageUrlproperty. You need Internet connectivity to view the imageChapter 7: Creating Web Applications13
- 14. Adding an Image ObjectChapter 7: Creating Web Applications14
- 15. Entering Text Directly on the Web FormClick to the right of the Image object and type in all caps WELCOME TO THE OLDEST LIGHTHOUSE BED AND BREAKFAST directly on the Default.aspx page. Select the typed text and change the font size on the Formatting toolbar to x-large. Click a blank spot on the form to deselect the textTo change the vertical alignment, select the text, click the Style property, and then click the ellipsis button to the right of the Style property in the Properties window. In the Category pane of the Modify Style dialog box, click Block. In the vertical-align drop box, select topChapter 7: Creating Web Applications15
- 16. Entering Text Directly on the Web FormClick the OK button, and then click a blank spot to deselect the textClick after the word BREAKFAST and press ENTER three times. Change the font size to medium in the Formatting toolbar. Enter the text High atop a cliff jutting into the clear, deep waters of Mystic Harbor, the Mystic Lighthouse beckons families in search of a secluded retreat from modern life. This unique bed and breakfast inn is one of the few surviving resident lighthouses in the country and is listed on the National Register of Historic Places.Chapter 7: Creating Web Applications16
- 17. Entering Text Directly on the Web FormChapter 7: Creating Web Applications17
- 18. Adding a Table for Alignment on a Web FormIn the Solution Explorer window, double-click About.aspx to create a Web form for the Reservations page. Delete the text in the MainContent area. Click below the navigation buttons in the MainContent area and type GUEST RESERVATION FORM:. Press ENTER. Click Table on the menu bar, and then 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 3Chapter 7: Creating Web Applications18
- 19. Adding a Table for Alignment on a Web FormClick 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 wideChapter 7: Creating Web Applications19
- 20. Adding a Table for Alignment on a Web FormChapter 7: Creating Web Applications20
- 21. Adding TextBox and Button ObjectsOn the About.aspx Web form, click in the first cell of the table and type Name: to enter text directly into the table. Open the Toolbox, drag a TextBoxobject from the Toolbox to the form, and then position the TextBox object in the second cell in the table. Resize the TextBox object to a width of 250 px.Name this TextBox object txtName using the (ID) propertyIn the first cell in the second row of the table, type E-mail 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.Name this TextBoxobject txtEmailusing the (ID) propertyChapter 7: Creating Web Applications21
- 22. Adding TextBox and Button ObjectsChapter 7: Creating Web Applications22
- 23. Chapter 7: Creating Web Applications23Adding CheckBox ObjectsOn the third row, type Suite Selection: in the first cell.Dragthe CheckBoxobject from the Toolbox to the Web form, and then position it on the third row, second cellName the CheckBox object by clicking to the right of its (ID) property in the Properties window and then entering chkSerenity. Change the Text property of the CheckBox object to Serenity Suite $220In the Mystic Bed and Breakfast application, the Serenity suite is the most popular suite. This suite, therefore, should be checked when the form opens to save time for the user. To select the Serenity suite check box, change the Checked property for the object from False to TrueIn the second column, fourth and fifth row of the table, add two more CheckBoxobjects named chkEvergreen and chkVineland, respectively. Change the Text property of the first CheckBox object to Evergreen Suite $170 and the second CheckBoxobject to Vineland Suite $155
- 24. Chapter 7: Creating Web Applications24Adding CheckBox Objects
- 25. Coding for Check Box ObjectsChapter 7: Creating Web Applications25
- 26. Chapter 7: Creating Web Applications26Adding a DropDownList ObjectIn 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.Namethe DropDownListobject by clicking to the right of the (ID) property in the object’s Properties window and then typing ddlNightsTo fill the DropDownList object with list items, click the Smart Tag on the upper-right corner of the objectClick Edit Items on the DropDownList Tasks menu
- 27. Chapter 7: Creating Web Applications27Adding a DropDownList ObjectClick the Add button. In the ListItem properties pane on the right side of the dialog box, click to the right of the Text property and enter 1Click 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. Click the OK button in the ListItemCollection 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 clicking the Start Debugging button on the Standard toolbar. If necessary, click the Reservations navigation button to open the Reservations page in the browser. Click the list arrow on the DropDownList object in the Web page
- 28. Chapter 7: Creating Web Applications28Adding a DropDownList Object
- 29. Chapter 7: Creating Web Applications29Adding a Calendar ObjectClose 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 cldArrivalSelect the Calendar object, if necessary, and then click the Smart Tag on the upper-right corner of the Calendar objectClick Auto Format on the Calendar Tasks menu. When the Auto Format dialog box opens, click the Colorful 2 scheme in the Select a scheme list
- 30. Chapter 7: Creating Web Applications30Adding a Calendar Object
- 31. Specifying a Web Form TitleClick the OK button to close the AutoFormat dialog box. In the Properties window of the Reservations Web form, click the drop-down box at the top and select DOCUMENTIn the Properties window, scroll until the Title property is visible, and then click in the right column of the Title property. Enter the title Mystic Bed and Breakfast Reservation FormChapter 7: Creating Web Applications31
- 32. Specifying a Web Form TitleChapter 7: Creating Web Applications32
- 33. Chapter 7: Creating Web Applications33Code for a Calendar Object
- 34. Chapter 7: Creating Web Applications34Adding a Required Field ValidatorIn the Toolbox, hide the Standard tools by clicking the filled triangle icon next to Standard. Expand the Validation tools by clicking the open triangle icon next to ValidationDrag the RequiredFieldValidator to the right of the Name TextBox objectName the RequiredFieldValidator by typing rfvFirstName in its (ID)
- 35. Chapter 7: Creating Web Applications35Adding a Required Field ValidatorTo specify that the rfvNameRequiredFieldValidator object validates the txtNameTextBox object, click to the right of the ControlToValidate property in the Properties window, click the list arrow, and then select txtNameIn the Properties window for the RequiredFieldValidator, change the ErrorMessageproperty to *Enter Name
- 36. Chapter 7: Creating Web Applications36Adding a Required Field Validator
- 37. Chapter 7: Creating Web Applications37Applying the Range ValidatorControlToValidate property contains the name of the object you are validatingMinimumValueproperty contains the smallest value in the rangeMaximumValueproperty contains the largest value in the rangeType property matches the data type of the value, such as Integer or StringErrorMessageproperty explains to the user what value is requested
- 38. Applying the Compare ValidatorControlToValidateproperty contains the name of the object that you are validatingControlToCompareproperty contains the name of the object that you are comparing to the ControlToValidate propertyErrorMessageproperty contains a message stating that the value does not matchChapter 7: Creating Web Applications38
- 39. Chapter 7: Creating Web Applications39Applying the Regular Expression ValidatorControlToValidate property contains the name of the object that you are validatingErrorMessage property contains a message stating that the value does not match the valid formatValidationExpression property allows the user to select the format for the object
- 40. Chapter 7: Creating Web Applications40Applying the Regular Expression ValidatorDrag the RegularExpressionValidator object from the Toolbox to the right of the E-mail Address TextBox object in the tableName the RegularExpressionValidator by typing revEmail in its (ID) propertyClick to the right of the ControlToValidate property, click the list arrow, and then click txtEmailChange the ErrorMessage property to * Error E-mail Format
- 41. Chapter 7: Creating Web Applications41Applying the Regular Expression ValidatorTo set txtEmail to validate that it contains a standard e-mail address, click to the right of the ValidationExpression property, and then click its ellipsis button. In the Regular Expression Editor dialog box, select Internet e-mail address in the Standard expressions listClick the OK button in the Regular Expression Editor dialog box. Run the application by clicking the Start Debugging button on the Standard toolbar. Enter an e-mail address without an @ symbol, such as Brit.world.net, and then press the ENTER key
- 42. Chapter 7: Creating Web Applications42Applying the Regular Expression Validator
- 43. Chapter 7: Creating Web Applications43Applying Multiple Validations
- 44. Chapter 7: Creating Web Applications44Displaying the Validation Summary ControlThe ValidationSummary control lets you display validation error messages in a single location, creating a clean layout for the Web formYou 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 formTo use a ValidationSummary object, drag the object to the location on the Web page where you want the summary to appear
- 45. Chapter 7: Creating Web Applications45Using the <br> Tag in Visual Basic Code
- 46. Chapter 7: Creating Web Applications46Finding String Length
- 47. Chapter 7: Creating Web Applications47Using the Trim Procedure
- 48. Chapter 7: Creating Web Applications48Converting Uppercase and Lowercase Text
- 49. Chapter 7: Creating Web Applications49Program Design
- 50. Chapter 7: Creating Web Applications50Program Design
- 51. Chapter 7: Creating Web Applications51Event Planning Document
- 52. Chapter 7: Creating Web Applications52SummaryCreate a Web applicationBuild a Web form using ASP.NET 4.0Set Web form propertiesUse the full screen viewAdd objects to a Web formAdd a DropDownList object
- 53. Chapter 7: Creating Web Applications53SummaryAdd a Calendar objectAdd a custom table for layoutValidate data on Web formsUse the <br> tag in Visual Basic codeUse string manipulation methods in the String class
- 54. CHAPTER SEVEN COMPLETECreating Web Applications