A Visual Basic Developer's Introduction to Web Development

Article
02/03/2012

Scott Swigart
Swigart Consulting LLC.

July 2006

Applies to:
   ASP.NET 2.0
   Microsoft Visual Basic 6.0
   Microsoft Visual Basic 2005
   Microsoft Visual Basic .NET
   Microsoft Visual Studio 2005
   Microsoft Visual Web Developer
   SQL Server 2005 Express

Summary: The purpose of this article is to quickly get Visual Basic 6.0 and Visual Basic .NET developers up-to-speed on building Web applications with ASP.NET 2.0. As such, this article endeavors to speak the language of desktop developers, and it focuses on what's different about developing for the Web. (13 printed pages)

Overview
Getting Started
Page Layout
Event Driven
Managing State
Data-Centric Sites
Other Important ASP.NET 2.0 Features
Conclusion
Additional Resources

Overview

If you're at all like me, you primarily develop desktop applications. However, it's quite common that desktop developers need to do Web development from time to time. The purpose of this article is to quickly get Visual Basic .NET and Visual Basic 6.0 developers up-to-speed on building Web applications with ASP.NET 2.0. As such, this article endeavors to speak the language of desktop developers, and it focuses on what's different about developing for the Web. This article also assumes that your primary objective is to build Web pages over data, and that you'll be most interested in allowing the user to display information from a database. Does this describe you? Then read on.

Getting Started

To follow the steps in this article, you will need Visual Studio 2005. You will also need to download the Visual Studio 2005 Web Application Projects add-in. For walkthroughs that display information from the database, you will also need SQL Server 2005 Express Edition and the Northwind sample database.

Visual Studio 2005 provides the capabilities to build full-featured ASP.NET websites. However, Visual Studio 2005 originally shipped with a projectless system for building websites. For someone coming from a desktop development background, this made building websites work and feel much different then building desktop applications. The Visual Studio 2005 Web Application Projects add-in increases the similarity between building Web and desktop applications. The walkthroughs in this article assume that you have this add-in installed.

Walkthrough: Creating a Simple Web Application

If you have not already done so, download and install the Visual Studio 2005 Web Application Projects.
Start Visual Studio 2005.
On the File menu, click New, and then click Project.
For the Project Type, select Visual Basic.
For the Template, select ASP.NET Web Application.

Visual Studio will create the new Web application that contains a single Web page. The designer will show you the markup code for the page. You can edit the page in this Source view, or use a WYSIWYG editor (Figure 1).

Figure 1. Visual Studio with ASP.NET template
Click the Design button at the bottom of the code editor to switch to WYSIWYG view.

At first glance, building Web applications can be deceptively similar to building desktop applications.
Click on the design surface, and type Enter your name:.
From the Toolbox, drag a Textbox control onto the design surface, directly after the text that you just typed.
Click to place the cursor after the Textbox control, and then press ENTER to create a new line.
From the Toolbox, drag a Button control onto the design surface.
Click to place the cursor after the Button control, and then press ENTER to create another line break.
From the Toolbox, drag a Label control onto the design surface, below the button.

The completed page should appear as shown in Figure 2.

Figure 2. Test page

Page Layout

One thing should become quickly apparent when you start building Web pages: you can't just put a control anywhere you want. Although desktop applications are designed to allow you to position controls at any pixel location you desire, Web pages, are designed to "flow." This means that the layout of your page will be dynamically formatted. The browser will make lines longer if more space is available, and it will wrap lines if less space is available.

This also means that the trivial laying out of labels and text boxes requires that your Web controls be placed in tables that control alignment.

Walkthrough: Laying out Controls

Select the content of the page, and then press DELETE to erase everything.
On the Layout menu, click Insert Table.
For Rows, enter 2.
For Columns, enter 2.
Click OK.

You can type or drag controls directly into the cells of the table. Notice that the table ensures that the left edges of your text boxes all nicely align. Tables are the primary mechanism for controlling the layout of Web pages.
By typing in the table cells and dragging controls from the Toolbox, create the user interface shown in Figure 3.

Figure 3. Test page with password

Event Driven

ASP.NET provides a programming model that feels a lot like building Windows Forms applications. For simple scenarios, the "Web" nature of the application is abstracted away, and you're able to leverage your desktop developer experience to get started quickly.

Walkthrough: Hooking Up Event Handlers

Double-click the Button on the design surface to generate the code for its Click event.

Enter the following code.

Label1.Text = "Welcome " & TextBox1.Text

Press F5 to "run" the Web application.
Type your name in the User Name text box.
Click the Button. You should see something similar to Figure 4.

Figure 4. Test Page 4 of 12 with user name

This seems logical enough, but it's important to understand what's happening here. Code runs on the Web server to generate the HTML page, which is sent to, and displayed in, the browser. If this were a Windows application, the Form containing the controls would still be running, and it could contain variables, and so on. However, with Web applications, by the time you see the user interface in the browser, the page class on the server has been unloaded.

Managing State

Imagine building a desktop application where the application had to shut down and restart between every user interaction. In other words, the application would generate a Form that the user could see, and then the executable would terminate. When the user clicked a button on the form, the application would quietly restart, process the input, generate a new Form bitmap, and then shut down. The results would be a very forgetful application. Any data that you didn't code to be saved on shutdown, and then loaded on startup, would be lost. Form-level variables would be effectively useless, because their values would be lost between shutdown and startup. As odd as this sounds, it's essentially how Web applications work. The following walkthrough will illustrate this behavior.

In Visual Studio 2005, in the Solution Explorer, right-click Default.aspx, and then click View Code.
On a line after Inherits System.Web.UI.Page, enter the following.
```
Public previousUser As String
```
This is a page-level variable that will store the previous user name that you entered.
Modify the code for the Button1_Click event handler as follows.
```
Label1.Text = "You were " & previousUser & ", and now you're " &
TextBox1.Text
previousUser = TextBox1.Text
```
If you run the application, enter the name Fred, click the button, enter the name Jim, and click the button again, you would expect to see the message "You were Fred, and now you're Jim." This is the way this code would work in a desktop application. However, you will see that this is not the behavior that you get.
Press F5 to run the application.
Enter Fred and click the button.
Enter Jim and click the button.

Notice that the previousUser value is never showing up. It's always saying "You were , and now you're Jim." What's going on?

The problem is that the page class is being destroyed and recreated on every button click. This means that previousUser gets created and initialized to an empty string, it's then assigned the value from the textbox, the page processing completes, the page class is destroyed, and the previousUser variable is just thrown away. When you click the button again, this process repeats.

The page is not the place to store any information that the site needs to remember across user interactions. Instead, ASP.NET provides just such storage through Session variables.

Modify the code for the Button1_Click event handler as follows.

Label1.Text = "You were " & Session("previousUser") & ", and now
you're " & TextBox1.Text
Session("previousUser") = TextBox1.Text

Press F5 to run the application.
Enter Fred and click the button.
Enter Jim and click the button.

Now you're getting the correct behavior. By using Session variables, the site is able to remember information across user interactions, as shown in Figure 5.

Figure 5. Test page with Jim as user name

Managing state is one of the biggest differences between Web and desktop development. If you need your website to remember anything across user interactions (and you typically do), you cannot use simple variables to store that information. Instead, you need to use something like Session variables to explicitly instruct the Web server to remember a value.

Data-Centric Sites

Most websites function primarily as a user interface on top of database information. ASP.NET 2.0 goes a long ways toward simplifying these kinds of sites. The next walkthrough will give you a feel for what this is like. Note that building full data-centric sites is a big topic, and it can't be covered completely in this article. That said, the Additional Resources section will point you to numerous places where you can go to get more information.

To perform the following walkthrough, you will need to download and install SQL Express and the sample Northwind database. Links to these can be found in the Additional Resources section.

In the Solution Explorer, on the Project menu, click Add New Item.
For the Template, select WebForm, and then click Add.
Click the Design tab at the bottom of the code editor window.
From the Toolbox, from the Data section, drag a GridView control onto the designer.
From the GridView Tasks smart tag, click the Choose Data Source drop-down, and then click <New data source>
In the Choose a Data Source Type dialog box, select Database and click OK.
Click New Connection.
For the Server Name, enter localhost if you have SQL Server installed. Enter .\sqlexpress if you have SQL Express installed.
For the Select or enter a database field, enter Northwind.
Click Test Connection to ensure that you can connect to the database.
Click OK.
Click Next.

Information like a connection string is not simply hard-coded into the application. Instead, this type of information is placed in the Web app.config file, where it can be easily changed without requiring source code changes. Here, you are prompted for the name to give the connection string.
In the Save the Connection String dialog box, click Next.

Next, you are prompted for the source of the data that you want to display. You can enter ad hoc SQL, use a stored procedure, or select a specific table or view.
In the Name box, select Orders.
For Columns, select *.
Click Next.
Click Test Query to ensure that communication with the database functions as expected.
Click Finish.

Notice that the GridView shows the database columns at design time. You also have full control over how the grid is rendered. The standard Web way of applying a consistent look and feel to a website is through a technology known as Cascading Style Sheets. However, a simpler mechanism is to auto-format the grid, much as you would pick an auto-format in Microsoft Office.
Right-click the GridView control, and then click Auto Format.
Choose one of the formats—for example, Professional.

The GridView also supports a number of advanced features, such as sorting and paging, with no coding required.
Right-click the GridView control, and then click Properties.
In the Properties Panel, set the AllowPaging property to True.
Set the AllowSorting property to True.
Press F5 to run the Web application.

The application should appear as shown in Figure 6.

Figure 6. Web application page (Click on the image for a larger picture)

Clicking any column heading sorts on that column. Clicking the page numbers at the bottom navigates through the pages of results.

Other Important ASP.NET 2.0 Features

There are a number of other features in ASP.NET that greatly increase productivity and that target common development scenarios.

Master Pages

With desktop applications, it's easy to simply put appropriate menus and toolbars on individual forms. However, with websites, the navigation is typically more global. A single navigation bar is often displayed on all pages of the site. ASP.NET provides the capability to do this through Master pages. You simply add a Master page as an item to your solution. You then use tables on the Master page to control where the header, navigation bar, footer, and main page content should go. Then, you have a given content page reference the Master page. The page content will appear inside of the Master page, in the content area. Figure 7 shows a simple example. See the Additional Resources section for more information on using Master pages.

Figure 7. Web application page with header and footer (Click on the image for a larger picture)

Authentication and Authorization

It's very common to have a site, or portion of a site, that requires a user name and password in order to gain access. ASP.NET 2.0 provides extensive support for this scenario. First, ASP.NET gives you a site administration tool that includes a Wizard to walk you through configuring sections of your site for membership (see Figure 8).

Figure 8. ASP.NET Web site administration tool (Click on the image for a larger picture)

For more information on website security, see the Additional Resources section.

Conclusion

Web development is different from desktop development. However, the ASP.NET programming model provides a number of striking similarities. When building websites, you simply wire up event handlers for controls, just as you would do with desktop applications. Managing state is different, because pages are created and destroyed on each request, but ASP.NET does provide the Session variable to let you persist information in memory on the server. ASP.NET also includes simple-to-use yet powerful controls for common scenarios such as building data-centric websites. Finally, ASP.NET includes full wizards that walk you through site configuration for complex tasks, such as enabling authentication and authorization.

Additional Resources

Prerequisites for This Article

SQL Server 2005 Express Edition is a small version of SQL Server that you can freely install on your development machine, and that you can even freely deploy with your applications.
Northwind and pubs sample databases for SQL Server 2000 are also available for download. This article uses the Northwind database for the walkthroughs, so you should download and install it into SQL Express.
Visual Studio 2005 Web Application Projects provide a project system much like Windows Applications. The walkthrough steps in this article also depend on this being installed.

Getting Started Without Visual Studio

Visual Web Developer is a free, small development environment that lets you get started with ASP.NET 2.0 development. If you don't have access to Visual Studio 2005, I strongly encourage you to check out Visual Web Developer.

Getting Help

Absolute Beginners Guide to ASP.NET 2.0 starts you off at square one and covers the essential foundational concepts.
ASP.NET 2.0 QuickStart Tutorial provides a wealth of examples for all of the common ASP.NET programming tasks. When trying something new with ASP.NET 2.0, this is the first resource that you should turn to for help, guidance, and examples.
ASP.NET 2.0 "How Do I-" video series shows more information about specific Web development tasks.

Training Courses

Web E-Learning courses are available from Microsoft at reasonable rates. If you're looking for self-directed in-depth training, you should look here.

Into the Future

Mix 06 presentations take a look into the future of Web and desktop development. If you want to see what the technology is evolving towards, look here.

About the author

Scott Swigart spends his time consulting, authoring, and speaking about converging and emerging technologies. With development experience going back over 15 years, and by staying in constant contact with future software development technologies, Scott is able to help organizations get the most out of today's technology while preparing to leverage the technology of tomorrow. Scott is also the author of several .NET books, a certified Microsoft trainer (MCT) and developer (MCSD), and a Microsoft MVP. Feel free to contact Scott at scott@swigartconsulting.com, or check out his latest musings at blog.swigartconsulting.com.

Continue to the next article.