Similar to windows application and services, you can also write Web applications
and services. A web application is distributed application, which allows you to
work and distribute functionality over the Web and provides user interfaces.
Using Web Forms controls, you can write Web GUI applications similar to windows
applications.
Web Forms
ASP.NET's Web Forms provide you with the ability to build Web-based GUI
applications. Web Forms include Web pages (also called an ASP.NET page or web
Forms page) and GUI components (sometimes called server controls) such as text
boxes, buttons, list boxes, data grids, and so on. ASP.NET provides the
flexibility to add these controls to an ASP.NET page at run-time as well as at
design-time as well as at design-time. VS.NET provides design-time features to
develop applications in no time. You add controls to a page by dragging controls
from the toolbox to the page and then setting the controls' properties and
event. Web Forms also provides a method for using the codebehind directive to
separate your controls from the code. In other worlds you can write code in a
separate file from the controls.
Web Service.
Web services are applications that perform a certain task; they can be used by a
single application as well as distributed on the Web. I'll cover Web services in
the next article.
Developing Your First ASP.NET Web Application
Before I discuss the ASP .NET model in more depth, I'll show you how to develop
your first ASP .NET application. In this example, I'll create a simple Web
application using VS .NET. Similar to your first Windows application, I'll add a
button, a text box, and a list box control to a Web page and then add text box
contents to list box on the button-click event.
Creating a Web Application Project
Creating a new ASP.NET Web application using visual studio.NET is simple. First
create a new project using File > New > Project > visual C# project and then
select the ASP.NET Web Application template (see figure 7-1).
Figure 7-1. The First Web Application project
The Location box will show you the default of http://local 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. If
you're using a Web server installed on a network rather than your local machine,
you need to use that server name. If you don't know the server name, you may
want to contact your Web Server administrator. As you can see from figure 7-1,
I'm using the MCB network Web Server. So if you see the name "MCB," don't worry.
Just replace it with your own server's name. You can type either http://servername//application
name or//server name//application name; both formats are correct.
Clicking the OK button 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 7-2.
Figure 7-2. Default web Form1.aspx page
From here you can edit your page's HTML. As you see in left-button corner of
figure 7-2, there are two modes available: Design and HTML. Click the HTML
button to edit the code, as shown in figure 7-3.
Figure 7-3. HTML view of web Form1.aspx
The HTML view shows you the HTML code of a page, its controls, and control
properties. The HTML editor also lets you edit the HTML manually. Now if you
switch the page view back to the design mode and right-click on Browser, View
Code, Synchronize Document, and so on (see figure 7-4).
Figure 7-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 7-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, 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; other wise you won't be able to add text to the page.
After setting the page layout property to flow Layout, the editor works as a
text editor.
Figure 7-5. An ASP .NET document's page properties
Adding Web Controls to a Web Form
Similar to the Windows control toolbox, VS.NET provides a Web Forms control
toolbox. You can open the toolbox by selecting the View > Toolbox main menu
item. The web Forms toolbox looks like figure 7-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 connection, data adapters, datasets, data
views, and DataViewManager components. Figure 7-6 and 7-7 shows the Web Forms
and HTML controls, respectively.
Figure 7-6. Web Forms controls
Figure 7-7. HTML Web Controls
For the application in this article, I'll be using the Web Forms controls. OK
now switch the page back to the Design mode and GridLayout mode (if you changed
its modes) and add a button, a text box, and a List Box to the form by dragging
these controls from the Web Forms toolbox to WebForm1.aspx. The page should now
look like figure 7-8.
Figure 7-8. WebForms1.aspx Design mode after adding Web Forms controls
Setting Control Properties
The next step is to add some text to the page and change some of the control's
properties. To add text to the page, first you need to change the page layout to
FlowLayout in the properties windows, which you can do by right-clicking on the
page and selecting properties. Now add a heading to the page. I added two lines
to the page and set a different font and font size for these lines. The first
line text is "My First ASP.NET Application," and the second line text is "Click
Add button to add contents of text to the list box." I also set some properties
of the button and text box controls (see figure 7-9).
Figure 7-9. Properties window for the Web controls
Specifically, I changed the border, background color, font, and fore ground
color of these controls. As you can see, changing these properties is similar to
changing them for Windows application. The final page with these properties
looks like figure 7-10.
Figure 7-10. Final page of the Web application after changing some control
properties
Using Document Outline
Another nice feature of the visual Studio.NET IDE is that you can synchronize a
Web page's controls with its contents in the Document outline viewer. This is
really 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 on a Page and selecting Synchronize Document Outline (see Figure
7-11).
Figure 7-11. Calling the Document outline viewer
This action launches the Document outline viewer in the left pane (see figure
7-12). As you can see, the tree view displays the page contents, including the
form, button, text box, and paragraph. If you click on 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 and make Document Outline the active
window, the viewer selects that control in the tree view.
Figure 7-12. Document outline viewer
You can also use the Document Viewer's right-click menu to cut, paste, delete,
view the code, and view the properties of these controls (see figure 7-13).
Figure 7-13. Document outline viewer's right-click options
Not only that, but now I'll show you 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 7-14, the tree view displays all the code of
an HTML page in a nested structure as they're organized in the original code.
Figure 7-14. HTML view of Document Outline
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.
Writing Code on the Button-Click Event Handler
The last step of this tutorial is to add an event handler for the button and
write code to add some text box text to the list box. You add a control event
similar to Windows applications. You can either double-click on the button or
use the properties window's lighting icon to add an event. I'll add the button's
click event as Button1_Click (see figure 7-15).
Figure 7-15. Adding an event handler to the button-click event
This action adds the Button1_Click method to the Web Form1.aspx.cs class, which
hosts the code for the page controls and events. Now write a line of code to add
the text box contents to the list box. Specifically, add the bold line in
Listing 7-1 to the Button_Click method.
Listing 7-1. Adding the text box contents to the list box