Server-Side Scripting with ASP.Net ISYS 546

Dynamic Page – Client-Side Script Example Demo: TimeNowClient.Htm New Page 1 The time is now document.write time() iHour=hour(time()) if iHour < 12 then document.write " good morning " else document.write " good afternoon " end if

Problems with Client-Side Script Source code revealed Compatibility problem –Mozilla –IE

Dynamic Web Pages – Server-Side Script Example Demo: TimeNow.aspx – – The time is now –<% –dim iHour –iHour=Now.Hour() –if iHour < 12 then –response.write(" good morning ") –else –response.write (" good afternoon ") –end if –%> – Note: –Need web server; cannot open by File/Open Page. –Work for both Mozilla and IE.

Client-Side vs Server-Side Scripting Client-side scripting: –The browser requests a page. –The server sends the page to the browser. –The browser sends the page to the script engine. –The script engine executes the script. Server-side scripting: –The browser requests a page. –The server sends the page to the script engine. –The script engine executes the script to produce page. –The server sends the page to the browser. –The browser renders the page. Demo: ShowSum.htm, Web Form

Webpage Editor FrontPage demo Visual Studio.Net –Web Forms tab –HTML tab

HTML Introduction Heading section –,,,, etc. Body section –,, to,, –Formatting:,,, –Comment: –List –Image –Table:, : a new row in table, : a new cell in a table row. –Form:,,,

META Tag The meta tag allows you to provide additional information about the page that is not visible in the browser: – Redirection: – “3” is number of seconds. Demo using FrontPage

TABLE Tag

FORM Tag Form attribute: –Action: Specify the URL of a program on a server or an 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. To create a QueryString: –Add a question mark (?) immediately after a URL. –Followed by name=value pairs separated by ampersands (&). Example:

Creating a QueryString Entered with a URL: – As part of a URL specified in an anchor tag. – Via a form sent to the server with the GET method. Created by script

SCRIPT Tag Client-side script: – <!-- statements --> Server-side script: – statements –

HTML Tags and Events Link : click, mouseOver, mouseOut Image : abort(loading is interrupted), error, load. Area : mouseOver, mouseOut Body : blur, error, focus, load, unload Frameset: blur, error, focus, load, unload Frame: blur, focus Form: submit, reset Textbox, Text area: blur, focus, change, select Button, Radio button, check box: click List: blur, focus, change

Event Handler Event handler name: on + event name –Ex. onClick Three ways of writing handler: –1. Within the tag –2. Event function: onCLick=“clickHandler()”

ASP.NET ASP.NET is a server-side technology for creating dynamic web pages. ASP.NET allows you to use a selection of full programming languages. The default language is VB.NET. ASP.NET files have a.aspx extension.

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. Separating code from content. –Embedded code –CodeBehind

Elements of an ASP.Net Page Directives Code blocks ASP.NET controls HTML tags and text. Server-side include directives

Directives A directive controls how an ASP.Net page is compiled. –Page directives: Specify default language, enable tracing and debugging for a page. –, – –Imports name spaces –To process Access database, we need to import: –

Inserting ASP.NET Code into Web Pages Place ASP.NET code between and with a RUNAT attribute. – Your script – ---- ASPNET/ADD2.ASPX sub clickHandler(Sender As Object, E As EventArgs) sum.text=cstr(cdbl(num1.text)+cdbl(num2.text)) end sub Inline Code Block: ASP code is placed between. – The time is now “=“ is shorthand for response.write Server-side comments: –<%-- Comments –--%> Alternative place to store code: CodeBehind

Server-Side Include To include a file in an asp.net page: – Demo: timeNow.aspx

ASP.NET Object Model Client Server Request Object Response Object Server Object Session Object 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. Demo: testRequest.Htm, TestRequest.aspx

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

Request Object Collections QueryString – –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. Demo: testReqForm.htm, testReqForm.aspx

TestReqForm EnterCID: EnterName: checkbox1 checkbox 2 radio1 radio 2 A B C listbox

TestReqForm.Aspx <% response.write (" cid=" & request.form("cid") & " ") response.write (" cname=" & request.form("cname")& " ") response.write (" hidden variable=" & request.form("hidden1")& " ") if request.form("C1")="ON" then response.write (" You select checkbox 1 ") end if if request.form("C2")="ON" then response.write (" You select checkbox 2 ") end if if request.form("R1")="V1" then response.write (" You select Radio 1 ") else response.write (" You select Radio 2 ") end if response.write (" listBox=" & request.form("D1")& " ") response.write (" " & request.queryString("myquery")& " ") %>

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”)

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=Falsesends 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. 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.

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 (“Name”)=“Smith” –Session (“Age”)=25 To read values from the Application and Session: –Cname=Application(“Name”) –myAge = Session(“Age”) To remove an item, or all items: Remove, RemoveAll() –Application.Remove(“Name”) –Session.RemoveAll()

ApplicationState/SessionState Properties ApplicationState: –Lock, Unlock SessionState: –SessionID –TimeOut

The Events of the Application and Session Objects Application_OnStart –Web site start, and the first view Application_OnEnd –Web site shut down Session_OnStart Session_OnEnd

The Global.ASAX File Every ASP.NET application has this special script file. Must reside in the web site’s root directory. It can contain script code that belongs to the application, or each session. The event handler of the application and session objects must be placed in the Global.asax file.

Web Form vs HTML Form HTML Form: A web page that contains one or more HTML form controls such as textbox, checkbox, dropdown list, and button inside an HTML tag. Web Form: A web page that contains: – ASP.NET server controls, and/or HTML form controls inside a tag. –ASP.NET code that produces dynamic content to be displayed within the web form.

Web Form Events Every time a page is called the page object goes through a series of stage: initializing, loading, processing and disposing of information. It happens every time a round trip to the server occurs. –Page_Init –Page_Load: Occurs when a page is visible. –Control Events –Page_Unload Note: A webform is handled by itself. Demo: web form with regular HTML controls – ASPNET/TestRequestFormHTML.ASPX

ASP.NET Server Controls Intrinsic Controls: These controls correspond to their HTML counterparts. –Ex. Textbox, listbox, button, etc. Data-Centric Controls: Controls used for binding and displaying data from a data source, such as the DataGrid control. Rich Controls: Such as Calendar, AdRotator. Validation Controls: Such as RequiredFieldValidator. Namespace:System.Web.UI.Webcontrols

Benefits of Using ASP.NET Intrinsic Server Controls They are programmable objects. –Respond to events –Have properties

The Control An alternative way of displaying text on a web page. Properties: –ID –BackColor, ForeColor, Height, Width –Text –Visible

Other Intrinsic Controls –Demo: ASPNET/TestTextBox.aspx –Demo: TestDropdownlist.aspx ListItem control Apple Orange Banana –Note: Using VS.Net you may have to set AutoPostBack property to true to generate the ListItem tags automatically. –Demo:TestListBox.aspx

CheckListBox Example Dim i As ListItem For Each i In CheckBoxList1.Items If i.Selected Then Response.Write("You select " & i.Text) End If Next

Server Control Events Object Browser –System.Web.UI.Webcontrols

Postback Postback is the process by which the browser posts information back to the server telling the server to handle the event, the server does so and sends the resulting HTML back to the browser.

The effects of Postback Remember the state of the form by adding a hidden _VIEWSTATE variable. Enable to write event handler. Page.ISPostBack property. –IF Not Page.ISPostBack Then This is the first time the page is loaded. Demo: Display welcome message only once.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load If Not Page.IsPostBack Then Response.Write("Welcome to this demo page") End If End Sub

ASP.Net Controls’ AutoPostBack Property Button always triggers postback. Other controls, by default, this property is set to false.

FrontPage/VS.Net Demo Copy from VS.Net to FrontPage CodeBehind: Note: The class name specified in the inherits is case- sensitive.

Copy the Event Procedure from a CodeBehindFile to a Web Page Delete the CodeBehind page directive from the web page. Copy the event procedure from the codebehind file to the web page between tag and Remove the Handles clause from the procedure. Add a onClick=ProcedureName attribute to the Button control: –