Before discussing the ASP.NET model in more depth, we'll show you how to develop your first ASP.NET application using VS .NET. In this example, you'll create a simple Web application using VS .NET. You'll add a Button, a TextBox, and a ListBox control to a Web page and then add the TextBox contents to the ListBox on the button click event.
Creating a new ASP.NET Web application using VS .NET is simple. First create a new project using File New Project Visual Basic Projects and then select the ASP.NET Web Application template (see Figure 14-1).
Figure 14-1: The FirstWebApplication project
As you see in Figure 14-1, the Location box shows you the default option of http://localhost and the application name. Here, localhost represents the default IIS server running on your local machine. The default virtual directory for localhost is C:\Inetpub\wwwroot.
Clicking the OK button creates a new directory, FirstWebApplication, in the server's virtual directory. It also creates a new Web application and sends you to the default WebForm1.aspx page, as shown in Figure 14-2.
Figure 14-2: Default WebForm1.aspx page
From here you can edit your page's HTML. As you see in the left-bottom corner of Figure 14-2, there are two modes available: Design and HTML. Click the HTML button to edit the code, as shown in Figure 14-3.
Figure 14-3: HTML view of WebForm1.aspx
The HTML view shows you the HTML code of a page, its controls, and control properties. The HTML editor also let you edit the HTML manually.
Now, if you switch to the design mode and right-click the page, you'll get several options: View HTML Source, Build Style, View in Browser, View Code, Synchronize Document Outline, and so on (see Figure 14-4).
Figure 14-4: An ASP.NET page's right-click options
You can set a page's properties by selecting Properties from the right-click menu. The Properties menu opens the Document Property Pages window. As you can see from Figure 14-5, there are three tabs available in the Properties window: General, Color and Margins, and Keywords. Most of the properties are self-explanatory. On the General tab, one merits explanation. The Page Layout property has two options, GridLayout and FlowLayout. GridLayout is when you want drop controls to the page and reposition them. If you want to add text to the page, you should set the page layout to FlowLayout; otherwise you won't be able to add text to the page. After setting the Page Layout property to FlowLayout, the editor works as a text editor.
Figure 14-5: An ASP.NET document's page properties
Similar to the Windows control Toolbox, VS .NET provides a Web Forms control Toolbox. You can open the Toolbox by selecting View Toolbox. The Web Forms Toolbox looks like Figure 14-6. The Web Forms category of the Toolbox contains form controls, and the HTML category contains HTML controls. The Data category provides the same data components you've seen in the Windows application Toolbox. It has the same ADO.NET data components, including Connection, DataAdapter, DataSet, DataView, and DataViewManager. Figures 14-6 shows the Web Forms controls. Similar to Web forms controls, if you click the HTML tab, you can see HTML controls.
Figure 14-6: Web Forms controls
For the applications in this chapter, we'll be using the Web Forms controls.
OK, now you can switch the page back to the design mode and GridLayout mode (if you changed its modes) and add a Button, a TextBox, and a ListBox to the form by dragging these controls from the Web Forms toolbox to WebForm1.aspx. The page should now look like Figure 14-7.
Figure 14-7: WebForms1.aspx Design mode after adding Web Forms controls
The next step is to add some text to the page and change some of the controls' properties. To add text to the page, first you need to change the page layout to FlowLayout in the Properties window, which you open by right-clicking the page and selecting Properties. Now add a heading to the page. For this example, add two lines to the page and set different fonts and font sizes of these lines. You can also set some of the Button control's properties (see Figure 14-8).
Figure 14-8: Properties window for the Web controls
Specifically, we changed the border, background color, font, and foreground color of these controls. As you can see, changing these properties is similar to changing them for Windows applications. The final page with these properties looks like Figure 14-9.
Figure 14-9: Final page of the Web application after changing some control properties
Another nice feature of the VS .NET IDE is that you can synchronize a Web page's controls with its contents in the Document Outline viewer. This is useful when you're developing a Web application with hundreds of controls; it can be hard to keep track of all the controls, HTML tags, and other page contents. The Document Outline viewer enables you to manage a page's contents in a tree format. The tree format displays all the page elements in the order they're called in the page. You can open the Document Outline viewer by right-clicking a page and selecting Synchronize Document Outline. Clicking this menu item launches the Document Outline viewer in the left pane (see Figure 14-10). As you can see, the tree view displays the page contents, including the form, button, text box, and paragraph. If you click a control in the Document Outline viewer, it selects the corresponding control in the form. And, vice versa, if you select a control in the form, the viewer selects that control in the tree view.
Figure 14-10: Document Outline viewer
You can also use the Document Outline viewer's right-click menu to cut, paste, delete, view the code, and view the properties of these controls. The right-click menu's View Code option displays the code of the page.
Not only that, but now you'll see one more thing. Select the HTML view of your page, and you can move to specific HTML tags using the Document Outline viewer. As you can see from Figure 14-11, the tree view displays all the code of an HTML page in a nested structure as they're organized in the original code.
Figure 14-11: HTML view of the Document Outline viewer
So, the point is that you can find and organize your HTML code and controls from the Document Outline viewer instead of looking for a tag in the file manually.
The last step of this tutorial is to add an event handler for the button and write code to add some TextBox text to the ListBox. You add a control event similar to Windows applications. You can just double-click the button to add a button click event handler.
This action adds the Button1_Click method to the WebForm1.aspx.vb class, which hosts the code for the page controls and events. Now write a line of code to add the TextBox contents to the list box. Specifically, add the bold line in the following section to the Button1_Click method:
Private Sub Button1_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles Button1.Click ListBox1.Items.Add(TextBox1.Text.ToString()) End Sub
You can also see the code using the View Code option of the page's right-click menu.
Now compile and run the project. The output of the program looks like Figure 14-12. Clicking the Add button adds the TextBox contents to the list box.
Figure 14-12: Output of your first Web application
After finishing this application, you can see the power and flexibility of ASP.NET and the VS .NET IDE. You've just developed a nice ASP.NET Web application without any knowledge of ASP.NET and just by writing only one line of code.