Using the Web Page Designer


Using the Web Page Designer

Unlike a Windows form, a Web page can have text added directly to it when it is in the Web Page Designer. In Source mode, the text appears within HTML tags somewhat like the Visual Studio Code Editor. In Design mode, the text appears in top-to-bottom fashion as it does in a word processor such as Microsoft Word, and you'll see no HTML (which is not necessary for simple Web sites). In this section, you'll type text in Design mode, edit it, and then make formatting changes by using buttons on the Formatting toolbar. Manipulating text in this way is usually much faster than adding a Label control to the Web page to contain the text. You'll practice entering the text for your car loan calculator in the following exercise.

Add text in Design mode

  1. Click the Design tab, if it is not currently selected, to view the Web Page Designer in Design mode.

    A blinking I-beam appears at the top of the Web page.

  2. Type Car Loan Calculator, and then press Enter.

    Visual Studio displays the title of your Web page exactly as it will appear when you open the Web site in your browser.

  3. Type the following sentence below the title:

    Enter the required information and click Calculate!

    Now you'll use the Formatting toolbar to format the title with bold formatting and a larger point size.

  4. Right-click the Standard toolbar in Visual Web Developer to display the list of toolbars available in the IDE.

  5. Click the Formatting toolbar.

    The Formatting toolbar now appears in the IDE. Notice that it contains a few features not usually found on a text formatting toolbar.

  6. Select the text “Car Loan Calculator”.

    Before you can format text in Visual Web Developer, you must select it.

  7. Click the Bold button on the Formatting toolbar, and set the font size to 24 point.

    Your screen looks like this:

    graphic

Now you'll examine the HTML code for the text and formatting you entered.

View the HTML for a Web page

  1. Click the Source tab at the bottom of the Designer.

    The Source tab displays the actual HTML code for your Web page. To see more of the code, you might want to temporarily close a few programming tools. The HTML code looks like this:

    graphic

    A Web page is made up of file and document information, formatting codes called HTML tags that are enclosed in angle brackets, and the text and objects to be displayed by your Web page. This Web page is still rather short—it contains a header with information about the language you selected when creating the Web application, the name of any code-behind file, and any inherited forms.

    HTML tags typically appear in pairs so that you can see clearly where a section begins and ends. For example, the <body> tag identifies the beginning of the document; and the </body> tag identifies the end. Notice that the “Car Loan Calculator” text appears within a line of HTML that formats the text as strong (bold) with a font size of 24 points. Below this text, the second line of text you entered is displayed.

    TIP
    Remember that the Source tab is an actual editor, so you can change the text you entered by using standard text editing techniques. If you know something about HTML, you can add additional formatting tags and content as well.

  2. Click the Design tab to display your Web page in Design mode, and open the Toolbox if it is not visible.


Adding Server Controls to a Web Site

Now you'll add TextBox, Label, and Button controls to the car loan calculator. Although these controls are located in the Visual Web Developer Toolbox, they're very similar to the Windows Forms controls of the same name that you've used throughout this book. (I'll cover a few of the important differences as they come up.) The most important thing to remember is that in the Web Page Designer, controls are inserted at the insertion point if you double-click the control name in the Toolbox. After you add the controls to the Web page, you'll set property settings for the controls.

Use TextBox, Label, and Button controls

  1. Display the Standard tab of the Toolbox, if it isn't already visible.

  2. Move the insertion point to the end of the second line of text on the Web page, and then press the Enter key three times to create a little blank space for the controls.

    Because controls are placed at the insertion point, you need to use the text editing keys to position the insertion point appropriately before double-clicking a control in the Toolbox. (This is an important difference between the Web Page Designer and the Windows Forms Designer. The Windows Forms Designer allows you to create controls wherever you like on a form.)

  3. Double-click the TextBox control to create a text box object at the insertion point on the Web page.

    Notice the small green icon that appears in the upper-left corner of the control, which indicates that this control runs on the server.

  4. Click the right side of the text box object to place the insertion point at the outside edge, and then press Enter twice.

  5. Double-click the TextBox control again to add a second text box object to the Web page.

  6. Repeat steps 4 and 5 to create a third text box object below the second text box.

    Now you'll use the Label control to insert labels that identify the purpose of the text boxes.

  7. Click to the right of the first text box object to place the insertion point at the right edge of the text box.

  8. Press Spacebar twice to add two blank spaces, and then double-click the Label control in the Toolbox to add a label object to the Web page.

  9. Repeat steps 7 and 8 to add label objects to the right of the second and third text boxes.

  10. Click to the right of the third label object to place the insertion point to the right of the label, and then press Enter twice.

  11. Double-click the Button control to create a button object at the bottom of the Web page.

    The Button control, like the TextBox and Label controls, is very similar to its Windows Forms counterpart. Your screen looks like this:

    graphic

    Now you'll set a few properties for the seven new controls you have created on the Web page. As you set the properties, you'll notice one important difference between Web pages and Windows forms—the familiar Name property has been changed to ID in Visual Web Developer. Despite their different names, the two properties perform the same function.

  12. Set the following properties for the objects on the form:

    Object

    Property

    Setting

    TextBox1

    ID

    txtAmount

    TextBox2

    ID

    txtInterest

    TextBox3

    ID

    txtPayment

    Label1

    ID

    Text

    lblAmount

    “Loan Amount”

    Label2

    ID

    Text

    lblInterest

    “Interest Rate (for example, 0.09)”

    Label3

    ID

    Text

    lblPayment

    “Monthly Payment”

    Button1

    ID

    Text

    btnCalculate

    “Calculate”

    Your Web page looks like this:

    graphic

Writing Event Procedures for Web Page Controls

You write event procedures (or event handlers) for controls on a Web page by double-clicking the objects on the Web page and typing the necessary program code in the Code Editor. Although the user will see the controls on the Web page in his or her own Web browser, the actual code that's executed will be located on the local test machine or a Web server, depending on how you configured your project for development and how it is eventually deployed. For example, when the user clicks a button on a Web page that is hosted by a Web server, the browser sends the button click event back to the server, which processes the event and sends a new Web page back to the browser. Although the process seems similar to that of Windows forms, there's actually a lot going on behind the scenes when a control is used on an ASP.NET Web page!

In the following exercise, you'll practice creating an event procedure for the btnCalculate object on the Web page.

Create the btnCalculate_Click event procedure

  1. Double-click the Calculate button on the Web page.

    The code-behind file (Default.aspx.vb) opens in the Code Editor, and the btnCalculate_Click event procedure appears.

  2. Type the following program code:

    Dim LoanPayment As Double 
    'Use Pmt function to determine payment for 36 month loan 
    LoanPayment = Pmt(CDbl(txtInterest.Text) / 12, 36, CDbl(txtAmount.Text)) 
    txtPayment.Text = Format(Abs(LoanPayment), "$0.00")

    This event procedure uses the Pmt function, a financial function that's part of the Visual Basic language, to determine what the monthly payment for a car loan would be by using the specified interest rate (txtInterest.Text), a three-year (36-month) loan period, and the specified principal amount (txtAmount.Text). The result is stored in the Loan-Payment double-precision variable, and then it is formatted with appropriate monetary formatting and displayed by using the txtPayment text box object on the Web page. The two Text properties are converted from string format to double-precision format by using the CDbl function. The Abs (absolute value) function is used to make the loan payment a positive number. (Abs is underlined in the Code Editor because it relies on the System.Math class, which you'll import below.) Why make the loan payment appear as a positive number? The Pmt function returns a negative number by default (reflecting money that's owed), but I think negative formatting looks strange when it isn't part of a balance sheet, so I'm converting it to positive.

    Notice that the program statements in the code-behind file are just regular Visual Basic code—the same stuff you've been using throughout this book. Basically, the process feels similar to creating a Windows application.

  3. Scroll to the top of the Code Editor, and enter the following program statement as the first line of the file:

    Imports System.Math

    As you learned in Chapter 5, “Visual Basic Variables and Formulas, and the .NET Framework,” the Abs function isn't included in Visual Basic by default, but it's part of the System.Math class in the .NET Framework and can be included in your project via the Imports statement. Web applications can make use of the .NET Framework class libraries just as Windows applications can.

  4. Click the Save All button on the Standard toolbar.

That's it! You've entered the program code necessary to run the car loan calculator and make your Web page interactive. Now you'll build and run the project and see how it works!

Build and view the Web site

  1. Click the Start Debugging button on the Standard toolbar.

    Visual Studio displays the following message about debugging:

    graphic

    This potentially confusing dialog box is not a major concern. It just indicates that the Web.config file in your project does not currently allow debugging (a standard security feature). Although you can bypass this dialog box each time you test the application within Visual Studio by clicking the Run Without Debugging button, I recommend that you modify the Web.config file now.

  2. Click OK to modify the Web.config file.

    Visual Studio modifies the file, builds your Web site, and displays the opening Web page in Internet Explorer. The car loan calculator looks like this:

    graphic

    TIP
    If Internet Explorer displays the message “Warning: Cannot debug script code,” you can adjust a security setting within Internet Explorer so that this message does not appear in the future. (We won't be debugging right now.) You can modify the Internet Explorer Disable Script Debugging setting by clicking the Internet Options command on the Tools menu, clicking the Advanced tab, and clicking to clear the Disable Script Debugging option. If you don't see the warning message, however, you have nothing to worry about.

  3. Type 18000 in the Loan Amount text box, and then type 0.09 in the Interest Rate text box.

    You'll compute the monthly loan payment for an $18,000 loan at 9 percent interest for 36 months.

  4. Click the Calculate button.

    Visual Basic calculates the payment amount and displays $572.40 in the Monthly Payment text box. Your screen looks like this:

    graphic

  5. Close Internet Explorer.

    You're finished testing your Web site for now. When Internet Explorer closes, your program is effectively ended. As you can see, building and viewing a Web site is basically the same as building and running a Windows application, except that the Web site is executed in the browser. You can even set break points and debug your application just as you can in a Windows application.

TIP
To deploy a Web site created in Visual Web Developer, you can create a setup program or a ClickOnce deployment service, just as you prepare deployment options for Windows applications created in Visual Studio. (The basic procedure for Web sites is to copy the .aspx file and any necessary support files for the project to a properly configured virtual directory on a Web server.) For more information, see “Deploying Your Application” in Chapter 2, “Writing Your First Program.”

Validating Input Fields on a Web Page

Although this Web page is useful, it runs into problems if the user forgets to enter a principal amount or an interest rate or specifies data in the wrong format. To make this Web site more robust, consider adding one or more validator controls that will require user input in the proper format. The validator controls are located on the Validation tab of the Visual Web Developer Toolbox and include controls that require data entry in a field (RequiredFieldValidator), require entry in the proper range (RangeValidator), and so on. For information on the validator controls, search the Visual Studio online Help.