How It Works
Visual Studio comes with a lot of features to help developers while writing code. One
of these features is that you can just double-click the GUI element for which you want
to add the code, and you will be taken to the code associated with the GUI element in
Code view. For example, when you double-click the Submit button in Design view, you
are taken to the Code view, and the
btnSubmit_Click event template automatically gets
generated.
To achieve the functionality for this control, you add the following code:
MessageBox.Show("Hello" + ' ' + txtFname.Text + ' ' + txtLname.Text + ' ' +
"Welcome to the Windows Application");
MessageBox.Show
is a C# method that pops up a message box. To display a “Welcome”
message with the first name and last name specified by the user in the message box, you
apply a string concatenation approach while writing the code.
In the code segment, you hard code the message “Hello Welcome to the Windows
Application”, but with the first name and last name of the user appearing after the word
“Hello” and concatenated with the rest of the message, “Welcome to the Windows Appli-
cation”.
For readability, you also add single space characters (
' ') concatenated by instances
of the
+ operator in between the words and values you are reading from the Text property
of the
txtFnam and txtLname. If you do not include the single space character (' ') during
string concatenation, the words will be run into each other, and the message displayed in
the message box will be difficult to read.
Setting Dock and Anchor Properties
Prior to Visual Studio 2005, resizing Windows Forms would require you to reposition
and/or resize controls on those forms. For instance, if you had some controls on the left
side of a form, and you tried to resize the form by stretching it toward the right side or
None.
For example, a control docked to the top edge of a form will always be connected to
the top edge of the form, and it will automatically resize in the left and right directions
when its parent is resized.
The Dock property for a control can be set by using the provided graphical interface
in the Properties window as shown in Figure 14-11.
Figure 14-11. Setting the Dock property
Anchor Property
When a user resizes a form, the controls maintain a constant distance from the edges
of its parent form with the help of the Anchor property. The default value for the
Anchor pr
oper
ty for any contr
ol is set to
T
op
, Left, which means that this control will
maintain a constant distance fr
om the top and left edges of the for
m.
The Anchor pr
op
-
er
ty can be set b
y using the pr
ovided graphical interface in the Properties window, as
sho
wn in F
igur
the application presentable for the user.
1. Go to Solution Explorer and open the WinApp project. Open the WinApp form in
Design mode.
2. Select the form by clicking its title bar; you will see handles around form’s border,
which allow you to resize the form’s height and width.
3. Place the cursor on the handle of the right-hand border, and when mouse pointer
becomes double-headed, click and stretch the form toward the right-hand side.
You will see that form’s width increases, but the controls are still attached to the
left corner of the form.
4. Similarly, grab the handle located on the bottom of the form and try to increase
the height of the form. You will notice that the controls are still attached to the top
side of the form.
Have a look at Figure 14-13, which shows a resized (height and width) form and
the position of the controls. The controls appear in the top-left corner because
their Dock property values are None and Anchor property values are Top, Left.
CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS 337
9004ch14final.qxd 12/13/07 4:02 PM Page 337
Figure 14-13. Resized form and position of controls
Now you will try to set the Dock and Anchor properties for the controls and then
retest the application.
5. Select the Label control having a Text value of Welcome, and go to the Properties
window. Select the AutoSize property and set its value to False (default value is
True).
6. Resize the width of the Label control to the width of the form, and adjust the Label
control to the top border of the form. Set this control’s TextAlign property to Top,
Center.
7. Set the Dock property for the Label control from None to Top, which means you
want the label to always be affixed with the top border of the form.
8. Now select all the remaining controls (two Labels, two TextBoxes, and one
Button) either by scrolling over all of them while holding down the left mouse
In the first instance, you set the Dock property of the Label control to Top, which
allows this Label control to be affixed to the top border of the form and span the entire
width of the form. Setting the Anchor property of the remaining controls to Top, Left,
and Right shifts the controls in such a manner that they will maintain a constant dis-
tance from the left and right borders of the form.
Adding a New Form to the Project
You’ll obviously need multiple Windows Forms in any given project. By default, every
project opens with only one Windows Form, but you are free to add more.
Try It Out: Adding a New Form to the Windows Project
In this exercise, you will add another Windows Form to your project. You will also work
with a ListBox control and see how to add items to that control.
1. Navigate to Solution Explorer and select the WinApp project, right-click, and click
Add
➤ Windows Form. This will add a new Windows Form in your project.
2. In the Add New Item dialog box displayed, change the form’s name from Form1.cs
to AddName.cs. Click Add. The new form with the name AddName will be added to
your project.
3. Ensure that the newly added form AddN
ame is open in Design view. Drag a Label
control onto the form and change its Text property to Enter Name.
4. D
r
ag a TextBox control onto the AddName form, and modify its Name property
to txtName.
5. Drag a ListBox control onto the AddName form, and modify its Name property
to lstName.
6. A
dd a B
utton contr
ol to the A
1. In the project you modified in the previous exercise, navigate to Solution Explorer,
open the
Program.cs file, and look for the following code line:
Application.Run(new WinApp());
This code line ensures the WinApp form will be the first form to run all the time; in
order to set the AddNames form as the startup form, you need to modify this
statement a little, as follows:
Application.Run(new AddNames());
CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS 341
9004ch14final.qxd 12/13/07 4:02 PM Page 341
2. Build the solution, and run and test the application by pressing Ctrl+F5. The
AddNames application form will be loaded.
3. Enter a name in the TextBox and click the Add button; you will see that the name
you entered has been added to the ListBox, as shown in Figure 14-17.
Figure 14-17. Running the AddNames Windows Forms Application
How It Works
Let’s have a look at the “Adding a New Form to the Windows Project” task first. You use the
following code:
lstName.Items.Add(txtName.Text);
txtName.Clear();
The ListBox control has a collection named Items, and this collection can contain a
list of items, which is why you use it here. Next you call up the
Add method of the Items
collection, and finally you pass the value entered in the TextBox to the ListBox’s Items col-
lection’s
Add method.
As users may want to add another name after entering one, you have to clear the
TextBox once the name has been added to the list so that the TextBox will be empty, ready
for another name to be entered.
In the “Setting the Startup Form” task, you create an instance of the AddName form
Add
➤ Windows Form. Change the Name value from Form1.cs to ParentForm.cs,
and click A
dd.
2. Select the newly added ParentForm in Design mode, and navigate to the Proper-
ties window. Set the IsMdiContainer property value to True (the default value is
False). Notice that the background color of the form has changed to dark gray.
3. Modify the size of the ParentForm so that it can accommodate the two forms you
cr
eated earlier
, WinApp and AddNames, inside it.
4. Add a menu to the ParentForm by dragging a MenuStrip (a control that serves the
purpose of a menu bar) onto the ParentForm. In the top-left corner, you should
now see a drop-down sporting the text Type Here. Enter
Open Forms in the drop-
down. This will be your main top-level menu.
5. Now under the Open Forms menu, add a submenu by entering the text Win App.
6. U
nder the
W
in A
pp submenu, enter
A
dd N
ames
.
7. N
o
w click the top menu, Open Forms, and on the right side of it, type
H
oject y
ou modified in the previous exercise, you’ll first make the WinApp
for
m an MDI child for
m.
T
o do so
, y
ou need to set the
MdiParent pr
oper
ty to the
name of the MDI par
ent for
m, but in the code editor
.
Y
ou have already added
functionality in the pr
evious task (opening the
W
inA
pp for
m); just before the line
wher
e y
ou ar
e calling the
Show() method, add the follo
wing code:
Figure 14-18. Running an MDI form application
CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS 345
9004ch14final.qxd 12/13/07 4:02 PM Page 345
5. Click Open Form ➤ Win App; the WinApp form should open. Again, open the
main menu and click Add Names. Both the forms should now be open inside your
main MDI parent form application, as shown in Figure 14-19.
Figure 14-19. Opening child forms inside an MDI form application
6. Because both the forms are open inside one MDI parent, it becomes easier to
work with them. Switch back and forth between these forms by clicking their
title bars.
7. Once you are done with the forms, close the application by selecting Help ➤ Exit.
How It Works
Let
’
s talk about the “Creating an MDI Parent Form with a Menu Bar” task first. You use the
follo
wing code:
WinApp wa = new WinApp();
wa.Show();
This creates an instance of the WinApp form and opens it for you.
The following code creates an instance of the AddNames form and opens it for you:
AddNames an = new AddNames();
an.Show();
CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS346
9004ch14final.qxd 12/13/07 4:02 PM Page 346
You close the application with the following code:
Application.Exit();
In the “Creating an MDI Child Form and Running an MDI Application” task, you add
the lines shown in bold:
WinApp wa = new WinApp();
application.
In this chapter, we’ll cover the following:
• Understanding web functionality
• Introduction to ASP.NET and web pages
• Understanding the Visual Studio 2008 w
eb site types
• Layout of an ASP.NET web site
• Using Master Pages
Understanding Web Functionality
A web application, also often referred to as a web site, is one that you want to run over the
Internet or an intranet. The technique .NET came up with to build web applications is by
using web forms, which work in the ASP.NET environment and accept code functionality
from the C# language.
Before you dive into web forms and learn how to develop a web application, you
need to understand what components drive this entire web world and how these compo-
nents serve various applications running over it.
Basically, there are three key players that make all web applications functional: the
web server, the web browser, and Hypertext Transfer Protocol (HTTP). Let’s have a look at
their communication process:
1. The web browser initiates a request to the web server for a resource.
2. HT
TP sends a GET r
equest to the web server, and the web server processes that
r
equest.
349
CHAPTER 15
9004ch15final.qxd 12/13/07 4:00 PM Page 349
3. The web server initiates a response; HTTP sends the response to the web browser.
4. The web browser processes the response and displays the result on the web page.
er will keep connections and r
esour
ces alive for a period
of time b
y anticipating that ther
e will be an additional r
equest fr
om the
web browser.
The Web Browser and HTTP
The w
eb br
o
wser
is the client-side application that displays w
eb pages. The web browser
wor
ks with HT
TP to send a r
equest to the w
eb ser
ver, and then the web server responds
to the w
eb br
o
wser or w
eb client
’s request with the data the user wants to see or work
with.
HT
data about the application and have the file extension
.dll. After the code is compiled, it
is translated into a language-independent and CPU-independent format called
Microsoft
Intermediate Language
(MSIL), also known as Intermediate Language (IL). While running
the w
eb site, MSIL runs in the context of the .NET Framework and gets translated into
CPU-specific instructions for the processor on the PC running the web application.
Understanding the Visual Studio 2008
Web Site Types
V
isual S
tudio 2008
offers v
arious ways of creating a web project or web site. Though
w
eb sites ar
e only meant for the I
nternet or intranets, Visual Studio 2008 has three
types
, based on location, that can ser
v
e as a foundation for any web site web develop-
ers ar
e wor
king on.
The purpose of having these options is that they really simplify the
system r
equir
9004ch15final.qxd 12/13/07 4:00 PM Page 352
FTP Web Site
A web site based on the File Transfer Protocol (FTP) helps you to manage and transfer
files between a local machine and a remote web site. The FTP web site offers a Windows
Explorer–like interface and exposes the folder structure where files, documents, and so
on are kept for sharing purposes.
You can access the FTP site to share, transfer, or download files from a remote FTP
site to your local computer, or you can upload files to the remote FTP site.
Figure 15-2 shows the New Web Site dialog box with the web site Location option set
to FTP.
Figure 15-2. Specifying an FTP web site
■Note Building FTP sites requires a user’s credentials to be passed. Usually there is no anonymous
FTP site; you should specify the FTP address using the ftp://user:pwd@ftpaddress:port syntax.
HTTP Web Site
A w
eb site based on the Hypertext Transfer Protocol (HTTP) is preferable for building
entir
ely commercial web-based products. The HTTP web site requires IIS on the local
machine of the dev
eloper, as it is configured as an application in the virtual directory
of IIS. The IIS server brings a lot of administrative power to web applications sitting
inside IIS.
CHAPTER 15 ■ BUILDING ASP.NET APPLICATIONS 353
9004ch15final.qxd 12/13/07 4:00 PM Page 353
Figure 15-3 shows the New Web Site dialog box with the web site Location option set
to HTTP.
Figure 15-3. Specifying an HTTP web site
Layout of an ASP.NET Web Site
Let’s open a new web site and explore its layout. Open the Visual Studio 2008 IDE, and
select File
t some hyperlinks on this page and wr
ite code behind those hyperlinks to r
edir
ect
users to other pages
. By default,
Default.aspx is added to the list of default content pages
under IIS. B
esides those pages that are already listed, you can add any other pages to be
tr
eated as default pages for your web site. You can even remove the default setting of IIS,
which allo
ws a user’s web browser to recognize
Default.aspx as the default page to be
loaded while that user is accessing the w
eb site, so it becomes unnecessary to pass the
name of the page while the w
eb site is being accessed.
F
or this example, you need to provide the URL as
http://localhost/Chapter15, which
will load the
Default.aspx page. However, if there is any other page available with a name
other than
Default.aspx, you need to pass that name along with the URL: for example,
http://localhost/Chapter15/MyPage.aspx. Also note that the URLs are not case sensitive.
CHAPTER 15 ■ BUILDING ASP.NET APPLICATIONS 355
9004ch15final.qxd 12/13/07 4:00 PM Page 355
You can access IIS by either of the following methods:
• Click Start
t data files, style
sheets, resource files (used in a global scope in the application), and so on and achieve
functionality throughout the project.
The
App_Data folder is the default folder, which is added automatically when you cre-
ate an ASP.NET Web Site project.
To add other available folders, right-click the project, select the Add ASP.NET Folder
option, and then choose the folder that is appropriate for the type of web application you
are building.
The web.config File
The web.config file is a very important file of a web project. This file helps the developer
by providing a central location where all the settings required for various actions like
database connections, debugging mode, and so on can be set, and these settings will be
applied and accessible throughout the project.
CHAPTER 15 ■ BUILDING ASP.NET APPLICATIONS 357
9004ch15final.qxd 12/13/07 4:00 PM Page 357
■Note The web.config file is not automatically added to the ASP.NET Web Site project if you select
File System as the storage location. The
web.config file is also not added if you choose the location of a
folder with the File System option selected while saving the project.
Another feature of the web.config file is that it is simple to read and write to, just like
a Notepad file, because it comes in XML format.
The
web.config file has a lot of predefined tags that help you to organize the configu-
ration settings for your web application. The most important thing to remember is that
all tags need to be embedded inside the parent tags
<Configuration></Configuration>.
Try It Out: Working with a Web Form
In this exercise, you will add a web form with basic controls, and then you will attach the
required functionality to the controls.
click event of the button:
L
abel1.Text = "Hello" + " " + TextBox1.Text + " " +
"You are Welcome !";
9. Begin testing the application by selecting Input.aspx, right-clicking, and choosing
the View in Browser option.
10. The Input.aspx form will appear in the browser. Enter a name in the provided text
box and click the Submit button. You should receive output similar to that shown
in Figure 15-7.
Figure 15-7. Testing the web form application
Try It Out: Working with Split View
I
n this
exer
cise, you will see how to modify the properties of ASP control elements such
as asp:Label, asp:T
extB
o
x, and so on. You will also see how Split view, a brand-new fea-
tur
e of
V
isual Studio 2008, works.
CHAPTER 15 ■ BUILDING ASP.NET APPLICATIONS 359
9004ch15final.qxd 12/13/07 4:00 PM Page 359