Developing an ASP.NET Web Application

Deepankar Pathak

Agenda

Overview of .NETOverview of ASP.NETCreating an ASP.NET Web FormAdding Event ProceduresValidating User Input

Overview of .NET

What is the .NET Framework?

Developer Tools

Clients

User Experiences

ASP.NET Web Applications

XML Web Services

Databases

.NET Framework

Benefits of .NET

Based on Web standards and practicesFunctionality of .NET classes is universally availableCode is organized into hierarchical namespaces and

classesLanguage independentSolves existing problems:

Even with the Internet, most applications and devices have trouble communicating with each other

Programmers end up writing infrastructure instead of applications

Programmers have had to limit their scope or continually learn new languages

The .NET Framework Components

Win32Win32

MessageMessageQueuingQueuing

COM+COM+(Transactions, Partitions, (Transactions, Partitions,

Object Pooling)Object Pooling)IISIIS WMIWMI

Common Language RuntimeCommon Language Runtime

.NET Framework Class Library.NET Framework Class Library

ADO.NET and XMLADO.NET and XML

XML Web ServicesXML Web Services User InterfaceUser Interface

VisualBasic C++ C#

ASP.NETASP.NET

Perl Python …

The Common Language Runtime

One runtime for all . NET-Based Languages

Manages threads and memory Garbage collection

Enforces code securityEliminates DLL versioning problems

Multiple versions of a DLL can run simultaneously

Applications can specify a version of a DLL to use

Using the Class Library

The class library is a set of classes (properties and methods) that all .NET applications can use

You use objects by referencing the .NET namespaces

Using a namespace in C#:

Implicit object declaration

Explicit object declaration

using namespace_name;using namespace_name;

using System.Web.UI.WebControls;ListBox ListBox1;ListBox1.Items.Add("First Item");

using System.Web.UI.WebControls;ListBox ListBox1;ListBox1.Items.Add("First Item");

System.Web.UI.WebControls.ListBox ListBox1;ListBox1.Items.Add("First Item");System.Web.UI.WebControls.ListBox ListBox1;ListBox1.Items.Add("First Item");

Multiple Language Support

The .NET Framework is designed to support many languages More than 20 languages currently supported Microsoft provides Visual Basic .NET, C#,

Visual J# .NET, and JScript .NETBenefits of multiple-language support

Code modules are reusable Class Library access is the same for all

languages The right language is used for the right task Performance is roughly equal between all

languages

Choosing a Language

.NET Framework class library is the same regardless of language

Performance All languages are compiled to MSIL Only performance difference is how each

language compiler compiles to MSIL The runtime compiles all MSIL the same,

regardless of its origin Development experience

C# is similar to Java, C, Visual C++, and Pascal Visual Basic .NET is similar to Visual Basic

Browser compatibility

ASP.NET code is server-side code, so browser compatibility is not an issue

Overview of ASP.NET

ASP Web Application Architecture

Presentation TierPresentation Tier

Business Logic TierBusiness Logic Tier

Data TierData Tier

UI Pages(.htm)

UI Pages(.htm)

Graphic Files

Graphic Files

COMObjects

COMObjects

Data Source

ADO COM+ServicesCOM+

Services

ASP Page (.asp)

ASP Page (.asp)

ASP.NET Web Application Architecture

Presentation TierPresentation Tier

Business Logic TierBusiness Logic Tier

Data TierData Tier

Graphic Files

Graphic Files

UI Pages(.htm)

UI Pages(.htm)

XML Web Services(.asmx)

XML Web Services(.asmx)

User Controls(.ascx)

User Controls(.ascx)

Code-Behind File(.aspx.vb or .aspx.cs)

Code-Behind File(.aspx.vb or .aspx.cs)

ProxyProxy ADO.NETADO.NET

.NET Objects.NET

Objects

Data Source

COM+ServicesCOM+

ServicesCOM

ObjectsCOM

Objects

RCWRCW

Web Form (.aspx)

Web Form (.aspx)

ASP.NET Coding Changes

Page directivesLanguage attribute must be in set the @Page directive

Structural changesAll functions and variables must be declared within a <script> block

Only one language per pageRender Functions are no longer supported; use Response.Write

Design-Time controls are no longer supported

Replaced with Web controls

ASP.NET Runtime Compilation and Execution

Nativecode

C# Visual Basic .NET

Which language?

Visual Basic .NETcompiler

C#compiler

MSILJITcompiler

default.aspx

Common Language Runtime

HTML

Multimedia: ASP.NET Execution Model

Creating an ASP.NET Web Form

Demonstration: Developing an ASP.NET Web Application

Create a Web applicationAdd controls to a Web

FormView the HTML generatedAdd an event procedure

What Is a Web Form? .aspx extension Page attributes

@ Page directive Controls save state

Body attributes Form attributes

<%@ Page Language="C#" Inherits=Project.WebForm1 %><html>

<body ms_positioning="GridLayout"> <form id="Form1" method="post" runat="server"> </form></body>

</html>

<%@ Page Language="C#" Inherits=Project.WebForm1 %><html>

<body ms_positioning="GridLayout"> <form id="Form1" method="post" runat="server"> </form></body>

</html>

What is a Server Control?

Runat="server" Event procedures run on the server View state saved

Properties and methods are available in server-side event procedures

<asp:Button id="Button1" runat="server" Text="Submit"/><asp:Button id="Button1" runat="server" Text="Submit"/>

private void btn_Click(object sender, System.EventArgs e)

{lblName.Text = txtName.Text;

}

private void btn_Click(object sender, System.EventArgs e)

{lblName.Text = txtName.Text;

}

Types of Server Controls

HTML server controls Based on HTML elements

Exist within the System.Web.UI.HtmlControls namespace

Web server controls

Exist within the System.Web.UI.WebControls namespace

HTML that is generated by the control

<input name="TextBox1" type="text" value="Text_to_Display" Id="TextBox1"/><input name="TextBox1" type="text" value="Text_to_Display" Id="TextBox1"/>

<asp:TextBox id="TextBox1"runat="server">Text_to_Display </asp:TextBox><asp:TextBox id="TextBox1"runat="server">Text_to_Display </asp:TextBox>

<input type="text" id="txtName" runat="server" /><input type="text" id="txtName" runat="server" />

Maintaining the State of ASP.NET Server Controls

Server control state is stored in __VIEWSTATE, a hidden control on the Web Form

__VIEWSTATE stores state in a string value of name-value pairs

<form id="Form1" method="post" runat="server"> <input type="hidden" name="__VIEWSTATE"

value="dDw3NzE0MTExODQ7Oz4=" /> 'HTML here</form>

<form id="Form1" method="post" runat="server"> <input type="hidden" name="__VIEWSTATE"

value="dDw3NzE0MTExODQ7Oz4=" /> 'HTML here</form>

On by default, adjustable at Web Form and control level<%@ Page EnableViewState="False" %><%@ Page EnableViewState="False" %>

<asp:ListBox id="ListName" EnableViewState="true" runat="server"> </asp:ListBox>

<asp:ListBox id="ListName" EnableViewState="true" runat="server"> </asp:ListBox>

Demonstration: Using Server Controls to a Web Form

Using HTML server controls

Displaying browser-specific HTML

You need specific functionality such as a calendar or ad rotator

The control will interact with client and server script

You are writing a page that might be used by a variety of browsers

You are working with existing HTML pages and want to quickly add ASP.NET Web page functionality

You prefer a Visual Basic-like programming model

You prefer an HTML-like object model

Use Web Server Controls if:Use Web Server Controls if:Use HTML Server Controls if:Use HTML Server Controls if:

Bandwidth is not a problemBandwidth is limited

Selecting the Appropriate Control

Adding Event Procedures

How to Implement Code

Three methods for adding code: Put code in the same file as content (mixed) Put code in a separate <SCRIPT> section of

the content file (inline code) Put code in a separate file (code-behind

pages)Code-behind pages are the Visual

Studio .NET default

Form1.aspxForm1.aspx Form1.aspxForm1.aspx Form1.aspx.vbForm1.aspx.vbor Form1.aspx.csor Form1.aspx.cs

<tags><tags> codecode

codecode

Separate filesSingle file

Code-Behind PageCode-Behind Page

Understanding How Code-Behind Pages Work

Create separate files for user interface and interface logic

Use @ Page directive to link the two files

Page1.aspx

<% @ Page Language="C#"Inherits="Project.WebForm1" Codebehind="Page1.aspx.cs" Src = "Page1.aspx.cs" %>

Page1.aspx.cs namespace Project{ public class WebForm1 : System.Web.UI.Page { }}

What are Event Procedures?

Action in response to a user’s interaction with the controls on the page

Demonstration: Using Events

Open an ASP.NET page with controls and client-side and server-side event procedures

Click on the controls to view client-side and server-side events running

In the browser, view the source of the page

In the editor, view the event procedure code

Client-Side Event Procedures

Internet .HTM Pages

Typically used only with HTML controls

Interpreted by the browser and run on the client

Do not have access to server resources Use <SCRIPT language="language">

Server-Side Event Procedures

Used with both Web and HTML server controls

Code is compiled and run on the server

Have access to server resources

Use <SCRIPT language="language" runat="server">

Internet.ASPX Pages

Creating Event Procedures

Visual Studio .NET declares variables and creates an event procedure template in the code-behind pageprotected System.Web.UI.WebControls.Button btn;

private void InitializeComponent(){ this.btn.Click +=

new System.EventHandler(this.btn_Click);}

private void btn_Click(object sender, System.EventArgs e)

{

}

protected System.Web.UI.WebControls.Button btn;

private void InitializeComponent(){ this.btn.Click +=

new System.EventHandler(this.btn_Click);}

private void btn_Click(object sender, System.EventArgs e)

{

}

Events in the Web Page Generation Process

Events in the Web page generation process

ASP.NET server control events are handled when the Web page is posted back to the server

Use the Page.IsPostback property to determine if the Web page is being generated for the first time

private void Page_Load(object sender,System.EventArgs e)

{if (!Page.IsPostBack){

// executes only on initial page load}//this code executes on every request

}

private void Page_Load(object sender,System.EventArgs e)

{if (!Page.IsPostBack){

// executes only on initial page load}//this code executes on every request

}

Page_UnloadPage_UnloadPage_InitPage_Init Page_LoadPage_Load Server control events

Server control events

Multimedia

Demonstration: Handling Postback Events

Validating User Input

What Is Input Validation?

Verifies that a control value is correctly entered by the user

Blocks the processing of a page until all controls are valid

Avoids spoofingor the addition ofmalicious code

Client-Side and Server-Side ValidationASP.NET can

create both client-side and server-side validation

Client-side validation Dependent on

browser version Instant feedback Reduces postback

cyclesServer-side

validation Repeats all client-

side validation Can validate against

stored data

Valid?

Valid?

User Enters Data

No

No

Yes

Yes

Error Message

Client

Server

Web FormProcessed

ASP.NET Validation Controls

Control Name PurposeRequiredFieldValidator Require user inputCompareValidator Compare to another control, a

value, or a data typeRangeValidator Compare to a rangeCustomValidator Compare to a custom formulaRegularExpressionValidator Compare to a regular expression

patternValidationSummary Summarize the state of the

validation controls on a page

Adding Validation Controls to a Web Form

Add a validation control Select the input control to validate Set validation properties

1111

2222

3333

<asp:TextBox id="txtName" runat="server" /><asp:TextBox id="txtName" runat="server" />

<asp:Type_of_Validator id="Validator_id" runat="server" ControlToValidate="txtName" ErrorMessage="Message_for_error_summary" Display="static|dynamic|none" Text="Text_to_display_by_input_control"></asp:Type_of_Validator>

<asp:Type_of_Validator id="Validator_id" runat="server" ControlToValidate="txtName" ErrorMessage="Message_for_error_summary" Display="static|dynamic|none" Text="Text_to_display_by_input_control"></asp:Type_of_Validator>

Combining Validation Controls

Can have multiple validation controls on a single input control

Only the RequiredFieldValidator checks empty controls

Demonstration: Using Validation Controls

Create an ASP.NET Web Form with TextBox and Button controls

Add a RequiredFieldValidator control

Add a RangeValidator control

Add a RegularExpressionValidator control

Add a ValidationSummary control

Thanks!