web forms. agenda web forms web controls code separation dynamic compilation system.web.ui.page user...

Web FormsWeb Forms

AgendaAgenda

Web formsWeb forms

Web controlsWeb controls

Code separationCode separation

Dynamic compilationDynamic compilation

System.Web.UI.PageSystem.Web.UI.Page

User controlsUser controls

HTML Form (Calc.html)HTML Form (Calc.html)

<html> <body> <form> <input type="text" name="op1" /> + <input type="text" name="op2" /> <input type="submit" value=" = " /> </form> </body></html>

ASP Form (Calc.asp)ASP Form (Calc.asp)

<%@ Language="VBScript" %>

<html> <body> <form> <input type="text" name="op1" value="<%= Request ("op1") %>"/> + <input type="text" name="op2" value="<%= Request ("op2") %>" /> <input type="submit" value=" = " /> <% If Request ("op1") <> "" And Request ("op2") <> "" Then a = CInt (Request ("op1")) b = CInt (Request ("op2")) Response.Write (CStr (a + b)) End If %> </form> </body></html>

Web Form (Calc.aspx)Web Form (Calc.aspx)

<html> <body> <form runat="server"> <asp:TextBox ID="op1" RunAt="server" /> + <asp:TextBox ID="op2" RunAt="server" /> <asp:Button Text=" = " OnClick="OnAdd" RunAt="server" /> <asp:Label ID="Sum" RunAt="server" /> </form> </body></html>

<script language="C#" runat="server">void OnAdd (Object sender, EventArgs e){ int a = Convert.ToInt32 (op1.Text); int b = Convert.ToInt32 (op2.Text); Sum.Text = (a + b).ToString ();}</script>

ASP.NET Web FormsASP.NET Web Forms

Web ControlsWeb Controls

Approximately 80 in allApproximately 80 in all~30 carried forward from ASP.NET 1.x~30 carried forward from ASP.NET 1.x

~50 new controls in ASP.NET 2.0~50 new controls in ASP.NET 2.0

Rich programming model that Rich programming model that permits difficult UIs (such as menus permits difficult UIs (such as menus and tree views) to be encapsulated in and tree views) to be encapsulated in easy-to-use classeseasy-to-use classes

Open architecture that enables Open architecture that enables developers to write custom controls developers to write custom controls of their ownof their own

““Simple” ControlsSimple” Controls

Name Description

Label Renders programmable HTML text

TextBox Renders programmable HTML text boxes

HyperLink Renders programmable HTML hyperlinks

CheckBox Renders programmable HTML check boxes

RadioButton Renders programmable HTML radio buttons

Image Renders programmable static images

““Simple” Controls, Cont.Simple” Controls, Cont.

Name Description

Table Renders programmable HTML tables

Panel Provides container for grouping other controls

PlaceHolder Serves as placeholder for adding controls at run-time

HiddenField Renders hidden fields (<input type="hidden">)

ImageMap Renders programmable HTML image maps

FileUpload Provides UI for uploading files

Button ControlsButton Controls

Name Description

Button Renders push button that posts back and fires Click eventwhen clicked

LinkButton Renders hyperlink that posts back and fires Click eventwhen clicked

ImageButton Renders image that posts back and fires Click eventwhen clicked

Using the TextBox, Using the TextBox, Label, and Button Label, and Button ControlsControls

List ControlsList Controls

Name Description

ListBox Renders progammable HTML list boxes

DropDownList Renders programmable HTML drop-down lists

RadioButtonList Renders programmable groups of HTML radio buttons

CheckBoxList Renders programmable groups of HTML check boxes

BulletedList Renders programmable bulleted lists

Using DropDownListUsing DropDownList

Validation ControlsValidation Controls

Name Description

CompareValidator Compares an input to another value

CustomValidator

RangeValidator

RegularExpressionValidator

RequiredFieldValidator

ValidationSummary

Validates input using an algorithm you supply

Verifies that an input falls within a specified range

Validates input using a regular expression

Verifies that an input field isn't blank

Displays a summary of validation errors

Input ValidationInput Validation

Code SeparationCode Separation

Web forms support two* coding Web forms support two* coding models:models:

Code-inline - Markup and code in ASPXCode-inline - Markup and code in ASPX

Code-behind - Markup in ASPX, code in Code-behind - Markup in ASPX, code in CS/VBCS/VB

Visual Studio 2005 supports both Visual Studio 2005 supports both modelsmodels

No difference in performanceNo difference in performance

* Not including code-behind 1.0, which is deprecated in ASP.NET 2.0

Code-InlineCode-Inline


<script language="C#" runat="server">void OnAdd (Object sender, EventArgs e){ int a = Convert.ToInt32 (op1.Text); int b = Convert.ToInt32 (op2.Text); Sum.Text = (a + b).ToString ();}</script>

Calc.aspx

Code-BehindCode-Behind

<%@ Page CompileWith="Calc.aspx.cs" ClassName="Calc_aspx" %>


Calc.aspx

Corresponding source code file

Class name in source code file

Code-Behind, Cont.Code-Behind, Cont.

Calc.aspx.cs

using System;using System.Web; ...

public partial class Calc_aspx{ void OnAdd (Object sender, EventArgs e) { int a = Convert.ToInt32 (op1.Text); int b = Convert.ToInt32 (op2.Text); Sum.Text = (a + b).ToString (); }}

Partial class representing this page(derives from System.Web.UI.Page)

Dynamic Page Dynamic Page CompilationCompilation

ParserParser

DLLDLL

HTTP Request HTTP Response

CompilerCompiler

Once compiled, assembly reusedin subsequentrequests

public partial class Calc_aspx : System.Web.UI.Page, ...{ ...}

public partial class Calc_aspx : System.Web.UI.Page, ...{ ...}

ASPXASPX

public partial class Calc_aspx{ // Your code}

public partial class Calc_aspx{ // Your code}

Parser generatespartial classderived from Page

Calc.aspx.cs

a0b1c3d4.cs

Source code filespassed to compiler

Compiler producesassembly containingPage-derived class

PrecompilationPrecompilation

Applications can be precompiled to Applications can be precompiled to avoid first-access delays (new in avoid first-access delays (new in ASP.NET 2.0)ASP.NET 2.0)

System.Web.UI.PageSystem.Web.UI.Page

Base class for pages; container for Base class for pages; container for controlscontrols

Your code executes in context of a Your code executes in context of a Page-derived class, providing intrinsic Page-derived class, providing intrinsic access to Page members (e.g., access to Page members (e.g., Request & Response)Request & Response)

Parser adds useful properties of its own Parser adds useful properties of its own to Page-derived classes (e.g., Profile & to Page-derived classes (e.g., Profile & Resources)Resources)

Page objects fire events that you can Page objects fire events that you can handle by implementing specially handle by implementing specially named methodsnamed methods

Page lifetime is one requestPage lifetime is one request

Key Page PropertiesKey Page Properties

Name Description

Cache Provides access to the application cache

Controls Provides access to the page’s controls

IsPostBack True if page is executing due to a postback

Request Encapsulates the current HTTP request

Response Encapsulates the outgoing HTTP response

Session Provides access to session state

Type

Cache

ControlCollection

Boolean

HttpRequest

HttpResponse

HttpSessionState

User Provides information about requestor’s identityIPrincipal

Master Provides programmatic access to master pageMasterPage

Using Page PropertiesUsing Page Properties

if (!String.IsNullOrEmpty (Request["ItemID"])) { Response.Write (Request["ItemID"]);}

Page.Request property refers to HttpRequestobject representing the request

Page.Response property refers toHttpResponse object representingthe response

The Page_Load MethodThe Page_Load Method

If present, called automatically in If present, called automatically in every request when Page object fires every request when Page object fires Load eventLoad event

Called early in page's lifetimeCalled early in page's lifetimeControls have been created and Controls have been created and initializedinitialized

No rendering has been done (yet)No rendering has been done (yet)

Perfect place to initialize controls Perfect place to initialize controls programmatically and to bind programmatically and to bind controls to data sourcescontrols to data sources

Page_Load ExamplePage_Load Example

<html> <body> <form runat="server"> <asp:DropDownList ID="MyDropDownList" RunAt="server" /> </form> </body></html> ...void Page_Load (Object sender, EventArgs e){ if (!IsPostBack) { MyDropDownList.Items.Add ("Item 1"); MyDropDownList.Items.Add ("Item 2"); MyDropDownList.Items.Add ("Item 3"); }}

No need to repopulate listwhen a postback occurs

Page DirectivesPage Directives

Directive Description

@ Page Defines general attributes and compilation settings for ASPX files

@ Control Defines general attributes and compilation settings for ASCX files

@ Import

@ Assembly

@ Register

@ OutputCache

@ Reference

Imports a namespace

Imports an assembly

Registers user controls and custom controls in Web forms

Provides declarative control over ASP.NET’s page output cache

Adds a reference to an external ASPX or ASCX file

@ Implements Identifies an interface implemented by a Web page

@ Page Example@ Page Example

<%@ Page Language="C#" Trace="true" %>

Default language

Enable tracing

Key @ Page AttributesKey @ Page Attributes

Attribute Description

ClassName Specifes name of code-behind class

CompileWith Identifies file containing code-behind class

Culture, UICulture Specifies culture for content localization (e.g., "en-us")

Debug Enables and disables debug symbols (default=false)

ErrorPage Designates error page shown if unhandled execption occurs

Language Specifies language used for inline code (<% … %>)

Trace Enables and disables trace output (default=false)

MasterPageFile Designates the page's master page (if any)

User ControlsUser Controls

Reusable chunks of HTML and code Reusable chunks of HTML and code packaged in ASCX filespackaged in ASCX files

Registered in ASPX files with @ RegisterRegistered in ASPX files with @ Register

Declared in ASPX files with tag prefixes Declared in ASPX files with tag prefixes and tag names specified in @ Registerand tag names specified in @ Register

Great for replicating UI elements that Great for replicating UI elements that appear multiple times on a given appear multiple times on a given page (or separate pages)page (or separate pages)

User ControlsUser Controls

web forms. agenda web forms web controls code separation dynamic compilation system.web.ui.page user...

Documents

dropdownlist slide

input validation slide

aspnet web forms slide

source code file slide

text int b

aspx code

html form

new controls