Microsoft Virtual Labs

Creating ASP.NET Web

Applications with C# - Part 1
2 Creating ASP.NET Web Applications with C# - Part 1

Table of Contents

Creating ASP.NET Web Applications with C# - Part 1 ............................................................................ 3

Exercise 1 Web Application overview ................................................................................................................4
Exercise 2 Using Controls ...................................................................................................................................5
Exercise 3 Debugging Web Applications..........................................................................................................12
 Creating ASP.NET Web Applications with C# - Part 1 3

Creating ASP.NET Web Applications

with C# - Part 1

Objectives After completing this lab, you will be able to:

„ Create and save a Web project
„ Use Server and validation controls
„ Script in Code behind pages
„ Debug the Web applications

Scenario In this pair of labs, you will create a Web application to manage a list of
products as part of a Sales Order System. You will also learn how to create and
deploy this Web application. To sign into the Sales Order System, you need to
enter the User ID and password in the login page. You will first create the login
page, which is an ASP.NET page (Web form) using ASP .NET server controls.
After successfully logging into the Sales Order System, the user can view
details of existing products and modify the same. Finally you will deploy this
application to a web server.
The working solution and associated files for these labs are located at
C:\Microsoft Hands-On-Lab\DEV-HOL03\Solution.
This lab is the first part of two. It is strongly recommended that the two lab
sections be done in order.

Estimated time to
complete this lab: 45
minutes
4 Creating ASP.NET Web Applications with C# - Part 1

Exercise 1
Web Application overview

Scenario
In this exercise, you will learn to create a Web application and add a Web form, and demonstrate
similarities in creating Windows forms application and Web forms application. Here you will create
an ASP.NET Web application for sales order system and a Web form, which is the login page.

Tasks Detailed steps

1. Create an empty Web
application (ASP.NET)
project.
2. Rename and save the default
Web form created in task 1.
a. Navigate to Start | All Programs | Microsoft Visual Studio .NET
2003 | Microsoft Visual Studio .NET 2003
b. Select File | New | Project or press CTRL+SHIFT+N.
c. In the New Project dialog, select Visual C# Projects in Project
Types.
d. In Templates, select ASP.NET Web Application.
e. In Location filed, enter http://localhost/Lab3-CS-Starter-1.
f. Click OK.
Note: Visual Studio .NET creates a virtual root named Lab3-CS-Starter-1,
the Global.asax file, the Global.asax.cs file, the Web.config file,
WebForm1.aspx.cs file, and a default page named WebForm1.aspx. Visual
Studio .NET also creates the file Lab3-CS-Starter-1.disco, the Lab3-CS-
Starter-1.csproj file, and the Lab3-CS-Starter-1.csproj.webinfo file.
a. Select View | Solution Explorer or press CTRL+ALT+L.
b. Right-click WebForm1.aspx file in Solution Explorer and select
Rename
c. Rename WebForm1.aspx to Login.aspx.
d. Click the HTML tab (at the bottom of the page) to view the contents of
the page.
e. The @Page directive at the top of the page indicates the language in
which the code for this page is written.
f. Select File | Save Login.aspx or press CTRL+S.
In the following exercises you will add server controls and code to the Web
form.
 Creating ASP.NET Web Applications with C# - Part 1 5

Exercise 2
Using Controls

Scenario
In this exercise, you will use ASP.NET server controls and validation controls for validating user
input. You will also include script in Web form and write code in Code behind page of login page.
Finally, you will check the HTML code that is generated.

Tasks Detailed steps

1. Add Server Controls to a. Click the Design tab (at the bottom of the page) to switch to design
Web Form. view.
b. Select View | Toolbox or press CTRL+ALT+X.
c. Select Label control in Web Forms tab of Toolbox.
d. Drag and drop it on to the Design view of Login.aspx page.
e. Set the following properties for the label. (To view the properties
window of a control, click the control and select View | Properties
Window or press F4):
ƒ ID - lblHeading
ƒ Text - Sales Order System Sign in Form
ƒ Font (Expand the Font node)
ƒ Bold - True
ƒ Name - Times New Roman
ƒ Size - Larger
ƒ Underline - True
f. Select Label control in Web Forms tab of Toolbox.
g. Drag and drop it on to the Design view of Login.aspx page.
h. Set the following properties for the label:
ƒ ID - lblUserID
ƒ Text - User ID:
ƒ Font (Expand the Font node)
ƒ Bold - True
ƒ Name - Tahoma
ƒ Size - X-Small
i. Select Label control in Web Forms tab of Toolbox.
j. Drag and drop it on to the Design view of Login.aspx page.
k. Set the following properties for the label:
ƒ ID - lblPassword
ƒ Text - Password:
ƒ Font (Expand the Font node)
ƒ Bold - True
6 Creating ASP.NET Web Applications with C# - Part 1

ƒ Name - Tahoma
ƒ Size - X-Small
l. Select TextBox control in Web Forms tab of Toolbox.
m. Drag and drop it on to the Design view of Login.aspx page. Place it
next to the User ID label.
n. Set the following properties for the TextBox. (To view the Property
window of a control, click the control and select View | Properties
Window menu command or press F4):
ƒ ID - txtUserID
ƒ Width - 182px
ƒ TabIndex - 1
o. To add another textbox, select TextBox control in Web Forms tab of
Toolbox.
p. Drag and drag it on to the Design view of Login.aspx page. Place it
next to the Password label.
q. Set the following properties for the TextBox
ƒ ID - txtPassword
ƒ TextMode - Password
ƒ Width - 182px
ƒ TabIndex - 2
r. Select Button control in Web Forms tab of Toolbox.
s. Drag and drop it on to the Design view of Login.aspx page.
t. Set the following properties for the Button. (To view the Property
window of a control, click the control and select View | Properties
Window or press F4):
ƒ ID - btnSignin
ƒ Text - Sign In
ƒ TabIndex - 3
u. To add another button, select Button control in Web Forms tab of
Toolbox.
v. Drag and drop it on to the Design view of Login.aspx page.
w. Set the following properties for the Button
ƒ ID - btnRestore
ƒ Text - Restore
ƒ TabIndex - 4
ƒ CausesValidation - False
x. Select Label control in Web Forms tab of Toolbox,
y. Drag and drop it on to the Design view of Login.aspx page. Place it at
the bottom.
z. Set the following properties for the Label.
ƒ ID - lblResult
ƒ Text - “” (Clear the text)
ƒ Font (Expand the Font node)
ƒ Bold - True
 Creating ASP.NET Web Applications with C# - Part 1 7

ƒ Name - Tahoma
ƒ Size - X-Small
ƒ ForeColor - Red
2. Analyze the generated a. Click the HTML tab (at the bottom of the page) to view the contents of
HTML Code to see how the page.
ASP.NET runtime converts b. The following code is created automatically for server controls. The
the server controls into attribute runat="server" denotes a server side control: (The generated
browser-specific HTML code will not match exactly)
elements.
<asp:Label id="lblUserID" style="Z-INDEX: 103;
LEFT: 173px; POSITION: absolute; TOP: 152px"
runat="server" Font-Bold="True" Font-
Names="Tahoma" Font-Size="X-Small">User
ID:</asp:Label>
<asp:TextBox id="txtUserID" style="Z-INDEX: 102;
LEFT: 244px; POSITION: absolute; TOP: 149px"
tabIndex="1" runat="server"
Width="182px"></asp:TextBox>
<asp:Button id="btnSignin" style="Z-INDEX: 100;
LEFT: 269px; POSITION: absolute; TOP: 274px"
tabIndex="3" runat="server" Text="Sign In"
</asp:Button>
c. Select Debug | Start or press F5 to view the output in the browser.
d. Select View | Source in browser window to view the HTML output of
the server controls. (The viewed HTML may not match this output
exactly)
<span id="lblUserID" style="font-
family:Tahoma;font-size:X-Small;font-weight:bold;Z-
INDEX: 103; LEFT: 173px; POSITION: absolute; TOP:
152px">User ID:</span>
<input name="txtUserID" type="text" id="txtUserID"
tabindex="1" tyle="width:182px;Z-INDEX: 102; LEFT:
244px; POSITION: absolute; TOP: 149px" />
<input type="submit" name="btnSignin" value="Sign
In" onclick="if typeof(Page_ClientValidate) ==
'function') Page_ClientValidate(); "
language="javascript" id="btnSignin" tabindex="3"
style="Z-INDEX: 100; LEFT: 269px; POSITION:
absolute; TOP: 274px" />
The ASP.NET runtime converts the server controls into browser-specific
HTML elements. The runtime may additionally use DHTML, if required, to
achieve precise positioning of the various HTML elements.
e. Close Notepad and the Web browser.
3. Validate user input and a. Click the Design tab (at the bottom of the page)
Summarize validation Add the RequiredFieldValidator control to ensure that input in the
errors. txtUserID control is mandatory:
b. Select RequiredFieldValidator control in Web Forms tab of Toolbox
and drag it after txtUserID control in the Design view of Login.aspx
page.
c. Set the following properties for RequiredFieldValidator. (To view the
Properties window of a control, click the control and select View |
Properties Window or press F4):
ƒ ID - RequiredFieldValidator1
ƒ ControlToValidate - txtUserID
8 Creating ASP.NET Web Applications with C# - Part 1

ƒ Error Message - User ID is required.

ƒ Font (Expand the Font node)
ƒ Name - Tahoma
ƒ Size - X-Small
Add another RequiredFieldValidator control To ensure that input to the
txtPassword control is mandatory:
d. Select the RequiredFieldValidator control in Web Forms tab of
Toolbox and drag it after txtPassword control in the Design view of
Login.aspx page.
e. Set the following properties for the RequiredFieldValidator. (To view
the Properties window of a control, click the control select View |
Properties Window or press F4):
ƒ ID - RequiredFieldValidator2
ƒ ControlToValidate - txtPassword
ƒ Error Message - Password is required.
ƒ Font (Expand the Font node)
ƒ Name - Tahoma
ƒ Size - X-Small
Add a ValidationSummary control to display validation summary:
f. Select ValidationSummary control in Web Forms tab of Toolbox,
drag and drop it to the Design view of Login.aspx page. Place it at the
bottom of the page.
g. Set the following properties for the ValidationSummary. (To view the
Properties window of a control, click the control select View |
Properties Window or press F4).
ƒ ID - ValidationSummary1
ƒ DisplayMode - BulletList
ƒ Font (Expand the Font node)
ƒ Name - Tahoma
ƒ Size - X-Small
h. Select Debug | Start or press F5 to test the validation functionality.
i. In the browser, click Sign In.
You can see that the error messages are displayed for User ID and
Password fields, which are mandatory fields.
j. Enter some text in User ID textbox and press the Tab key or click
another HTML element on the page.
Note that the warning User ID is required disappears.
k. Enter some text in Password textbox and press the Tab key or click
another HTML element on the page.
Note that the warning Password is required disappears.
Notice that the value of the Password field is not retained after the Sign In
button is clicked. In a future exercise, you will learn to retain values using
session state.
l. Observe the summary of all errors displayed in the
ValidationSummary control at the bottom of the page.
 Creating ASP.NET Web Applications with C# - Part 1 9

The summary of error is displayed only when the page is submitted back to
the web server for processing and not dynamically when the focus is moved
away from a validated control.
m. Close the Web browser.
The ASP.NET platform automatically adds the script to achieve this
functionality. All you need to do is to set the required properties. You can
also use the CustomValidator control and attach custom code for
performing custom validations.
4. Use server side scripts as a. Click the HTML tab (at the bottom of the login.aspx page in design
part of HTML code in the mode) to add a script to the page.
Web form’s aspx page. b. Add the following to the beginning of the Login.aspx page (just before
the <HTML> tag). Set the Language attribute to C#. Your script
section should look like the following (Snippet 1):
Note: The snippets in this lab can be found in the file C:\Microsoft
Hands-on-Lab\DEV-HOL03\Lab3-CS Snippets.txt.
<script language="C#" runat="server">
void btnSignin_Click(object sender,
System.EventArgs e)
{
//Add user authentication logic
here
if (txtUserID.Text.Length >= 4 &&
txtPassword.Text.Length >= 4 &&
txtUserID.Text.StartsWith("J"))
{
lblResult.Text = "Valid user!";
}
else
{
lblResult.Text = "Invalid
user!";
}
}
</script>
The authentication logic is simple. Both User ID and Password must be
longer than 4 characters and the User ID must start with alphabet J.
c. Attach the event procedure to ButtonClick event, so that the code in
the btnSignin_Click function is executed when user clicks Sign In.
d. To set the OnClick attribute to the button Sign In, add the highlighted
(boldface) code to the btnSignin declaration as shown below.
<asp:Button id="btnSignin" style="Z-INDEX: 100;
LEFT: 269px; POSITION: absolute; TOP: 274px"
tabIndex="3" runat="server" Text="Sign In"
OnClick="btnSignin_Click"></asp:Button>
e. Select Debug | Start or press F5 to test the authentication functionality
in the Web browser.
f. If an autocomplete query appears, click No.
g. Enter Adam in User ID and Secret in Password.
h. Click Sign In.
If an autocomplete query appears, click No.
You get the message Invalid user!
i. Now, enter JOHN in User ID and Secret in Password.
10 Creating ASP.NET Web Applications with C# - Part 1
5. Write code in the code
behind page, which is
separated from the design.
This enables the page code
to be more cleanly separated
from the HTML content into
an entirely separate file.
j. Click Sign In.
You get the message Valid user!
k. Close the Web browser
a. Select View | Solution Explorer or press CTRL+ALT+L.
b. Right-click Login.aspx page in the Solution Explorer and select View
Code to view the Code behind page of Login.aspx page.
Login.aspx.cs will be opened.
c. Add the following code in the Page_Load function:
private void Page_Load(object sender,
System.EventArgs e)
{
// Put user code to initialize the page
here
if (!Page.IsPostBack)
{
lblResult.Text = "Page refreshed at:
" + DateTime.Now;
}
}
d. Select View | Designer or press SHIFT+F7 to switch to the Design
view.
e. Click the Design tab (at the bottom of the page).
f. Double-click Sign In.
g. The following method is created in the Code behind page as the event
handler function for the Click event of the Sign In button:
private void btnSignin_Click(object sender,
System.EventArgs e)
{
}
h. Add the following code to the btnSignin_Click method (Snippet 2):
private void btnSignin_Click(object sender,
System.EventArgs e)
{
//Add user authentication logic here
if (txtUserID.Text.Length >= 4 &&
txtPassword.Text.Length >= 4 &&
txtUserID.Text.StartsWith("J"))
{
lblResult.Text = "Valid user!";
}
else
{
lblResult.Text = "Invalid user!";
}
}
i. Select View | Designer press SHIFT+F7 to switch to Design view.
j. Click HTML tab (at the bottom of the page) to view the contents of the
page.
k. Delete the following code:
<script language="C#" runat="server">
void btnSignin_Click(object sender,
System.EventArgs e)
 Creating ASP.NET Web Applications with C# - Part 1 11

{
// Add user authentication logic here
if (txtUserID.Text.Length >= 4 &&
txtPassword.Text.Length >= 4 &&
txtUserID.Text.StartsWith("J"))
{
lblResult.Text = "Valid user!";
}
else
{
lblResult.Text = "Invalid user!";
}
}
</script>
l. Delete the OnClick="btnSignin_Click" line from the following
code:
<asp:Button id="btnSignin" style="Z-INDEX: 100;
LEFT: 269px; POSITION: absolute; TOP: 274px"
tabIndex="3" runat="server" Text="Sign In"
OnClick="btnSignin_Click"></asp:Button>
m. Click the Design tab.
n. Select Debug | Start or press F5.
o. Enter Adam in User ID and John in Password.
p. Click Sign In.
You get the message Invalid user!
q. Enter JOHN in User ID and JOHN in Password.
r. Click Sign In.
Now the message says Valid user!
s. Close the Web browser.
12 Creating ASP.NET Web Applications with C# - Part 1

Exercise 3
Debugging Web Applications

Scenario
In this exercise, you will learn how to debug ASP.NET applications, including setting break points,
using Intellisense in debug, and writing to the Output window.

Tasks Detailed steps

1. Enable debug mode for
ASP.NET Web applications
using Web.config file.
2. Set breakpoints on
executable lines of code to
debug the Web form code.
3. Use Intellisense in Debug
mode.
a. Select View | Solution Explorer or press CTRL+ALT+L.
b. Double-click Web.config file in the Solution Explorer.
Ensure that your ASP.NET application is in Debug mode by confirming the
following in the web.config file. This file is used to set configuration
settings of applications.
c. Verify the following line in the <system.web> section.
<compilation
defaultLanguage="c#"
debug="true"
/>
a. Double-click Login.aspx file in the Solution Explorer.
b. Select View | Code or press F7. You can also right-click Login.aspx
page in the Solution Explorer and select View Code.
c. Right-click the following line of code and select Insert BreakPoint.
if (txtUserID.Text.Length >= 4 &&
txtPassword.Text.Length >= 4 &&
txtUserID.Text.StartsWith("J"))
d. Select Debug | Start or press F5.
e. Enter John in User ID and John in Password
f. Click Sign In.
The debugger will break at the specified line and highlight the line of code
in yellow.
a. Hover the mouse over the Text part of txtUserID.Text.
You see a tool tip displaying the value John
b. Hover the mouse over the Length part of txtUserID.Text.Length.
You see a tool tip displaying the value 4
c. Select Debug | Windows | Immediate to open the command window.
d. Type ?txtUserID. in the command window.
IntelliSense in Debug mode will display all the available properties in a
drop down list.
e. Select the Text property and press ENTER key to select the Text
property.
f. Press ENTER again to display the value in the Text property of the
txtUserID control.
g. To continue debugging, press F10 until control returns to the Web
 Creating ASP.NET Web Applications with C# - Part 1 13

browser or to continue execution press F5.

h. Close the Web browser.
4. Use Debug.Write to write a. Select View | Code or press F7. You can also right-click the
output in the output Login.aspx page in the Solution Explorer and select View Code.
window. b. Add the following line of code at top of the Login.aspx.cs page. This
line of code imports a namespace called System.Diagnostics:
using System.Diagnostics;
c. Add the highlighted code at the end of the btnSignin_Click method as
shown below:
private void btnSignin_Click(object sender,
System.EventArgs e)
{
//Add user authentication logic here
if (txtUserID.Text.Length >= 4 &&
txtPassword.Text.Length >= 4 &&
txtUserID.Text.StartsWith("J"))
{
lblResult.Text = "Valid user!";
}
else
{
lblResult.Text = "Invalid user!";
}
//Debugging code
Debug.WriteLine(txtUserID.Text);
Debug.WriteLine(txtPassword.Text);
Debug.Write(lblResult.Text);
}
d. Select Debug | Clear all break points or press CTRL+SHIFT+F9 to
remove the breakpoint.
e. Select Debug | Start or press F5.
f. Switch to Visual Studio .NET and select View | Other Windows |
Output menu command or press CTRL+ALT+O to display the output
window.
g. Switch to the browser window
h. Enter John in User ID and John in Password.
i. Click Sign In.
j. Switch to Visual Studio .NET and check values of User ID,
Password and Result fields in the Output window
k. Close the Web browser.
l. Close Visual Studio .NET 2003.