ASP.Net, Web Forms and Web Controls 1 Outline Introduction Simple HTTP Transaction System Architecture Creating and Running a Simple Web Form Example Web.

ASP .Net, Web Forms and Web Controls

1

OutlineIntroductionSimple HTTP TransactionSystem ArchitectureCreating and Running a Simple Web Form ExampleWeb Controls Text and Graphics Controls AdRotator Control Validation Controls

Introduction• Web-Based Application Development• Creates Web content for Web browser clients, includes

• HyperText Markup Language (HTML)• Client-side scripting• Images and binary data

• Uses Web Forms, Web Controls, and C# programming• Web Forms (Web Form pages)

• Represent what the Web page sent to client will look like• File extension .aspx• ASPX (Web Form files) contain written code, event handlers, utility

methods and other supporting code• Every ASPX file has a corresponding class written in .NET language

(C#) called the code-behind file 2

Simple HTTP Transaction• HyperText Transfer Protocol (HTTP)• Defines methods and headers which allows clients and servers

exchange information in uniform way • Uniform Resource Locator (URL)• IP address indicating the location of a resource• All HTML documents have a corresponding URL

• Domain Name Server (DNS)• A computer that maintains a database of hostnames and their

corresponding IP addresses

• Microsoft Internet Information Services (IIS)• Web server that programmers use when developing ASP.NET

Web applications in Visual Studio 3

A Simple HTTP Transaction

4 Client interacting with Web server. Step 1: The GET request, GET /books/downloads.htm HTTP/1.1.

A Simple HTTP Transaction

5 Client interacting with Web server. Step 2: The HTTP response, HTTP/1.1 200 OK or HTTP/1.1 404 Not found

System Architecture • Most Web-based applications are multi-tier applications • Tiers are logical groupings of functionality

• Information Tier (data tier or bottom tier)• Maintains data pertaining to the applications• Usually stores data in a relational database management systems

(RDBMS)

• Middle Tier• Implements the business logic, controller logic and presentation logic• Acts as an intermediary between data in the information tier and the

application's clients

• Client Tier – application’s user interface (Web browser)6

System Architecture

7 Three-tier architecture.

Creating and Running a Simple Web-Form Example• Program consists of two related files• ASPX file• C# code-behind file

• Example• Show the output• Step-by-step process to create the program• Present the code (much of which is generated by Visual Studio)

8

WebTime.cs Program Output

9

WebTime ouput

Creating and Running a Simple Web Form Example

10Adding Web Form for project WebTime (Right click on project in Solution Explorer)

Creating and Running a Simple Web Form Example

11Click on Add New Item and Add a Web Form for project WebTime .

Creating and Running a Simple Web Form Example

12

code-behind file

ASPX file

Creating and Running a Simple Web Form Example

13

Solution Explorer window for project WebTime .

code-behind file

ASPX file

Creating and Running a Simple Web Form Example

14

Toolbox in Visual Web Developer.

Creating and Running a Simple Web Form Example

15

Source mode of Web Forms designer.

Design

mode

button

Creating and Running a Simple Web Form Example

16

Design mode of Web Forms designer.

Cursor’s current location

Cursor

Creating and Running a Simple Web Form Example

17

Split mode of Web Forms designer.

Creating and Running a Simple Web Form Example

18

Code-behind file for WebTime.aspx.cs generated by Visual Web Developer.

Designing the Page• Designing a Web Form as simple as a Windows Form

• Use Toolbox to add controls to page in Design mode• Unlike working with Windows Form, type text directly on a

Web Form at the cursor location or insert XHTML elements using menu commands

• Control and other elements are placed sequentially on a Web Form• position is relative to Web Forms upper left corner

• Alternate type layout (absolute positioning) is discouraged

19

Designing the Page

20

WebForm.aspx after adding Label and setting its properties.

label

Web Form

Adding Page Logic• Open WebTime.aspx.cs• Add to Page_Load event handler //display the server's current time in timeLabel timeLabel.Text = DateTime.Now.ToString("hh:mm:ss");

21

Running the Program• Can view the Web Form several ways• Select Debug > Start Without Debugging

• runs the app by opening it in a browser window• If created on a local file system URL http://localhost:PortNumber/

WebTime/WebTime.aspx

• Debug>Start Debugging• view web app in a web browser with debugging enabled• Do you want IDE to modify the web.config file to enable debugging?

Click OK

• To view ASPX file• right click either the Web Forms Designer or the ASPX file name and

select View in Browser to load the page

• Finally, can open web browser and type the web page’s URL in the Address field

22

WebTime.aspx

<%-- Fig. 22.4: WebTime.aspx --%><%-- A page that displays the current time in a Label. --%><%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebTime.aspx.cs" Inherits="WebTime" EnableSessionState="False" %>

<!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>Simple Web Form Example</title> <style type="text/css"> #form1 { height: 255px; width: 655px; } .style1 { font-size: large; } </style></head>

23

This attribute determines how event handlers are linked to a control’s events

AutoEventWireUp set to true so ASP.NET treats method of name Page_eventName as an event handler for a specified event

Specify class in the code-behind file from which this ASP .NET document

Document type declaration, specifies document element name and URI

Title for web page

Directive to specify information needed to process file

<body> <form id="form1" runat="server"> <div> <h2> Current time on the Web Server:</h2> <p> &nbsp;</p> </div> <asp:Label ID="timeLabel" runat="server" BackColor="Black" Font-Size="XX-Large" ForeColor="Lime"></asp:Label> </form></body></html>

24

Body tag, beginning of Web page’s viewable content

Attribute indicates the server processes the form and generates HTML for client

The asp:Label control maps to HTML span element – markup for the Label Web control

// WebTime.aspx.cs// The code-behind file for a page that displays the Web server's time.using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security; // definitions for graphical controls used in Web Formsusing System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;

public partial class WebTime : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //display the server's current time in timeLabel timeLabel.Text = DateTime.Now.ToString("hh:mm:ss"); }}

25

Contains classes that manage client requests and server responses

Contain classes for creation of Web-based applications and controls

Set timeLabel’s Text property to Web server’s time

Event raised when Web page loads

Creating and Running a Simple Web-Form Example

• How are ASPX file and code-behind file used to create the Web page that is sent to the client?• WebTimeTest.aspx.cs is the base class specified in the ASPX file• WebTimeTest

• inherits from Page, which defines general functionality of a Web page• Also defines some of its own functionality (displaying time)

• WebTime.ASPX defines the GUI• When client requests an ASPX file…• Class is created behind the scenes that contains both the visual

aspect of our page (.aspx) and the logic of our page (.aspx.cs)• New class inherits from Page• First time Web page is requested, class is compiled, and instance

created (put in project’s bin directory)• This instance represents the page – creates the HTML sent to the

client26

Creating and Running a Simple Web-Form Example• Once the web page has been created• Multiple clients can use that instance (w/o recompilation)• Project is recompiled only when programmer modifies the

application; this is detected by the runtime environment

• How does it execute?• When the Web server creates an instance of our page to serve a

client request• The Init event occurs first, invoking method OnInit• This method calls InitializeComponent• Then Load event is generated, which calls Page_Load• Page_Load executes processing • time will be updated with every page request

• After this event handler finishes, the page processes any events raised by page’s controls (such as button clicks).

• When ready for garbage collection, an UnLoad event is generated and method Page_Unload is called

27

1 <!-- WebTime.html -->2 <!-- The HTML generated when WebTime is loaded. -->

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

4 <html xmlns="http://www.w3.org/1999/xhtml">5 <head><title>6 Simple Web Form Example7 </title>8 <style type="text/css">9 #form110 {11 height: 255px;12 width: 655px;13 }14 .style115 {16 font-size: large;17 }18 </style>19 </head>20 <body>21 <form name="form1" method="post" action="WebTime.aspx" id="form1">22 <div>23 <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"

value="/wEPDwUJODExMDE5NzY5ZGTHi7f/xNriT14LWNspMfB7YfGTVA==" />24 </div>

25 <div class="style1">26 27 Current time on the web server:<br />28 <span id="timeLabel" style="color:LimeGreen;background29 color:Black;font-size:XX-Large;">03:10:03</span>30 31 </div>32 </form>33 </body>34 </html>

28

Defines the body of the document

Hidden inputs from the user

Look at HTML response when browser requests WebTime.aspx

span element to represent the text in the label

Using Cascading Style Sheets

Instructions to get IIS and ASP.NET running• First

• Install IIS (need Windows 7 CD)• Start IIS by executing inetmgr.exe (?)

• Expand node representing your computer• Right click Default Web Site and select Start

• Run C:\WINDOWS\Microsoft.NET\Framework\v4.nnnn\aspnet_regiis /i

29

Summary Instructions to Create a Web App project

1. File>New Web SiteType in project name in the Location field

2. Examine the newly created project• View aspx file• Click on display all files icon and expand the node for ASPX page –

View code-behind file3. Rename the ASPX file and the Class in the code-behind file4. Design the page

• Change page title• EnableSessionState property set to false• Add labels, rename, change BackColor, ForeColor and Font-Size

properties

5. Add page logic in code-behind file in Page_Load 30

Instructions to Run the ProgramThree ways1. Debug>Start Without Debugging2. Right-click Web Form designer or ASPX file name in Solution

Explorer and select View In Browser3. Open browser and type in URL

• http://localhost/ProjectFolder/PageName.aspx

31