ASP (1) - Yorku.ca

ASP .NET (1)These slides are meant to be for teaching purposes only and only for thestudents that are registered in CSE4413 and should not be published as abook or in any form of commercial product, unless written permission isobtained.1

ASP .NET (Active Server Pages .NET) ASP .NET is a component of .NET that allowsdeveloping interactive web pages, which are typicallyGUI programs that run from within a web page. Those GUI programs can be written in any of the .NETlanguages, typically C# or VB. An ASP.NET application consists of two major parts:– The .aspx file: this is essentially the GUI that you see on theweb page.– The .cs file (code behind): this is essentially the code thatexecutes the logic (calculations) associated with the GUI of theweb page.2

ArchitectureClientServerBrowser (IE)Send URLtargeting an aspxfile.IIS server (web servercapable toprocess request.).aspx file resides here.cs file resides hereResultingweb pageSend resulting web pageClient’s request receivedand a web page is generated.The web page is then sentto the client.Client can act on receivedpage and send back to server. Etc.3

clientExampleServerClient’s request receivedand a web page is generated.4

Visual Studio .NET makes it very easy to buildASP. NET applications. Must have IIS (Internet information Server)installed. (This is the Microsoft webserver.) To install IIS you need the Windows XPProfessional CD. It is also assumed thatyou have already installed and running theXP Professional OS.5

Installing IIS .6

Installing IIS ./Click “Next”and followinstructions.(thesubscreenswill giveseveralcheckboxes.Select all ofthem.)7

Example of an ASP .NET applicationUser typeshere and thenclicks “Send”button.8

Creating an ASP.NET application Create a C# project as ASP.NET Web Application.9

Creating an ASP.NET application The .cs (codebehind) file.Design view. Looks similar to awindows application designerview (but without a form).The .aspx file10

HTML tabThe .aspx code (HTML tab) %@ Page language "c#" Codebehind "WebForm1.aspx.cs" AutoEventWireup "false"Inherits "WebApplication1Simple.WebForm1" % The code behind file !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" used to process logic. HTML HEAD title WebForm1 /title meta name "GENERATOR" Content "Microsoft Visual Studio .NET 7.1" meta name "CODE LANGUAGE" Content "C#" meta name "vs defaultClientScript" content "JavaScript" meta name "vs targetSchema" content "http://schemas.microsoft.com/intellisense/ie5" /HEAD All processing takes place at body MS POSITIONING "GridLayout" the server (IIS server). form id "Form1" method "post" runat "server" asp:TextBox id "TextBox1" style "Z-INDEX: 101; LEFT: 29px; POSITION:absolute; TOP: 52px" runat "server"Width "184px" Height "29px" /asp:TextBox asp:Button id "Button1" style "Z-INDEX: 102; LEFT: 230px; POSITION:absolute; TOP: 56px" runat "server"Width "80px" Height "27px" Text "Send" /asp:Button asp:Label id "Label1" style "Z-INDEX: 103; LEFT: 26px; POSITION: absolute;TOP: 24px" runat "server" Name /asp:Label /form /body Text of11 /HTML Label

Where is it all located? When we develop anASP.NET application locally, then it is located in avirtual directory created by IIS.12

If the application is located in a physicallydifferent computer, then it is located in adirectory created in that computer (andmanaged by IIS which should reside inthat computer).13

The ASPpartThe .cs codeThe code behind part (C#file).C# Namespacecontaining classWebForm1Class WebForm1, whichcontains the C# sourcecode.14

System.Web.UI.HtmlControls; namespace WebApplication1Simple{/// summary /// Summary description for WebForm1./// /summary public class WebForm1 : System.Web.UI.Page{protected System.Web.UI.WebControls.TextBox TextBox1;protected System.Web.UI.WebControls.Button Button1;protected System.Web.UI.WebControls.Label Label1;private void Page Load(object sender, System.EventArgs e){// Put user code to initialize the page here}15

/#region Web Form Designer generated codeoverride protected void OnInit(EventArgs e){//// CODEGEN: This call is required by the ASP.NET Web Form // summary /// Required method for Designer support - do not modify/// the contents of this method with the code editor./// /summary private void InitializeComponent(){this.Button1.Click new System.EventHandler(this.Button1 Click);this.Load new System.EventHandler(this.Page Load);}#endregionprivate void Button1 Click(object sender, System.EventArgs e){Label1.Text "Hello " TextBox1.Text;}}}16

How to run it RightclickOr17

Running 18

The .html code as seen at the client site before the buttonis clicked.Text inLabel19

Running 20

The .html code as seen at the client site After the button is clicked.The .aspx file caused changes!Text in Labelchanged!21

Another example22

Design view23

The code behind rols;System.Web.UI.HtmlControls;namespace WebApplication2{/// summary /// Summary description for WebForm1./// /summary public class WebForm1 : System.Web.UI.Page{protected System.Web.UI.WebControls.Label Label1;protected System.Web.UI.WebControls.Button Button1;protected System.Web.UI.WebControls.Button Button3;protected System.Web.UI.WebControls.TextBox TextBox1;protected System.Web.UI.WebControls.Button Button2;protected System.Web.UI.WebControls.Label Label3;protected System.Web.UI.WebControls.Label Label2;24

private void Page Load(object sender, System.EventArgs e){// Put user code to initialize the page here} #region Web Form Designer generated codeoverride protected void OnInit(EventArgs e){//// CODEGEN: This call is required by the ASP.NET Web Form // summary /// Required method for Designer support - do not modify/// the contents of this method with the code editor./// /summary private void InitializeComponent(){this.Button1.Init new System.EventHandler(this.Page Load);this.Button1.PreRender new System.EventHandler(this.Page Load);this.Button1.Click new System.EventHandler(this.Button1 Click);this.Button1.Load new System.EventHandler(this.Page Load);this.Button3.Click new System.EventHandler(this.Button3 Click);this.Button2.Click new System.EventHandler(this.Button2 Click);this.Load new System.EventHandler(this.Page Load);}#endregion25

private void Button1 Click(object sender, System.EventArgs e){Label1.Text "Hi!";} /private void Button3 Click(object sender, System.EventArgs e){Label2.Text "Hi, label 2!";}private void Button2 Click(object sender, System.EventArgs e){Label3.Text TextBox1.Text;}}} Verify (via View Source) the changes in the .html code at the client(before and after clicking the buttons and before and after enteringtext in the textbox).26

Another example (Ad rotator) Can use the AdRotator control to displaydifferent advertisements every time theweb page is loaded.27

Design view28

Running Click on theflag givescountryinformation.29

The AdRotator works in conjunction with a XML filethat contains the related ads.30

The XML file in this example resides in thesame directory as the ASP.NET application.31

The contents ofAdRotatorInformation.xml ?xml version "1.0" encoding "utf-8"? !-- Fig. 20.20: AdRotatorInformation.xml-- !-- XML file containing advertisement information. -- Advertisements Ad ImageUrl images/us.png /ImageUrl NavigateUrl /us.html /NavigateUrl AlternateText United States Information /AlternateText Impressions 1 /Impressions /Ad Ad ImageUrl images\france.png /ImageUrl NavigateUrl /fr.html /NavigateUrl AlternateText France Information /AlternateText Impressions 1 /Impressions /Ad 32

Ad ImageUrl images\germany.png /ImageUrl NavigateUrl /gm.html /NavigateUrl AlternateText Germany Information /AlternateText Impressions 1 /Impressions /Ad Ad ImageUrl images\italy.png /ImageUrl NavigateUrl /it.html /NavigateUrl AlternateText Italy Information /AlternateText Impressions 1 /Impressions /Ad Ad ImageUrl images\spain.png /ImageUrl NavigateUrl /sp.html /NavigateUrl AlternateText Spain Information /AlternateText Impressions 1 /Impressions /Ad Ad ImageUrl images\latvia.png /ImageUrl NavigateUrl /lg.html /NavigateUrl AlternateText Latvia Information /AlternateText Impressions 1 /Impressions /Ad 33

Ad ImageUrl images\peru.png /ImageUrl NavigateUrl /pe.html /NavigateUrl AlternateText Peru Information /AlternateText Impressions 1 /Impressions /Ad Ad ImageUrl images\senegal.png /ImageUrl NavigateUrl /sg.html /NavigateUrl AlternateText Senegal Information /AlternateText Impressions 1 /Impressions /Ad Ad ImageUrl images\sweden.png /ImageUrl NavigateUrl /sw.html /NavigateUrl AlternateText Sweden Information /AlternateText Impressions 1 /Impressions /Ad Ad ImageUrl images\thailand.png /ImageUrl NavigateUrl /th.html /NavigateUrl AlternateText Thailand Information /AlternateText Impressions 1 /Impressions 34

/ /Ad Ad ImageUrl images\unitedstates.png /ImageUrl NavigateUrl os/us.html /NavigateUrl AlternateText United States Information /AlternateText Impressions 1 /Impressions /Ad Ad ImageUrl images/gr-flag.gif /ImageUrl NavigateUrl /gr.html /NavigateUrl AlternateText Greece Information /AlternateText Impressions 1 /Impressions /Ad /Advertisements 35

The code (nothing into it; all the functionality is includedin the AdRotator Controls;System.Web.UI.HtmlControls;namespace WebApplication1AdRotator{/// summary /// Summary description for WebForm1./// /summary public class WebForm1 : System.Web.UI.Page{protected System.Web.UI.WebControls.AdRotator AdRotator1;private void Page Load(object sender, System.EventArgs e){// Put user code to initialize the page here}#region Web Form Designer generated code36

/override protected void OnInit(EventArgs e){//// CODEGEN: This call is required by the ASP.NET Web Form // summary /// Required method for Designer support - do not modify/// the contents of this method with the code editor./// /summary private void InitializeComponent(){this.Load new System.EventHandler(this.Page Load);}#endregion}}37

Cookies When an ASP.NET application runs, the servercan place cookies at the client. A cookie is a small text file that containsinformation about the information exchangedbetween the client and the server. On successive visits to the same web site by thesame client, the server can retrieve all thecookies placed in that client (and thereforeadjust its behavior accordingly).38

ArchitectureClientServerSend URL targeting an aspx file.Browser (IE)IIS server (web servercapable toprocess request.).cs and .aspx reside hereResultingweb pageClient’s request receivedand a web page is generated. CookiesSend resulting web page andalso generated.CookiesThe web page and the cookies aresent to the client.Client can act on receivedpage and send back to server. At that time, the servercan extract all cookies residing in the client.39

ExampleDisplays message uponorder placement.Displays message upon ingredient selection.Displays messages upon size selection.Displays cookie info40

Running User selects a sizeand pressesbutton.This is what yousee upon startrunning. (Not allGUI componentsare displayed tothe user.)41

Running Program generated messageconveying that a cookie wasgenerated (and has beentransported and added at theclient site).Message conveying thatuser selected “Medium”.User chooses ingredients andpresses “submit ingredients”button.Another part of the GUI is now displayed (and theprevious part disappeared).42

Running Message conveying that another cookie wasgenerated (and has been transported and addedat the client site).Message conveying thelist of ingredientsselected.User presses the order buttonto finalize the order.Note, this part of the GUIhas been deactivated.Message showing all the cookies that have been placed at the client. Cookie[0] is a standardcookie always generated, and it identifies this session between client and server. Cookie[1] isthe cookie generated due to size selection. Cookie[2] is the cookie generated due toingredients selection. Name and Value are properties of the Cookie class, extracted by 43theprogram and displayed here.

All these parts ofthe GUI have beendeactivated.Running /Message conveying that theorder has been placed.44