creating asp.net web applications with csharp -part 1

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


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.

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.

2. Rename and save the default Web form created in task 1.

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.


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.


1. Add Server Controls to Web Form.

a. Click the Design tab (at the bottom of the page) to switch to design 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:


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:


Bold - True


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)


Bold - True


Name - Tahoma

Size - X-Small

ForeColor - Red

2. Analyze the generated HTML Code to see how ASP.NET runtime converts the server controls into browser-specific HTML elements.

a. Click the HTML tab (at the bottom of the page) to view the contents of the page.

b. The following code is created automatically for server controls. The attribute runat="server" denotes a server side control: (The generated code will not match exactly)

<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 Summarize validation errors.

a. Click the Design tab (at the bottom of the page)

Add the RequiredFieldValidator control to ensure that input in the 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


Error Message - User ID is required.


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.


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


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.


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 part of HTML code in the Web form’s aspx page.

a. Click the HTML tab (at the bottom of the login.aspx page in design mode) to add a script to the 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.


j. Click Sign In.

You get the message Valid user!

k. Close the Web browser 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.


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)


{ // 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.


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.


1. Enable debug mode for ASP.NET Web applications using Web.config file.


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" />

2. Set breakpoints on executable lines of code to debug the Web form code.

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.

3. Use Intellisense in Debug mode.

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


browser or to continue execution press F5.

h. Close the Web browser.

4. Use Debug.Write to write output in the output window.

a. Select View | Code or press F7. You can also right-click the Login.aspx page in the Solution Explorer and select View Code.

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.

creating asp.net web applications with csharp -part 1

Documents