Introduction to ASP.Net

ISYS 512

ASP.NET in the .NET Framework

• 1. The client requests a web page.

• 2. The web server locates the page.

• 3. If the page is an ASP.NET page, it is sent to the Common Language Runtime for compilation and execution.

• 4. The HTML produced by the CLR is returned to the browser.

Benefits of Server-Side Technology

• Browser compatibility: – Every browser reads HTML.

• Protection of source code.• Controls are server-side objects with properties,

methods and events.

Web Server

• Web Server:– VS Built-in Web Server

• VS 08 uses the built-in web server for debugging.

• Default home page– Default.aspx, default.asp, default.htm

• ASP.Net project directory• Note: Using the Built-In web server, a web project

can be created in any folders.

ASP.NET Object Model

Client Server

Request Object

Response Object

Server Object

SessionObject

Application

Object

ASP.NET Request Object• When a page is requested, much

information is passed along with the request, such as the URL, queryString, and data from a form. The request object allows you to get the information passed along with the request.

• It is created from the System.Web.HttpRequest class.

Request Object Properties• QueryString

– http://my.com/Target.htm?CustID=C1&CustName=Chao– cid = Request.queryString(“CustID”)– cName=Request.queryString(“CustName”)

• Form– A form with two text boxes:CustID, CustName– cid = Request.Form(“CustID”);– cName=Request.Form(“CustName”);

• Cookies• ClientCertificates• Path, ApplicationPath, PhysicalApplicationPath,

etc.

ASP.NET Response Object

• This object allows you to send information back to client.

• It is created from the System.Web.HttpResponse class.

• Properties:– Buffer– Cookies (a collection)

• Methods:– Response.Write (“…..”) *** MessageBox is not

available for web project ***.– Response.Clear(), Response.Flush(): clear/flush buffer– Response.Redirect (“URL”)

Web Project• New Project:

– C#/Web/Asp.Net Empty Web Application

• Add a Web form:– Project/Add new item/web form

• A web form contains:– A design file: Ex. webform.aspx

• Design view and source (HTML) view– A CodeBehind file: webform1.aspx.cs

• To set start up page: – Point to the web page in the Solution Explorer and right click

to choose Set As Start Page.

Two Types of Form

• HTML Form with HTML controls:<form method="GET" action="testFormGet.aspx">

<p>EnterCID:<input type="text" name="CID" size="20"></p>

• ASP.Net Web Form with server-side controls:

<form id="form1" runat="server">

<asp:TextBox ID="TextBox2" runat="server"

style="position: absolute; top: 39px; left: 164px; z-index: 1"></asp:TextBox>

Create an ASP.Net Web Form to add two numbers

• Add controls:– Web form flow layout: Controls are positioned from

left to right and from top to bottom.– To change a control’s position :

• Format/Set position– Absolute– Relative

– Note: We can use a table to format a form in flow layout:

– Table/Insert table

– Add controls in the table

• Add code:– Double-click the form to open the code view.– Events: Page_Load event and control’s events

Elements of an ASP.Net Page

• Design page: with file extension aspx– Contains:

• Directives

• ASP.Net controls

• HTML tags

• Code-behind file: with file extension aspx.cs or aspx.vb

Directives

• A directive controls how an ASP.Net page is compiled.– Page directives: Specify default language, enable

tracing and debugging for a page.– <%@ Page Language=“VB” %>, <%@ Page Language=“C#” %>

– Imports name spaces– To process Access database, we need to import:– <%@ Import Namespace=“System.Data” %>– <%@ Import Namespace=“System.Data.Oledb” %>

GridView

• Creating bound DataGrid by dragging a table from the Server Explorer

• Smart tag:– Configure Data Source– Enable:

• Paging

• Soring

• Deleting/Editing

Work with Multiple Pages

• Add a new form• Add an existing form or page• Change the starting web form• Redirect or transfer to another page:

– Server.Transfer("WebForm2.aspx");– Or, Response.Redirect("WebForm2.aspx");– Or, ImageButton

• PostBackURL property

HTML Introduction• Heading section

– <head>, <title>, <meta>, <script>, etc.

• Body section– <body>, <p>, <h1> to <h6>, <a>, <br>– Formatting: <b>, <I>, <u>, <center>– Comment: <!-- comment -->– List <ul>– Image– Table: <table>, <tr>: a new row in table, <td>: a new cell in

a table row.– Form: <form>, <input>, <select>, <textarea>– <div>: defines a division or a section in an HTML document. <div>

tag is often used to group block-elements to format them with styles.

META Tag

• The meta tag allows you to provide additional information about the page that is not visible in the browser:– <meta name=“Author” content=“D Chao”>– <meta name=“Keywords” content=“apple,

orange,peach”>

• Redirection:– <meta http-equiv=“refresh”

content=“3;url=http://www.sfsu.edu”>• “3” is number of seconds.

TABLE Tag

<table border="1" width="100%"> <tr> <td width="25%"></td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> <tr> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr></table>

HTML FORM Tag

• Form attribute:– Action: Specify the URL of a program on a server or an

email address to which a form’s data will be submitted.

– Method: • Get: the form’s data is appended to the URL specified by the

Action attribute as a QueryString.

• Post: A prefered method for database processing. Form’s data is sent separately from the URL.

– Name: Form’s name

• Demo: TestFormGet.Htm, TestFormPost.Htm

QueryString

• A QueryString is a set of name=value pairs appended to a target URL.

• It can be used to pass information from one webpage to another.

• Example: • <A Href=“http://my.com/Target.htm?CustID=C1&Cname=Chao”>

Creating a QueryString

• Entered with a URL:– http://dchaolaptop/testFormGet.aspx?cid=c2&cname=bbb

• As part of a URL specified in an anchor tag.– <A Href=“http://my.com/Target.htm?CustID=C1&Cname=Chao”>

• Via a form sent to the server with the GET method.

• Created by script

Input Tag

• HTML textbox, radiobutton, checkbox, button, listbox, etc.

ASP.Net Inline Coding Example

<body><p>The time is now <%=Now.TimeOfDay()%></p><p>The time is now <% response.write(Now.TimeOfDay())%></p><%dim iHour as DoubleiHour=Now.Hour()if iHour < 12 then

response.write("<h1>good morning</h1><br>")else

response.write ("<h1>good afternoon</h1><br>")end if%>

</body>

A HTML Form submitted using the Get method and is handled by an ASP.Net page

• Demo: – testFormGet.htm– testFormGet.aspx

testFormGet.htm

<form method="GET" action="testFormGet.aspx"> <p>EnterCID:<input type="text" name="CID" size="20"></p> <p>EnterName:<input type="text" name="CNAME" size="20"></p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form>

testFormGet.aspx

<body><%response.write("<h1>" & request.queryString("cid")& "</h1><br>")response.write ("<h1>" & request.queryString("cname")& "</h1><br>")%></body>

A HTML Form submitted using the Post method and is handled by an ASP.Net page

• Demo: – testFormPost.htm– testFormPost.aspx

testFormPost.htm

<form method="POST" action="testFormPost.aspx"> <p>EnterCID:<input type="text" name="CID" size="20"></p> <p>EnterName:<input type="text" name="CNAME" size="20"></p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form>

testFormPost.aspx

<body><%response.write ("<h1> cid=" & request.form("cid") & "</h1><br>")response.write ("<h1> cname=" & request.form("cname")& "</h1><br>")%></body>

Other ASP.NET Request Object Properties Demo

• Demo: – testRequest.Htm– TestRequest.aspx

testRequest.htm

<form method="post" action="testRequest.aspx"> <p>EnterCID:<input type="text" name="CID" size="20"></p> <p>EnterName:<input type="text" name="CNAME" size="20"></p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form>

<body><%response.write ("<h1> cid=" & request.form("cid") & "</h1><br>")response.write ("<h1> cname=" & request.form("cname")& "</h1><br>") Response.Write("<h1> filepath " & Request.FilePath & "</h1><br>") Response.Write("<h1> httpMethod " & Request.HttpMethod & "</h1><br>") Response.Write("<h1> path " & Request.Path & "</h1><br>") Response.Write("<h1> Url " & Request.Url.ToString & "</h1><br>") Response.Write("<h1> urlReferer " & Request.UrlReferrer.ToString & "</h1><br>") Response.Write("<h1> HostName " & Request.UserHostName & "</h1><br>") Response.Write("<h1> HostAddress " & Request.UserHostAddress & "</h1><br>")%></body>

testRequest.aspx

Demo other HTML controls: TestReqForm

<form method="POST" action="testReqForm.aspx?myquery=testquery">

<p>EnterCID:<input type="text" name="CID" size="20"></p>

<p>EnterName:<input type="text" name="CNAME" size="20"></p>

<p><input type="checkbox" name="C1" value="ON">checkbox1&nbsp;&nbsp;&nbsp; <input type="checkbox" name="C2" value="ON">checkbox

2</p>

<p><input type="radio" value="V1" checked name="R1">radio1</p>

<p><input type="radio" name="R1" value="V2">radio 2</p>

<p><select size="1" name="D1">

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

</select>listbox</p>

<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>

<input type="hidden" name="hidden1" value="Hi, it's me!">

</form>

TestReqForm.Aspx<%

response.write ("<h1> cid=" & request.form("cid") & "</h1><br>")

response.write ("<h1> cname=" & request.form("cname")& "</h1><br>")

response.write ("<h1> hidden variable=" & request.form("hidden1")& "</h1><br>")

if request.form("C1")="ON" then

response.write ("<h1>You select checkbox 1</H1><br>")

end if

if request.form("C2")="ON" then

response.write ("<h1>You select checkbox 2</H1><br>")

end if

if request.form("R1")="V1" then

response.write ("<h1>You select Radio 1</H1><br>")

else

response.write ("<h1>You select Radio 2</H1><br>")

end if

response.write ("<h1> listBox=" & request.form("D1")& "</h1><br>")

response.write ("<h1>" & request.queryString("myquery")& "</h1><br>")

%>

Buffer

• When ASP.Net is running the code, it gradually builds up the HTML that will be sent back to the browser. As the HTML is generated, it is placed in a buffer. Normally, the HTML is held in the buffer so that it isn’t sent to the browser until the page finishes executing.

• Response.Buffer: The default value for this property is true which means the page is buffered and sent in one block.– Response.Buffer=False sends html as it is

generated.

The Application and Session Objects

• Application state: A central, site-wide store of variables that we can get from any page.– System.Web.HttpApplication

• A session is a single visit to a web site, and normally includes visits to a number of pages. Each time a visitor comes to your web site, a session object is created for the visitor. Session state is a store of variables that relates to a session.– System.Web.SessionState

Examples of Using the Application and Session Objects

• Examples of session variables are: user’s id, user’s name, Shopping cart, etc.

• Examples of application variables are: visitor counter.

Working with the Application and Session

• To place a value into the Application and Session simply assign it a key and then assign the value:– Application[“CustName”]=“Smith”;

– Session [“Age”]=25;

• To read values from the Application and Session:– Cname=Application[“Name”].ToString();

– myAge = Session[“Age”] .ToString();

• To remove an item, or all items: Remove, RemoveAll()– Application.Remove[“Name”];

– Session.RemoveAll();