C# Tutorial -1

ASP .NET Web Application with Visual Studio 2005

Why Visual Studio 2005?

• We have it in our university!• ASP.NET 2.0• Advanced Web Controls• Ease to develop web sites / web applications• Ease to design pages, concept of “Master Template” taken

from MS FrontPage2003• Extensive support for Smartphone and Pocket PC based

applications• Integrated tools to design/build/create databases and tables• Integration with Microsoft Office Applications, and can easily

integrate with Microsoft Visio• Support for extensive report generation

Things to do in Tutorial 1

• Creating/Closing/Opening a “Web Application” on the server

• Sample Form• Usage of Dropdown List, RadioButton List• Usage of Required Field Validator• Usage of Regular Expression Validator• Usage of Compare Validator• Cancelling all Validations on a particular action• Transferring data between forms• Usage of Resposne.Redirect• Usage of QueryString

How to open a Web Application?

• Click on Programs->Microsoft Visual Studio 2005 -> Visual Studio 2005

• Since this is recently installed, for the first time you might come across a pop-up window, which ask for the type of settings. Choose either “General Development Settings” or “Web Development Settings”

• If it is the first time VS 2005 is opened on that particular machine, you need to wait for couple of minutes in order to see the screen on the next slide

Welcome to VS 2005!

To open a web application – Click on “Create Web Site”

Select Language as “Visual C#” and appropriate location to create your project by typing the path or by hitting the browse button

HTTP

http://kc-sce-class/cs551/group1/tutorial1<your folder/filename>

Your project is created! Look out at the “Toolbox”, “Properties” window and “Solution Explorer” and rename the file to “Home.aspx”

Sample Web Application – Subscribe to Online Magazines

• User needs to input an email address as his username, followed by his name, gender, age and user has to subscribe to a particular magazine, by selecting one from the given list.

• After the user inputs in the correct format, and hits the “Submit” button, user will be navigated to another page/web form, where a summary of his information will be displayed.

Add Web Controls

• Drag in 7 labels, 5 textboxes, 1 dropdown list, 1 radiobutton list and 2 button controls. Your form should look like below

Setting properties to controls - 1

• In order to name the labels, click on the label an set the Text property to “E-Mail Address:” as shown below. Similarly set the names for other labels.

Setting properties to controls - 2

• Change the ID of the email address to textbox to txtEmail as shown below and also change the ID’s of other controls as per the table below

Label Textbox IdE-Mail Address txtEmailPassword: txtPasswordEnter Again: txtAgainName: txtNameGender: ddlGenderPhone Number: txtPhoneSubscribe To: RadioButtonList1Register btnRegisterCancel btnCancel

Setting properties to controls - 3

• Since fields which enter password, should not actually display the entered text, we need to set a special property for this purpose. Select the textbox which will accept password and set the TextMode property to “Password”

Setting properties to controls - 4

• In order to set values to the drop down list, select the dropdown list and click on “Items” Property to add values as shown below. Similarly set the values of the radiobutton list also.

Adding validations to form

- .NET provides the below set of validations

Using Required Field Validator

• Drag in 3 required field validators, one each for E-Mail, Password and Enter Again and set their “Error Message” property to “* Required Field” as shown below and also set the “ControlToValidate” property to “txtEmail” for Email Address, “txtPassword” for Password and “txtAgain” for Enter Again.

Using Regular Expression Validator for Email

• Drag in a regular expression validator for E-Mail and set its “Error Message” property to “Invalid Email Format”. Set the “ControlToValidate” property to “txtEmail”. Click on “ValidationExpression” property and select “Internet Email Address” as shown below:

Using Regular Expression Validator for Phone Number

• Drag in a regular expression validator for Phone Number and set its “Error Message” property to “Format should be XXX-XXX-XXXX”. Set the “ControlToValidate” property to “txtPhone”. Click on “ValidationExpression” property and select “US Phone Number” as shown below:

How to cancel validations for a particular event?

• Required Field Validations always occur on the click of a button, I.e on the occurrence of an event. This holds fine for “Submit” button, but the validations should not come into effect when user clicks on “Cancel” button. In order to remove validations for a particular event such as for the cancel button, set the “Causes Validation” property to “false”.

Writing code for “Register” Event!

• Double click on the “Register” button and write code for btnRegister_Click function as shown below:

Adding another WebForm

• To add another webform, click on Website -> Add New Item and select a webform, and rename it to Registered.aspx as shown below:

Displaying result in “Registered.aspx” form

• Design a page as below with some labels to display the values passed from “Default.aspx” to “Registered.aspx”.

Add code for “Registered.aspx”

• Double click on the webform and add the below code to Page_Load function:

Select your start page!

• In the case of multiple webforms, we need to have a starting point. To set “Home.aspx” as start page, right click and select as shown:

Lets build the project

• Hit Ctrl +S – I mean save your work• Click on Build -> Build Solution

Time to see the output

• Click on Debug -> Start without debugging as shown below, and a browser window will open

Here’s the output!

Hit “Register” to transfer info between forms