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

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.

   NOTE

   By default, the Web Page Designer positions controls relative to other controls. This is an important difference between the Web Page Designer and the Windows Forms Designer. The Windows Forms Designer allows you to position controls wherever you like on a form. You can change the Web Page Designer so that you can position controls wherever you like on a Web page (called absolute positioning); however, you might get different behavior in different Web browsers.

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:

    

    Click to view larger image

    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:

    Object	Property	Setting
    TextBox1	ID	txtAmount
    TextBox2	ID	txtInterest
    TextBox3	ID	txtPayment
    Label1	ID	lblAmount
    	Text	“Loan Amount”
    Label2	ID	lblInterest
    	Text	“Interest Rate (for example, 0.09)”
    Label3	ID	lblPayment
    	Text	“Monthly Payment”
    Button1	ID	btnCalculate
    	Text	“Calculate”

    Your Web page looks like this:

    

    Click to view larger image

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:

   

   Click to view larger image

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:

   

   Click to view larger image

   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.

   Security Tip

   Before you widely distribute or deploy a real Web site, be sure to disable debugging in Web.config to keep your application safe from unauthorized tampering.

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.

   

   Click to view larger image

   Security Tip

   You might see the Information Bar at the top of Internet Explorer indicating that intranet settings are turned off by default. An intranet warning is again related to Internet Explorer’s design to protect you from rogue programs or unauthorized access. An intranet is a local network (typically a home network or small workgroup network), and because Visual Studio uses intranet-style addressing when you test Web sites built on your own computer, you’re likely to see this warning message. To suppress the warning temporarily, click the Information Bar and then click Don’t Show Me This Again. To remove intranet warnings more permanently, click the Internet Options command on the Tools menu of Internet Explorer, click the Security tab, and then click Local Intranet. Click the Sites button, and clear the check mark from Automatically Detect Intranet Network in the Local Intranet dialog box. However, exercise caution whenever you disable security warnings, as they are meant to protect you.

   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:

   

   Click to view larger image

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 http://www.asp.net.