Object Oriented Programming Web forms, web controls and ASP.NET Dr. Mike Spann [email protected]

Object Oriented Programming

Web forms, web controls Web forms, web controls and ASP.NETand ASP.NET

Dr. Mike SpannDr. Mike Spann

[email protected]@bham.ac.uk

Contents

IntroductionIntroduction Static and dynamic web pagesStatic and dynamic web pages How ASP.NET worksHow ASP.NET works Introduction to web form programmingIntroduction to web form programming Visual Web DeveloperVisual Web Developer Validation controlsValidation controls SummarySummary

Static and dynamic web pages

We are all familiar with the concept of clients and web servers

Clients issue requests (using the http protocol) to web servers for web pages

The server responds with a message packet containing html which is the encoded web page

The web browser program running on the client parses the html and displays the web page


Internet

ClientServer

http GET request

http response plus html document

Static and dynamic web pages Static web pages appear the same in response to

every request from the client to server This is typical of simple html web pages

Dynamic pages can change depending on data supplied from the client or be personalised for the user based on cookies which are installed on the client computer There are many technologies which support this of

which ASP.NET is a powerful Microsoft example Essentially it involves running asp scripts

supported by code written in a high level language (typically VB or C#) on the server on which .NET has been installed


For example, we can create a static web page to For example, we can create a static web page to display times of movies as a cinemadisplay times of movies as a cinema www.eee.bham.ac.uk/spannm/MovieSite.htmlwww.eee.bham.ac.uk/spannm/MovieSite.html

The problem with this is that the information The problem with this is that the information cannot be updated without altering the cannot be updated without altering the html codehtml code htmlhtml consists of tags followed by text consists of tags followed by text The text is interpreted according to the The text is interpreted according to the

enclosing tags by the web browserenclosing tags by the web browser


<html><body background="James Bond1.jpg"> <TITLE>Movie Magic Cinema</TITLE> <H1 align="center"> <FONT color="blue" size="7"> Welcome to a James Bond evening </FONT> </H1> <P align="left"> <FONT color="lime" size="5"> <STRONG> <U>Showtimes for Wed 10/31</U> </STRONG> </FONT> </P> <FONT size="5" color="yellow"> <P>The Man With The Golden Gun 1:05 pm, 3:25 pm, 7:00 pm</P> <P>Diamonds Are Forever 12:50 pm, 3:25 pm, 6:55 pm</P> <P>The World Is Not Enough 3:30 pm, 8:35 pm</P> <P>From Russia With Love 12:45 pm, 6:45 pm</P> </FONT></body></html>

Static and dynamic web pages We can modify our static web page to include some dynamic contentWe can modify our static web page to include some dynamic content

It will display the current date/time along with the movie It will display the current date/time along with the movie scheduleschedule

We will use ASP.NET to run server side codeWe will use ASP.NET to run server side code• http://www.eee.bham.ac.uk/spannm/ASP Net http://www.eee.bham.ac.uk/spannm/ASP Net

stuff/MovieSite/MovieSite.aspx stuff/MovieSite/MovieSite.aspx The site will be an .The site will be an .aspxaspx file which will look similar to our file which will look similar to our

original .original .htmlhtml file file It will call methods from a C# class which is in a It will call methods from a C# class which is in a code behindcode behind file file

We will explain later how this all fits togetherWe will explain later how this all fits together

Static and dynamic web pages<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MovieSite.aspx.cs" Inherits="MoviePage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">

<title>Movie Magic Cinema</title></head><body background="James Bond1.jpg"> <form id="form1" runat="server"> <div> <h1 align="center"> <font color="blue" size="7"> Welcome to a James Bond evening </font> </h1> <p align="left"> <font color="lime" size="5"> <strong> <U>Showtimes for <%WriteDate();%></U> </strong> </font> </p> <font size="5" color="yellow"> <%WriteMovies();%> </font> </div> </form></body></html>

Static and dynamic web pagesusing System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;

public partial class MoviePage : System.Web.UI.Page { protected void WriteDate() { this.Response.Write(DateTime.Now.ToString()); }

protected void WriteMovies() { this.Response.Write( "<P>The Man With The Golden Gun 1:05 pm, 3:25 pm, 7:00 pm pm</P>"); this.Response.Write( "<P>Diamonds Are Forever 12:50 pm, 3:25 pm, 6:55 pm</P>"); this.Response.Write( "<P>The World Is Not Enough 3:30 pm, 8:35 pm</P>"); this.Response.Write( "<P>From Russia With Love 12:45 pm, 6:45 pm</P>"); }}

How ASP.NET works

To create a dynamic web page, we create an To create a dynamic web page, we create an .aspx.aspx file file If the client requests an .If the client requests an .aspxaspx file, because of the file file, because of the file

extension, the file is forwarded to ASP.NET by the web extension, the file is forwarded to ASP.NET by the web serverserver

ASP.NET parses the ASP.NET parses the .aspx.aspx file fileIt understands It understands .html .html tags as well as ASPtags as well as ASP tags (<% tags (<%

and %>)and %>) Ultimately ASP.NET will create an object, using the Ultimately ASP.NET will create an object, using the

code in the code in the .aspx .aspx file and the codebehind (C#) file file and the codebehind (C#) file which produces the .which produces the .htmlhtml to send back to the client to send back to the client

How ASP.NET works

.aspx file

.cs file

Web server

ASP.NET

Page derived managed object

How ASP.NET works

Web server

ASP.NET

Page derived managed object

html html

To client

How ASP.NET works

From the 2 files, ASP.NET produces code for 2 filesFrom the 2 files, ASP.NET produces code for 2 files The class is derived from the The class is derived from the System.Web.UI.PageSystem.Web.UI.Page

class (which contains basic functionality to produce class (which contains basic functionality to produce htmlhtml))

Also Also System.Web.UI.Page System.Web.UI.Page contains functionality to contains functionality to parse the request from the client including attached parse the request from the client including attached postback datapostback data

ASP.NET creates an instance of this object to ASP.NET creates an instance of this object to represent the pagerepresent the page

How ASP.NET works

The real power of ASP.NET is that the production of The real power of ASP.NET is that the production of htmlhtml is abstracted away to managed components is abstracted away to managed components For example, a button on a web form knows how to For example, a button on a web form knows how to

produce the produce the htmlhtml to render itself on the web page to render itself on the web pageAll these components exist in the namespace All these components exist in the namespace

System.Web.UI.WebControlsSystem.Web.UI.WebControls It’s state may depend on postback data from the It’s state may depend on postback data from the

client so the component may need to re-render itself client so the component may need to re-render itself in response in response

How ASP.NET worksBrowser - Client

Web server

ASP.NET

Browser client Internet

Managed code

html

Browser request and postback data

Page derived and custom objects

How ASP.NET works In our simple example, code for a derived class of the In our simple example, code for a derived class of the

MoviePage MoviePage class is producedclass is produced An object is instantiated containing code for method calls to An object is instantiated containing code for method calls to

WriteDate()WriteDate() and and WriteMovies()WriteMovies() More realistically our page will contain More realistically our page will contain web controlsweb controls which which

represent user interface elements on our web pagerepresent user interface elements on our web page These are defined in the FCLThese are defined in the FCL We can design a web page using visual programming We can design a web page using visual programming

techniques to drag and drop these controls into our pagetechniques to drag and drop these controls into our page We don’t have to worry about producing the right We don’t have to worry about producing the right html html to to

send back to our browsersend back to our browser

How ASP.NET works Another key feature of ASP.NET is its runtime performanceAnother key feature of ASP.NET is its runtime performance ASP.NET parses the .ASP.NET parses the .aspxaspx files at runtime files at runtime

Code is compiled into binary assemblies (.dll files) Code is compiled into binary assemblies (.dll files) which are cached and reusedwhich are cached and reused

A web form application must only be parsed once after A web form application must only be parsed once after each modification to source fileseach modification to source files

On receiving a request from the client, ASP.NET looks On receiving a request from the client, ASP.NET looks for an already compiled assembly to fulfil the request for an already compiled assembly to fulfil the request otherwise it creates one from the submitted otherwise it creates one from the submitted .aspx.aspx file and file and code-behind filecode-behind file

Introduction to web form programming

Web form programming allows us to insert web Web form programming allows us to insert web controls (for example buttons, labels, images etc) into controls (for example buttons, labels, images etc) into web pagesweb pages

We can do this programmatically in the We can do this programmatically in the .aspx.aspx and and codebehind filescodebehind files

Or we can do this using the design view in Visual Or we can do this using the design view in Visual StudioStudio

It allows us to design interactive webpages whose It allows us to design interactive webpages whose visual representation changes in response to user visual representation changes in response to user interactioninteraction


Control DescriptionAdRotator Implements a rotating banner add.Button Implements a button for web user interface.Calendar Implements a highly configurable calendar UI.CheckBox Implements a check box for web UI.DataGrid Implements a table that supports automatic binding to data sources.

HyperLink Implements a dynamic hyperlink.Image Implements an image for inclusion in web UI.Label Implements a dynamic label or text output.LinkButton Implements a hyperlink style button.ListControl Implements a list box for web UI.Panel A virtual control that is a collection of controls. This control is useful for

treating a block of controls as a single entity. For example, it is easy to create a Panel to cause blocks of controls to appear or disappear from the rendered HTML.

Table Implements a simple table with custom rows and cells.TextBox Implements an editable text box for web UI.RangeValidator Implements a validator that assures that an entry in another control on the

page falls within a given range. Validator controls automatically generate client-side script to perform validation for browsers that support JScript. Whether or not validation is performed on the client side, validation is also performed on the server side by the control.

RequiredFieldValidator Implements a validator that assures that an entry was made to a field.


As a simple example, the following website As a simple example, the following website allows the month’s calendar to be displayed allows the month’s calendar to be displayed for any user inputted datefor any user inputted date It demonstrates the use of the button, It demonstrates the use of the button,

label, textbox and calendar web controlslabel, textbox and calendar web controls http://www.eee.bham.ac.uk/spannm/http://www.eee.bham.ac.uk/spannm/

WebControls.aspxWebControls.aspx

Introduction to web form programming<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebControls.aspx.cs" Inherits="DatePage" %>


<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Demonstrating simple web controls</title></head><body bgColor="orange"> <form id="form1" runat="server"> <p align="left"> <font color="white"> Enter a Date Here<br> <asp:TextBox id="date" runat="server"/><br> <asp:Button id="button" Text="Then press this button" runat="server“/ > </font> </p> <p align="left"> <asp:Calendar id="calendar" Visible="false" runat="server“/>

</p> </form></body></html>

Introduction to web form programmingusing System;using System.Web.UI;using System.Web.UI.WebControls;

public partial class DatePage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { button.Click += new EventHandler(OnButtonClicked); }

protected void OnButtonClicked(Object sender, EventArgs args) { String dateString = date.Text; try { DateTime enteredDate = Convert.ToDateTime(dateString); calendar.SelectedDate = enteredDate; calendar.VisibleDate = enteredDate; calendar.Visible = true; } catch (FormatException) { calendar.Visible = false; } }}


The <The <asp:> asp:> tag in the tag in the .aspx .aspx file indicates that we are file indicates that we are defining a web controldefining a web control asp:asp: is shorthand for the is shorthand for the

System.Web.UI.WebControls System.Web.UI.WebControls namespacenamespace The The runat=“server”runat=“server” attribute for each web control attribute for each web control

indicates that these controls are to be implemented indicates that these controls are to be implemented on the server sideon the server side

We are setting the properties of our web control We are setting the properties of our web control objects in the objects in the <asp: > <asp: > but we could also use the but we could also use the properties window in Visual Studioproperties window in Visual Studio

Visual Web Developer

A sub-set of Visual Studio is the Visual Web A sub-set of Visual Studio is the Visual Web Developer which has a visual designer based on Developer which has a visual designer based on Front PageFront Page Allows the developer to use ‘drag and drop’ to Allows the developer to use ‘drag and drop’ to

insert web controls into web pagesinsert web controls into web pages Code can then easily be added to the Code can then easily be added to the

codebehind filescodebehind filesTypically this would be event handler Typically this would be event handler

functions for the controlsfunctions for the controls

Visual Web Developer We select File->New->Web site and then select ASP.NET We select File->New->Web site and then select ASP.NET

Web SiteWeb Site Normally HTTP is selected and the location (in this Normally HTTP is selected and the location (in this

case http://localhost/xxxx means under the local case http://localhost/xxxx means under the local ‘wwwroot’ directory (assuming IIS has been installed ‘wwwroot’ directory (assuming IIS has been installed locally)locally)


Web Developer has a design mode rather similar to the design Web Developer has a design mode rather similar to the design mode we used to create GUI’s in normal windows programmingmode we used to create GUI’s in normal windows programming

It differs slightly in that there is a cursor position and any web It differs slightly in that there is a cursor position and any web controls or text are added at the current cursor positioncontrols or text are added at the current cursor position The The .aspx .aspx file is updated as the web site is created in design file is updated as the web site is created in design

modemode The currently designed website can be previewed at any timeThe currently designed website can be previewed at any time As in normal windows program development, the event As in normal windows program development, the event

handler code for web controls (eg buttons) have to be added handler code for web controls (eg buttons) have to be added by the developerby the developer


We can create the web page for displaying the calendar We can create the web page for displaying the calendar using design mode using design mode

The label, text field, button and calendar are inserted The label, text field, button and calendar are inserted into the page using drag and dropinto the page using drag and drop We set the visible property of the calendar to false in We set the visible property of the calendar to false in

its properties windowits properties window We set the background colour of the outer form using We set the background colour of the outer form using

the properties windonthe properties windon All code except the All code except the Page_Load()Page_Load() and and

Button_Click()Button_Click()methods is automatically createdmethods is automatically created

Visual Web Designer Demo

Validation controls A validation control determines whether the data entered in A validation control determines whether the data entered in

a web control is in the proper formata web control is in the proper format For example a postcode entered in the correct For example a postcode entered in the correct

alphanumeric formatalphanumeric format A date entered in the correct dd/mm/yyyy formatA date entered in the correct dd/mm/yyyy format A correct email address is enteredA correct email address is entered etcetc

The validation check is carried out by the client by The validation check is carried out by the client by converting the validator to Javascript to perform the converting the validator to Javascript to perform the validation before submitting the data to the servervalidation before submitting the data to the server

Validation controls

Validation controls can be input onto a webpage using Visual Web Validation controls can be input onto a webpage using Visual Web DeveloperDeveloper Actual validators for things like phone numbers, email Actual validators for things like phone numbers, email

addresses are defined by addresses are defined by regular expressionsregular expressions These are strings containing formatting characters used to These are strings containing formatting characters used to

match to particular patterns in textmatch to particular patterns in text We can define our own regular expressions as validators for We can define our own regular expressions as validators for

particular inputsparticular inputs Luckily however, Visual Web Developer has a Luckily however, Visual Web Developer has a regular regular

Expression EditorExpression Editor dialog box allowing us to choose dialog box allowing us to choose standard regular expressions for things like email addresses standard regular expressions for things like email addresses and phone numbersand phone numbers

Validation controls For example we can create a simple web form to input a For example we can create a simple web form to input a

name, email address and phone number into textboxes and name, email address and phone number into textboxes and include input validators for eachinclude input validators for each We can also make each input a We can also make each input a required fieldrequired field so that so that

each field must be input before submitting to the servereach field must be input before submitting to the server We also include a label at the bottom of the form for the We also include a label at the bottom of the form for the

server responseserver response The The visiblevisible property of this label is initially set to false property of this label is initially set to false

http:// http:// www.eee.bham.ac.uk/spannm/ASP NET www.eee.bham.ac.uk/spannm/ASP NET stuff/ValidationControls/Validation.aspxstuff/ValidationControls/Validation.aspx

Validation controls

We can add required field validators to each of our input We can add required field validators to each of our input textboxestextboxes We can set the We can set the ControlToValidateControlToValidate and and ErrorMessageErrorMessage

properties in the properties window of each properties in the properties window of each validation controlvalidation control

The validation controls remain invisible in the The validation controls remain invisible in the website unless an input is not added before the form website unless an input is not added before the form is submittedis submitted

The required error message is displayedThe required error message is displayed The form is not submitted to the serverThe form is not submitted to the server

Validation controls

Next we can add Next we can add RegularExpressionRegularExpression validators to our validators to our input text boxes for email and phone numbersinput text boxes for email and phone numbers We can use a standard regular expression for email We can use a standard regular expression for email

taken from the dialog which is obtained from the taken from the dialog which is obtained from the properties windowproperties window

\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* We can generate our own for a UK phone numberWe can generate our own for a UK phone number

((\(\+\d{2}\) ?)|(\+\d{2}-))?\d{3}-\d{3}-\d{4}((\(\+\d{2}\) ?)|(\+\d{2}-))?\d{3}-\d{3}-\d{4}• eg (+44)(121-414-4329)eg (+44)(121-414-4329)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Validation.aspx.cs" Inherits="Validation" %>


<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Demonstrating Validation Controls</title></head><body bgcolor="#ffcc99"> <form id="form1" runat="server"> <div> Please fill out the following form<br /><br /> <strong>All fields are required and must be in the valid format</strong><br /><br /><br /> <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Name:"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter your name" ControlToValidate="TextBox1" Display="Dynamic" ForeColor="Blue"></asp:RequiredFieldValidator><br /><br /> <asp:Label ID="Label2" runat="server" Font-Bold="True" Text="E-mail address:"></asp:Label> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:Label ID="Label3" runat="server" Text="[email protected]"></asp:Label><br /> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2" ErrorMessage="Please enter your email address" ForeColor="Blue"></asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox2" Display="Dynamic" ErrorMessage="Please input your email address in the correct format" ForeColor="Blue" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"> </asp:RegularExpressionValidator><br /> <asp:Label ID="Label4" runat="server" Font-Bold="True" Text="Phone number:"></asp:Label> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> <asp:Label ID="Label5" runat="server" Text="e.g.(+44) 121-414-4324"></asp:Label><br /> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox3" Display="Dynamic" ErrorMessage="Please enter your telphone number"ForeColor="Blue"> </asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="TextBox3" Display="Dynamic" ErrorMessage="Please enter a phone number in valid format" ForeColor="Blue" ValidationExpression="((\(\+\d{2}\) ?)|(\+\d{2}-))?\d{3}-\d{3}-\d{4}"> </asp:RegularExpressionValidator><br /> <asp:Button ID="Button1" runat="server" Height="37px" Text="Submit" Width="132px" /><br /><br /> <asp:Label ID="Label6" runat="server" Text="Thank you for filling out this form" Visible="False" Font-Italic="False"> </asp:Label></div> </form></body></html>

Validation controls

Its often useful to display the data that was submitted on Its often useful to display the data that was submitted on the same web formthe same web form In practice, this data would be stored on file or in a In practice, this data would be stored on file or in a

databasedatabase We can do this using a We can do this using a postback eventpostback event

A postback event is raised in response to the client-side A postback event is raised in response to the client-side button click and causes the page to be loaded by button click and causes the page to be loaded by ASP.NET at the server a second timeASP.NET at the server a second time

The The IsPostBackIsPostBack property of property of PagePage is set to true if the is set to true if the page is re-loaded in response to a postbackpage is re-loaded in response to a postback

Validation controls

using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;

public partial class Validation : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { string name = Request.Form["TextBox1"]; string email=Request.Form["TextBox2"]; string phone=Request.Form["TextBox3"]; Label6.Text += "<br><br>"; Label6.Text+="You have inputted the following <br>"; Label6.Text+="Name: " + name +"<br>"; Label6.Text+="Email address: " + email +"<br>"; Label6.Text+="Phone number: " + phone +"<br>"; Label6.Visible = true; } }}

Summary

We have looked at the difference between static and dynamic We have looked at the difference between static and dynamic web pages and how we can generate simple dynamic web web pages and how we can generate simple dynamic web pagespages

We have looked at how ASP.NET generates dynamic objects We have looked at how ASP.NET generates dynamic objects at the web server from at the web server from .aspx.aspx files and C# codebehind files files and C# codebehind files

We have looked at simple web form programmingWe have looked at simple web form programming We have looked at the use of Visual Web Designer to build We have looked at the use of Visual Web Designer to build

dynamic websitesdynamic websites We have looked at how we can build in validation controls to We have looked at how we can build in validation controls to

our websitesour websites

Documents

Object Oriented Programming Web forms, web controls and ASP.NET Dr. Mike Spann [email protected]