Creating Web Sites and Web Pages by Using Visual Web Developer and ASP.NET

  • 5/12/2010

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. Position the insertion point below the last line of text on the Web page, and then press ENTER to create a little blank space below the text 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.

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

    Notice the asp:textbox#TextBox1 text that appears above the text box object. The “asp” prefix indicates that this object is an ASP.NET server control. (This text disappears when you run the program.)

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

  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 the SPACEBAR key 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.

  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:

    Now you’ll set a few properties for the seven new controls you have created on the Web page. If it is not already visible, open the Properties window by pressing F4. 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:

















    “Loan Amount”





    “Interest Rate (for example, 0.09)”





    “Monthly Payment”






    Your Web page looks like this:

Writing Event Procedures for Web Page Controls

You write default 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 computer 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 the default 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 LoanPayment 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 currently has a jagged underline in the Code Editor because it relies on the System.Math class, which you’ll specify next.) 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 then enter the following program statement as the first line of the file:

    Imports System.Math

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

    The Code Editor looks like this:

  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. You’ll also learn a little bit about security settings within Internet Explorer, a topic closely related to Web development.

Build and view the Web site

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

    Visual Studio starts the ASP.NET Development Server, which runs ASP.NET applications locally (on your own computer) so that you can test this application. A status balloon appears at the bottom of your screen and lets you know the local Uniform Resource Locator (URL) on your computer that has been established, as shown in the following screen shot. You’ll also see a message about debugging:

    The potentially confusing Debugging Not Enabled dialog box is not a major concern. Visual Web Developer is just indicating 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 that you test the application within Visual Web Developer 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 the screen shot on the following page. If Internet Explorer does not appear, you might need to select it on the Windows taskbar.

    Now, let’s get back to testing our Web page.

  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:

  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.

Curious about installing a Web site like this on an actual Web server? The basic procedure for deploying Web sites is to copy the .aspx files and any necessary support files for the project to a properly configured virtual directory on a Web server running IIS and .NET Framework 4. There are a couple of ways to perform deployment in Visual Web Developer. To get started, click Copy Web Site on the Website menu, or click Publish Web Site on the Build menu. (Visual Web Developer 2010 Express does not include the Publish Web Site command.) For more information about your options, see “ASP.NET Deployment Content Map” in the Visual Studio Help documentation. To find a hosting company that can host ASP.NET Web applications, you can check out