Object oriented programming
Download
1 / 50

Object Oriented Programming - PowerPoint PPT Presentation


  • 98 Views
  • Updated On :

Object Oriented Programming. Web forms, web controls and ASP.NET. Dr. Mike Spann m.spann@bham.ac.uk. Contents. Introduction Static and dynamic web pages How ASP.NET works Introduction to web form programming Visual Web Developer Validation controls Summary. Static and dynamic web pages.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Object Oriented Programming' - xia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Object oriented programming l.jpg

Object Oriented Programming

Web forms, web controls and ASP.NET

Dr. Mike Spann

m.spann@bham.ac.uk


Contents l.jpg
Contents

  • Introduction

  • Static and dynamic web pages

  • How ASP.NET works

  • Introduction to web form programming

  • Visual Web Developer

  • Validation controls

  • Summary


Static and dynamic web pages l.jpg
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


Static and dynamic web pages4 l.jpg
Static and dynamic web pages

Server

Client

http response plus html document

http GET request

Internet


Static and dynamic web pages5 l.jpg
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 (so called postback data) 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


Static and dynamic web pages6 l.jpg
Static and dynamic web pages

  • For example, we can create a static web page to display times of movies as a cinema

    • www.eee.bham.ac.uk/spannm/MovieSite.html

  • The problem with this is that the information cannot be updated without altering the html code

    • html consists of tags followed by text

    • The text is interpreted according to the enclosing tags by the web browser


Static and dynamic web pages7 l.jpg
Static and dynamic web pages

<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 pages8 l.jpg
Static and dynamic web pages

  • We can modify our static web page to include some dynamic content

    • It will display the current date/time along with the movie schedule

      • We will use ASP.NET to run server side code

        • http://www.eee.bham.ac.uk/spannm/ASP Net stuff/MovieSite/MovieSite.aspx

  • The site will be an .aspx file which will look similar to our original .html file

    • It will call methods from a C# class which is in a code behind file

  • We will explain later how this all fits together


Static and dynamic web pages9 l.jpg
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 pages10 l.jpg
Static and dynamic web pages

using 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 l.jpg
How ASP.NET works

  • To create a dynamic web page, we create an .aspx file

    • If the client requests an .aspx file, because of the file extension, the file is forwarded to ASP.NET by the web server

    • ASP.NET parses the .aspx file

      • It understands .html tags as well as ASPtags (<% and %>)

    • Ultimately ASP.NET will create an object, using the code in the .aspxfile and the codebehind (C#) file which produces the .html to send back to the client


How asp net works12 l.jpg
How ASP.NET works

Web server

Page derived managed object

.aspx file

ASP.NET

.cs file


How asp net works13 l.jpg
How ASP.NET works

Web server

Page derived managed object

html

html

To client

ASP.NET


How asp net works14 l.jpg
How ASP.NET works

  • From the 2 files, ASP.NET produces code for 2 files

    • The class is derived from the System.Web.UI.Page class (which contains basic functionality to produce html)

    • Also System.Web.UI.Pagecontains functionality to parse the request from the client including attached postback data

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


How asp net works15 l.jpg
How ASP.NET works

  • The real power of ASP.NET is that the production of html is abstracted away to managed components

    • For example, a button on a web form knows how to produce the html to render itself on the web page

      • All these components exist in the namespace System.Web.UI.WebControls

    • It’s state may depend on postback data from the client so the component may need to re-render itself in response


How asp net works16 l.jpg
How ASP.NET works

Browser client

Internet

Browser

-

Client

Web server

Browser request

and postback

data

Managed code

ASP.NET

Page derived and custom objects

html


How asp net works17 l.jpg
How ASP.NET works

  • In our simple example, code for a derived class of the MoviePageclass is produced

    • An object is instantiated containing code for method calls to WriteDate() and WriteMovies()

  • More realistically our page will contain web controls which represent user interface elements on our web page

    • These are defined in the FCL

    • We can design a web page using visual programming techniques to drag and drop these controls into our page

    • We don’t have to worry about producing the right html to send back to our browser


How asp net works18 l.jpg
How ASP.NET works

  • Another key feature of ASP.NET is its runtime performance

  • ASP.NET parses the .aspx files at runtime

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

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

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


Introduction to web form programming l.jpg
Introduction to web form programming

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

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

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

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



Introduction to web form programming21 l.jpg
Introduction to web form programming

  • As a simple example, the following website allows the month’s calendar to be displayed for any user inputted date

    • It demonstrates the use of the button, label, textbox and calendar web controls

    • http://www.eee.bham.ac.uk/spannm/WebControls.aspx


Introduction to web form programming22 l.jpg
Introduction to web form programming

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

<!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>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 programming23 l.jpg
Introduction to web form programming

using 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, EventArgsargs)

{

String dateString = date.Text;

try

{

DateTimeenteredDate = Convert.ToDateTime(dateString);

calendar.SelectedDate = enteredDate;

calendar.VisibleDate = enteredDate;

calendar.Visible = true;

}

catch (FormatException)

{

calendar.Visible = false;

}

}

}


Introduction to web form programming24 l.jpg
Introduction to web form programming

  • The <asp:> tag in the .aspxfile indicates that we are defining a web control

    • asp: is shorthand for the System.Web.UI.WebControlsnamespace

    • The runat=“server” attribute for each web control indicates that these controls are to be implemented on the server side

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


Visual web developer l.jpg
Visual Web Developer

  • A sub-set of Visual Studio is the Visual Web Developer which has a visual designer based on Front Page

    • Allows the developer to use ‘drag and drop’ to insert web controls into web pages

    • Code can then easily be added to the codebehind files

      • Typically this would be event handler functions for the controls


Visual web developer26 l.jpg
Visual Web Developer

  • We select File->New->Web site and then select ASP.NET Web Site

    • Normally HTTP is selected and the location (in this case http://localhost/xxxx means under the local ‘wwwroot’ directory (assuming IIS has been installed locally)


Visual web developer29 l.jpg
Visual Web Developer

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

  • It differs slightly in that there is a cursor position and any web controls or text are added at the current cursor position

    • The .aspxfile is updated as the web site is created in design mode

    • The currently designed website can be previewed at any time

    • As in normal windows program development, the event handler code for web controls (eg buttons) have to be added by the developer


Visual web developer30 l.jpg
Visual Web Developer

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

  • The label, text field, button and calendar are inserted into the page using drag and drop

    • We set the visible property of the calendar to false in its properties window

    • We set the background colour of the outer form using the properties windon

    • All code except the Page_Load() and Button_Click()methods is automatically created



Validation controls l.jpg
Validation controls

  • A validation control determines whether the data entered in a web control is in the proper format

    • For example a postcode entered in the correct alphanumeric format

    • A date entered in the correct dd/mm/yyyy format

    • A correct email address is entered

    • etc

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


Validation controls37 l.jpg
Validation controls

  • Validation controls can be input onto a webpage using Visual Web Developer

    • Actual validators for things like phone numbers, email addresses are defined by regular expressions

      • These are strings containing formatting characters used to match to particular patterns in text

    • We can define our own regular expressions as validators for particular inputs

      • Luckily however, Visual Web Developer has a regular Expression Editor dialog box allowing us to choose standard regular expressions for things like email addresses and phone numbers



Validation controls39 l.jpg
Validation controls

  • For example we can create a simple web form to input a name, email address and phone number into textboxes and include input validators for each

    • We can also make each input a required field so that each field must be input before submitting to the server

  • We also include a label at the bottom of the form for the server response

    • The visible property of this label is initially set to false


Validation controls41 l.jpg
Validation controls

  • We can add required field validators to each of our input textboxes

    • We can set the ControlToValidate and ErrorMessage properties in the properties window of each validation control

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

    • The required error message is displayed

    • The form is not submitted to the server


Validation controls44 l.jpg
Validation controls

  • Next we can add RegularExpression validators to our input text boxes for email and phone numbers

    • We can use a standard regular expression for email taken from the dialog which is obtained from the properties window

      • \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

    • We can generate our own for a UK phone number

      • ((\(\+\d{2}\) ?)|(\+\d{2}-))?\d{3}-\d{3}-\d{4}

        • eg (+44)(121-414-4329)


Slide46 l.jpg

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

<!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>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>

&nbsp; &nbsp;

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

&nbsp;&nbsp;

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

&nbsp;&nbsp;

<asp:Label ID="Label3" runat="server" Text="e.g.user@domain.com"></asp:Label><br />

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"

ErrorMessage="Please enter your email address" ForeColor="Blue"></asp:RequiredFieldValidator>&nbsp;

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

&nbsp; &nbsp;&nbsp;

<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 telphonenumber"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 controls47 l.jpg
Validation controls

  • Its often useful to display the data that was submitted on the same web form

    • In practice, this data would be stored on file or in a database

  • We can do this using a postback event

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

      • The IsPostBack property of Page is set to true if the page is re-loaded in response to a postback


Validation controls48 l.jpg
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;

}

}

}


Validation controls49 l.jpg
Validation controls

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


Summary l.jpg
Summary

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

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

We have looked at simple web form programming

We have looked at the use of Visual Web Designer to build dynamic websites

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