ASP.NET 1.x - Tutorial

	ASP.NET 1.x - Tutorial

Krzysztof Mossakowski

For Students

First Web Forms application
- Create new project: ASP.NET Web Application
- Select auto generated project in Solution Explorer and select Show All Files from Project menu
- Expand WebForm1.aspx file node
- Open WebForm1.aspx file, choose HTML view
- Investigate @ Page directive, give attention to Codebehind and Inherits attributes
- Open WebForm1.aspx.cs file, investigate code in section 'Web Form Designer generated code'
- Add MyTrace method to generated class:
- Call MyTrace method from Page_Load
- Compile and run the project
  - give your attention to debugging properties
  - notice that only administrator are able to debug other user's process
  - usually You are not a server process owner
  - to disable ASP.NET debugging set project property "Configuration Properties\Debugging\Enable ASP.NET Debugging" to False
- Replace code from WebForm1.aspx file with the following: (leave first line contains @Page directive)
  Hint - use "Edit\Paste as HTML" in VisualStudio
- Compile and run the project, fill textbox with some data and submit page
- Replace line
```
<input type=text name=inputText value="">
```
  with
```
<input type=text name=inputText value="<%=Request.Form["inputText"]%>">
```
  compile and run the project again, notice difference in Form section
- Open your page with parameters
  - For example: http://localhost/WebApplication1/WebForm1.aspx?myParam=My%20parameter%20value&ID=123
  - notice difference in QueryString section

Simple Web Forms application

Create new ASP.NET Web Application
Exercise: create simple calculator

Steps:

Add controls, change their size, location and names
Use following code do initialize DropDownList: (in Page.Load event handler)

if(!IsPostBack) {
	op.Items.Add("+");
	op.Items.Add("-");
	op.Items.Add("*");
	op.Items.Add("/");
}

Add following code to button "=" Click event handler

double d=0.0;
status.Text=String.Empty;
if(arg1.Text.Length==0 || arg2.Text.Length==0) {
	status.Text="Both arguments have to be given.";
	return;
}
try {
	switch(op.SelectedValue) {
		case "+": d=double.Parse(arg1.Text)+double.Parse(arg2.Text); break;
		case "-": d=double.Parse(arg1.Text)-double.Parse(arg2.Text); break;
		case "*": d=double.Parse(arg1.Text)*double.Parse(arg2.Text); break;
		case "/": d=double.Parse(arg1.Text)/double.Parse(arg2.Text); break; 
	}
}
catch {
	status.Text="Wrong parameter(s).";
	return;   
}
result.Text=d.ToString("0.00");

Compile and run the project

Adding validation process

Add two RequiredFieldValidator, two RegularExpressionValidator and one ValidationSummary
Change their names
Add following code to Page.Load event handler:

arg1ReqValidator.ControlToValidate="arg1";
arg1ReqValidator.ErrorMessage="Argument 1 is required";
arg1ReqValidator.Display=ValidatorDisplay.None;  

arg2ReqValidator.ControlToValidate="arg2";
arg2ReqValidator.ErrorMessage="Argument 2 is required";
arg2ReqValidator.Display=ValidatorDisplay.None;  

arg1RegExValidator.ControlToValidate="arg1";
arg1RegExValidator.ErrorMessage="Argument 1 has wrong format";
arg1RegExValidator.ValidationExpression=@"\d+(,\d+)?";
arg1RegExValidator.Display=ValidatorDisplay.None;  

arg2RegExValidator.ControlToValidate="arg2";
arg2RegExValidator.ErrorMessage="Argument 2 has wrong format";
arg2RegExValidator.ValidationExpression=@"\d+(,\d+)?";
arg2RegExValidator.Display=ValidatorDisplay.None;  

summaryValidator.ShowSummary=false; 
summaryValidator.ShowMessageBox=true;

Compile and run the project again
Investigate page source (View Source option in IE browser context menu)

Building login page
- Add new page to existing project (File\Add New Item and select Web Form)
- Set this page as start page
- Select FlowLayout instead of GridLayout in page's properties
- Make page layout:
- Implement login process
  - Use following code to handle login button click:

Yet another page in your application

Add new page to existing project (File\Add New Item and select Web Form)

Add two Label control, one DropDownList control
Add System.Web.UI.HtmlControls.HtmlInputButton (not System.Web.UI.WebControls.Button)
Change control names
Set AutoPostBack property of DropDownList control on True
Choose HTML view of WebForm3.aspx file

Insert following code into HEAD section

<script language=javascript>
function SetColors(name) {
	var combo=document.all[name];
	for(var i=0; i<combo.options.length; i++) {
		var o=combo.options[i];
		o.style.backgroundColor=o.value;
	}
}
</script>

this is a client-side code to color options in DropDownList

Add attributs id and runat to BODY tag:

<body MS_POSITIONING="GridLayout">

<body MS_POSITIONING="GridLayout" id="bodytag" runat="server">

and new field into page's class

protected HtmlGenericControl bodytag;

Add client-side event handler to HtmlInputButton control:

<INPUT style="..." type="button" value="Calculator">

<INPUT style="..." type="button" value="Calculator" onclick="location='WebForm1.aspx';">

Use following code as Page.Load event handler:

string name=(string)Session["Name"];
string surname=(string)Session["Surname"];
if(name==null || name.Length==0 || surname==null || surname.Length==0) {
	Response.Redirect("WebForm2.aspx");
}
else {
	caption.Text=String.Format("Hello, {0} {1}",name,surname);
	caption.Font.Size=FontUnit.Medium;
	caption.ForeColor=Color.Orange;

	if(!IsPostBack) {
		backColor.Items.Add("white");
		backColor.Items.Add("red");
		backColor.Items.Add("green");
		backColor.Items.Add("blue");
		backColor.Items.Add("black");

		HttpCookie cookie=Request.Cookies["bgColor"];
		if(cookie!=null && cookie.Value!=null) {
			bodytag.Attributes.Add("bgColor",cookie.Value);
			backColor.SelectedValue=cookie.Value;
		}
	}

	RegisterStartupScript("SetColors","<script>SetColors('backColor');</script>");	
}

Add following code to DropDownList Click event handler

bodytag.Attributes.Add("bgColor",backColor.SelectedValue);
HttpCookie cookie=new HttpCookie("bgColor",backColor.SelectedValue);
cookie.Path=Request.ApplicationPath;
cookie.Expires=DateTime.Today.AddDays(7);

Response.Cookies.Add(cookie);

Login counter, traceing
- Enable tracing in Web.config file
- If pageOutput is set to false you can only view trace information at trace.axd page
- When pageOutput is set to true, trace informations are rendered after page
- Trace property can be used to print trace/debug information.
- Add following code to DropDownList Click event handler
```
Trace.Write("Selected background color: "+backColor.SelectedValue);
```
- Run page, login, change background color, view trace.axd and try to find your message
- Notice Trace property type is System.Web.TraceContext, not System.Diagnostics.Trace
- You can still use System.Diagnostics.Trace and System.Diagnostics.Debug mechanism
- Web.config is equivalent to App.config in desktop application
- Add following XML into <configuration> section of Web.config (but outside of <system.web> section)
- Add following code to Page.Load event handler of login page
```
txtName.Text=ConfigurationSettings.AppSettings["defaultUserName"];
txtSurname.Text=ConfigurationSettings.AppSettings["defaultUserSurname"];
```

User Control

Add web user control to existing project (File\Add New Item and select Web User Control)
Add HtmlInputFile control
Add HtmlImage control
Add Button control
Add HtmlInputFile and HtmlImage control mark as 'Run As Server control'
Set Button text to "Load"
Add following code to Page.Load event handler:

if(file.PostedFile!=null && file.PostedFile.ContentLength>0) {
	byte[] buf=new byte[file.PostedFile.ContentLength];
	file.PostedFile.InputStream.Read(buf,0,buf.Length);
	Cache[UniqueID]=buf;
}

if(Request.Params[ClientID+"_get"]=="true") {
	object buf=Cache[UniqueID];
	if(buf!=null) {
		Response.Clear();
		MemoryStream ms=new MemoryStream((byte[])buf);
		Bitmap bmp=new Bitmap(ms);
		bmp.Save(Response.OutputStream,ImageFormat.Gif);
		bmp.Dispose();
		ms.Close();
		Response.End();
	}
}

if(Cache[UniqueID]!=null) {
	img.Visible=true;
	img.Src=Request.FilePath+"?"+ClientID+"_get=true";
}
else {
	img.Visible=false;
}

Put your control on web page
Compile and run the project

XML Web Service
- Create ASP.NET Web Service
- Uncomment HelloWorld method example
- Add few methods, get all of them attribute [WebMethod]
- Watch your service directly in web browser
  - http://localhost/WebService1/Service1.asmx
  - http://localhost/WebService1/Service1.asmx?wsdl
- Using web service
- Add Web Reference...
  - Type your service address (http://localhost/WebService1/Service1.asmx)
- Create instance of proxy class generated from web reference
- Call web methods like common object's methods