Developing an ASP.

NET Web Application

Rishi Kothari

Agenda

Overview of .NET Overview of ASP.NET Creating an ASP.NET Web Form Adding Event Procedures

Validating User Input

Overview of .NET

What is the .NET Framework?

Developer Tools

Clients

Databases

ASP.NET Web Applications

.NET Framework

XML Web Services

User Experiences

Benefits of .NET

Based on Web standards and practices Functionality of .NET classes is universally available Code is organized into hierarchical namespaces and classes Language independent Solves 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

Visual Basic C++ C# Perl Python

XML Web Services User Interface ASP.NET ADO.NET and XML .NET Framework Class Library Common Language Runtime
Message Queuing COM+ (Transactions, Partitions, Object Pooling) IIS WMI

Win32

The Common Language Runtime

One runtime for all . NET-Based Languages Manages threads and memory

Garbage collection

Enforces code security

Eliminates 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#:
using namespace_name;

Implicit object declaration

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

Explicit object declaration

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 .NET Code modules are reusable Class Library access is the same for all languages

Benefits of multiple-language support

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 C# is similar to Java, C, Visual C++, and Pascal Visual Basic .NET is similar to Visual Basic ASP.NET code is server-side code, so browser compatibility is not an issue

Development experience

Browser compatibility

Overview of ASP.NET

ASP Web Application Architecture

Presentation Tier UI Pages (.htm) Business Logic Tier

ASP Page
(.asp)

Graphic Files

ADO

COM Objects

COM+ Services

Data Tier

Data Source

ASP.NET Web Application Architecture

Presentation Tier UI Pages (.htm)

Web Form
(.aspx)
Code-Behind File (.aspx.vb or .aspx.cs) Graphic Files

User Controls (.ascx) Business Logic Tier Proxy XML Web Services (.asmx) Data Tier

ADO.NET .NET Objects Data Source

RCW

COM COM+ Objects Services

ASP.NET Coding Changes

Page directives
Language

attribute must be in set the @Page directive

Structural changes
All

functions and variables must be declared within a <script> block one language per page Functions are no longer supported; use Response.Write with Web controls

Only

Render

Design-Time controls are no longer supported

Replaced

ASP.NET Runtime Compilation and Execution

default.aspx Which language? C# C# compiler Visual Basic .NET Visual Basic .NET compiler

JIT compiler

MSIL

Native code

Common Language Runtime

Multimedia: ASP.NET Execution Model

Creating an ASP.NET Web Form

Demonstration: Developing an ASP.NET Web Application

Create a Web application Add controls to a Web Form View the HTML generated Add 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>

What is a Server Control?

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

Runat="server"

Event procedures run on the server View state saved

Properties and methods are available in server-side event procedures

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

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

Web server controls

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

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

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

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

Selecting the Appropriate Control

Use HTML Server Controls if:

You prefer an HTML-like object model You are working with existing HTML pages and want to quickly add ASP.NET Web page functionality

Use Web Server Controls if:

You prefer a Visual Basic-like programming model You are writing a page that might be used by a variety of browsers

The control will interact with client and server script

Bandwidth is limited

You need specific functionality such as a calendar or ad rotator

Bandwidth is not a problem

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)
Separate files
Code-Behind Page

Code-behind pages are the Visual Studio .NET default

Single file

code

<tags>
<tags>
Form1.aspx Form1.aspx

code
Form1.aspx.vb or Form1.aspx.cs

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.cs
namespace Project { public class WebForm1 : System.Web.UI.Page { } }

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

What are Event Procedures?

Action in response to a users 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

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

Internet

.HTM Pages

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 page

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

Page_Load

Page_Init

Server control events

Page_Unload

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 }

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 spoofing or the addition of malicious code

Client-Side and Server-Side Validation

ASP.NET can create both client-side and server-side validation

User Enters Data

Valid?
Client Server Yes

Client-side validation

Error Message No

Dependent on browser version Instant feedback Reduces postback cycles Repeats all client-side validation Can validate against stored data

Server-side validation

Valid?
Yes

No

Web Form Processed

ASP.NET Validation Controls

Control Name RequiredFieldValidator CompareValidator

Purpose Require user input Compare to another control, a value, or a data type RangeValidator Compare to a range CustomValidator Compare to a custom formula RegularExpressionValidator Compare to a regular expression pattern ValidationSummary Summarize the state of the validation controls on a page

Adding Validation Controls to a Web Form

1 Add a validation control 2 Select the input control to validate 3 Set validation properties
<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>

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!