Trying Out ASP.NET | Start-to-Finish Visual Basic 2005: Learn Visual Basic 2005 as You Design and Develop a Complete Application

Let's build a very simple ASP.NET application, and examine it and its parts to discover what it's all about.

News, but Not Bad News

If you are using Visual Basic 2005 Express Edition, you will not be able to fully follow these instructions directly because that product does not include any ASP.NET or web development features. Instead, you need to download Visual Web Developer 2005 Express Edition from the Microsoft MSDN web site (msdn.microsoft.com). Its user interface, though streamlined, offers much of the same functionality as the full Visual Studio product. The tutorial included here was written using Visual Studio 2005 Professional Edition.

Start Visual Studio and select the File New Web Site menu command. The New Web Site form appears. Unlike desktop applications, you must immediately tell Visual Studio where you are going to store the files. We'll choose a location on the local file system, but this form also lets you work on a remote web site via FTP or HTTP. Choose the "ASP.NET Web Site" template, enter a directory path where you want to store the files, and click the OK button.

Figure 22-1. Creating a new ASP.NET application

Figure 22-2 shows Visual Studio ready to start your new web application (the toolbars displayed are per my preferences).

Figure 22-2. A blank form is sometimes a good sign

The Solution Explorer panel already shows three files and a folder included in the project. If you browse to the project's directorythe default location is My Documents\Visual Studio 2005\WebSites\WebSite1you'll see these same files. The web.config file is an XML file that contains application-specific settings; it's related to the app.config file used in desktop applications. Default.aspx is the web page itself, which will contain a mixture of HTML and special ASP.NET tags and directives. The related Default.aspx.vb file contains the Visual Basic "code behind" source code that will eventually be compiled to a DLL. The DLL gets stored in the App_Data directory when the site first loads.

Visual Studio also creates another folder at My Documents\Visual Studio 2005\WebSite1. This folder contains the solution files normally created with any Visual Studio project. They're put out of the way so that they don't get included with the deployed web site.

The blank area you see in Visual Studio is a web page, just waiting for text and control content. If you want proof, click the Source section button in the bottom-left corner of the display, or use the View Markup menu command. The window changes to HTML source code.

[View full width]
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"  Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">    <title>Untitled Page</title> </head> <body>    <form  runat="server">    <div>    </div>    </form> </body> </html>

Well, most of it is HTML. There's a line at the top that starts with <%@ that doesn't look like real HTMLand it's not. This is an ASP.NET page directive. It includes properties that help guide ASP.NET in the processing of the page. Borrowing a standard from its ASP predecessor, ASP.NET uses the <%...%> bracket pair to mark ASP.NET-specific commands and code. That's enough of HTML. Who wanted to see it anyway? Click the Design section button, or use the View Designer menu command to return to the blank page.

Let's create an application that multiplies two user-supplied numbers together and displays the product. For such a simple feature, we could just write some JavaScript and include it as a client-side script, but we're trying to avoid doing stuff like that. Type the following into the web page.

To multiply two values together, enter them in the text fields, and click the Multiply button.

I made the word "Multiply" bold by using the Control-B key sequence, just as I would do in a word processor. Press Enter twice. By default, the web page lays out all elements like a word-processing document, a method called flow layout mode. You can also use absolute positioning of individual elements to place them at a specific location on the page.

There's another way to organize elements on the page: through an HTML table. Let's add one now. Use the Layout Insert Table menu command. When the Insert Table dialog appears, specify a custom table that is three rows by two columns. Then click OK. The table should immediately appear in the body of the web page.

Type "Operand 1:" in the upper-left cell, and type "Operand 2:" in the cell just below it. Your page should look like Figure 22-3.

Figure 22-3. Just getting started on this application

It's not much to look at, but it will get better. So far, we haven't done much more than we could do in Notepad. But now we're ready to add some controls. If you open the Toolbox, you'll see controls that look a lot like those found in a Windows Forms application (see Figure 22-4).

Figure 22-4. Some of the Web Forms Toolbox

The controls are grouped by functionality.

Standard. You will generally use the controls in this section to build the user interface of your web page. Many of these controls represent standard windows controls, with direct parallels in the Windows Forms world. For instance, the ListBox entry implements a standard Windows ListBox control within the web page. To you, the programmer, these controls look like standard .NET control classes, with properties, methods, and events. To the end user, they look like standard web-page controls, delivered using ordinary HTML. Some of these controls are composite controls, single controls built from multiple HTML controls working together, possibly with client-side scripting doing some of the work.
Data. The data controls handle bound database interactions. As you may remember from previous chapters, I am not a big fan of bound controls in standard applications. But when you are communicating static data through a web page, they actually turn out to be a great timesaver. Some of these controls perform the data binding, while others perform the actual data presentation. You'll also find the ReportViewer control, the web version of the report technology we discussed in Chapter 20, "Reporting." It displays reports using the same RDLC files you built for your desktop application.
Validation. Users are a lot of fun, especially when they enter wacky data into your quality software. Verifying the data they enter is hard enough in desktop applications, but it's even more cumbersome when the client system only talks to the application host a few dozen seconds per hour. The validation controls remove some of the burden. They test for the most common types of data entry mistakes, and notify the user of problems, all without extra code on your part. When you do need to perform some custom validation logic, the CustomValidator control lets you add this logic as an event handler or client-side script.
Navigation. This group includes a few controls designed to help the user move from page to page or section to section within your web site.
Login. These controls encapsulate login and password management features so that the user can create a new user account, provide an authenticated password, or perform other security-related actions.
WebParts. WebParts are control containers that the user rearranges using drag-and-drop within the web page. This reorganization of the display allows the user to personalize the display to fulfill the selfish wants that cloud his or her mind. You can record the state of the WebParts for redisplay the next time the user returns to the site or page.
HTML. These are the standard HTML controls, such as <textarea>, that web page developers have been using for years. Visual Studio does provide some IntelliSense and property validation for you, but using these controls is identical to typing the matching HTML tag directly into the page markup.
Crystal Reports. Crystal Reports includes both a desktop and a web-based set of reporting tools. The controls in this section specifically target ASP.NET applications.

Let's add a few controls from the Standard section of the Toolbox to the web page. In the bottom-left cell of the table we added earlier, add a Button control, give it the name ActMultiple, and set its Text property to "Multiply."

Add two TextBox controls to the top two cells in the right-hand table column. Name one of them FirstOperand, and name the other one SecondOperand.

Add a Label control to the bottom-right corner cell of the table. Name it Product, and set its Text property to 0 (that is, zero).

Did you notice how setting each property for these controls was no different from what you did in the main Library application? Simple! By now, your web page should look like the one in Figure 22-5.

Figure 22-5. The completed user interface

Return briefly to the HTML markup for this page by clicking on the Source section button at the bottom of the page. If you're familiar with HTML, you'll notice the <table> tag for the table we added. But you'll also find something unfamiliar within the first table row.

<table>   <tr>     <td style="width: 100px">       Operand 1:</td>     <td style="width: 100px">       <asp:TextBox          runat="server"></asp:TextBox></td>   </tr>

It's that <asp:TextBox> tag. It looks something like other HTML tags, but there are no HTML tags that start with "asp." This is a special ASP.NET tag that represents a Web Forms control class. These controls, and the runat="server" attributes strewn throughout the markup, are what make ASP.NET pages what they are. As ASP.NET processes the .aspx page, it strips out these custom control tags, and calls on the related controls to generate their own browser-neutral HTML.

The user interface is done; let's add the logic. We want the program to multiply the two operands together when we click on the Multiply button. Return to the web page design, and double-click on the Multiply button. It jumps to the code template for a button's Click event, just as you expected it to do.

Partial Class _Default    Inherits System.Web.UI.Page    Protected Sub ActMultiply_Click(ByVal sender As Object, _       ByVal e As System.EventArgs) Handles ActMultiply.Click    End Sub End Class

The design goal of ASP.NET was to have code that was as close to desktop application code as possible, and this is it. Add the following logic to the event handler.

' ----- Multiply the two numbers. Product.Text = Val(FirstOperand.Text) * _    Val(SecondOperand.Text) If (Val(Product.Text) < 0) Then     Product.ForeColor = Drawing.Color.Red Else     Product.ForeColor = Drawing.Color.Black End If

As you were typing, did you notice all of the IntelliSense responding to your every keystroke? I couldn't tell that this was a web-based application, and that's great.

Press the F5 key to start the application. You'll be prompted to turn on debugging, which you want to do. This will modify the application's web.config file to support debugging. Later, you'll want to disable that feature so that your users won't be able to debug the application. If you open the web.config file, you'll see this line:

<compilation debug="true" strict="false" explicit="true"/>

Just change the debug attribute to "false" to turn off debugging.

ASP.NET is a server application; it requires a living, breathing web server before pages can be processed. You may or may not have Internet Information Server installed on your system, but that's OK. Visual Studio 2005 includes its own "ASP.NET Development Server" that exists just so you can test your ASP.NET applications. Figure 22-6 shows it popping up in the system tray.

Figure 22-6. Your built-in web server endeavors to give good service

Figure 22-7 shows the application running in my default web browser, Internet Explorer. (Dear web browser companies, for information on product placement in this page, contact me directly.)

Figure 22-7. Wow, a whole web application in less than ten lines of code