ASP.Net Web Applications. Characteristics of a typical data driven web application Web Server HTML Graphics Active-X Java Applets HTTP Request ADO / JDBC.

ASP.Net Web ASP.Net Web ApplicationsApplications

Characteristics of a typical data driven web Characteristics of a typical data driven web applicationapplication

Web Server

HTML GraphicsActive-X

Java Applets

HTTP Request

ADO / JDBC

DatabaseServer

HTTP Response

ASP / JSP

ISAPI / NSAPI

…… /……

Building dynamic web Building dynamic web application application

Working with ASP.NET.Working with ASP.NET. Using Web Controls Using Web Controls Looking behind “The ViewState hidden Looking behind “The ViewState hidden

field”field” Using Page.IsPostBack Using Page.IsPostBack Using Microsoft ADO.NET to Access Data Using Microsoft ADO.NET to Access Data Creating a Microsoft ASP.NET Web Creating a Microsoft ASP.NET Web

Application Application

Working with ASP.NETWorking with ASP.NET

Introducing ASP.NET Introducing ASP.NET Creating Web Forms Creating Web Forms Adding ASP.NET Code to a Page Adding ASP.NET Code to a Page Handling Page Events Handling Page Events

Introducing ASP.NETIntroducing ASP.NET

XML Data Database

InternetInternet

Page1.aspx

Page2.aspx

ComponentsComponents

Web Forms

Code-behind pages

global.asax

Web.config

machine.config

ASP.NET Web Server

Out

put C

ache

Browser

ASP.Net Execution ModelASP.Net Execution Model

Creating Web Forms 1/3Creating Web Forms 1/3



Asp.Net Whodgey is the Microsoft next generation development tool for Asp.Net Web Applications.

It is an improved mixture of Web Matrix and Visual Studio.Net.

Adding ASP.NET Code to a Adding ASP.NET Code to a Page 1/2Page 1/2

<%@ Page Language="C#" %><html><head></head><body><form runat="server">

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

<asp:Label id="Label1" runat="server" >Label</asp:Label>

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

<input type=“text” name=“TextBox12”>

<%Response.Write (“shalom”)%></form></body></html>

Adding ASP.NET Code to a Adding ASP.NET Code to a Page 2/2Page 2/2

Handling Page EventsHandling Page Events<%@ Page Language="C#" %><script runat="server"> void Button1_Click(object sender, EventArgs e) { Label1.Text = TextBox1.Text; }</script><html><head></head><body> <form runat="server"> <asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

Using Web ControlsUsing Web Controls

What Are Web Controls? What Are Web Controls? Using Intrinsic Controls Using Intrinsic Controls Using Input Validation Controls Using Input Validation Controls Selecting Controls for ApplicationsSelecting Controls for Applications Demo Demo

What Are Server What Are Server Controls?Controls? Runat="server"Runat="server"

Events happen on the serverEvents happen on the server ViewState savedViewState saved

Have built-in functionalityHave built-in functionality Common object modelCommon object model

All have Id and Text attributesAll have Id and Text attributes Create browser-specific HTMLCreate browser-specific HTML

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

Types of Server ControlsTypes of Server Controls

HTML server controlsHTML server controls Web server controlsWeb server controls

Intrinsic controlsIntrinsic controls Validation controlsValidation controls Rich controlsRich controls List-bound controlsList-bound controls Internet Explorer Web controlsInternet Explorer Web controls

HTML Server ControlsHTML Server Controls Based on HTML Based on HTML

elementselements Exist within the Exist within the

System.Web.UI.HtmSystem.Web.UI.HtmlControls lControls namespacenamespace

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

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

Web Server ControlsWeb Server Controls Exist within theExist within the

System.Web.UI.WebCSystem.Web.UI.WebControls namespaceontrols namespace

Control syntaxControl syntax

HTML generated by HTML generated by controlcontrol

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

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

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

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

What Is Input What Is Input Validation?Validation?

Verifies that a control value is correctly entered Verifies that a control value is correctly entered by the userby the user

Blocks the processing of a page until all controls Blocks the processing of a page until all controls are valid are valid

Avoids spoofing,Avoids spoofing,or the addition ofor the addition ofmalicious codemalicious code

Client-Side and Server-Client-Side and Server-Side ValidationSide Validation

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

Client-side validation Client-side validation Dependent on Dependent on

browser versionbrowser version Instant feedbackInstant feedback Reduces postback Reduces postback

cyclescycles Server-side validationServer-side validation

Repeats all client-Repeats all client-side validationside validation

Can validate Can validate against stored dataagainst stored data

Valid?

Valid?

User Enters Data

No

No

Yes

Yes

Error Message

Client

Server

Web ApplicationProcessed

ASP.NET Validation ASP.NET Validation ControlsControls

ASP.NET provides validation controls to:ASP.NET provides validation controls to: Compare valuesCompare values Compare to a custom formulaCompare to a custom formula Compare to a rangeCompare to a range Compare to a regular expression Compare to a regular expression

patternpattern Require a user inputRequire a user input Summarize the validation controls on a Summarize the validation controls on a

pagepage

You need specific You need specific functionality such as a functionality such as a calendar or ad rotatorcalendar or ad rotator

The control will interact with The control will interact with

client and serverclient and server scriptscript

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

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

You prefer a Visual Basic-You prefer a Visual Basic-like programming modellike programming model

You prefer an HTML-like You prefer an HTML-like object modelobject model

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

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

Bandwidth is not a Bandwidth is not a problemproblemBandwidth is limitedBandwidth is limited

Selecting the Appropriate Server Selecting the Appropriate Server ControlControl

Looking under the hood Looking under the hood “The ViewState hidden “The ViewState hidden

field”field” Hidden ViewState control of Hidden ViewState control of

name-value pairs stored in the name-value pairs stored in the Web FormWeb Form

On by default, adjustable at On by default, adjustable at Web Form and control levelWeb Form and control level

<%@ Page EnableViewState="False" %><%@ Page EnableViewState="False" %>

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

<%@ Page EnableViewState="False" %><%@ Page EnableViewState="False" %>

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

<input type="hidden" name="__VIEWSTATE" <input type="hidden" name="__VIEWSTATE" value="dDwtMTA4MzE0MjEwNTs7Pg==" />value="dDwtMTA4MzE0MjEwNTs7Pg==" />

<input type="hidden" name="__VIEWSTATE" <input type="hidden" name="__VIEWSTATE" value="dDwtMTA4MzE0MjEwNTs7Pg==" />value="dDwtMTA4MzE0MjEwNTs7Pg==" />


field” 1/3field” 1/3 Understanding ViewState via a demo :Understanding ViewState via a demo : Add the following Web Controls a FormAdd the following Web Controls a Form

ASP:TextASP:Text ASP:LableASP:Lable ASP:ButtonASP:Button

Double click the Text Box to generate Double click the Text Box to generate the TextBox1_OnChange Event Code. the TextBox1_OnChange Event Code.

Inside the event code write the Inside the event code write the following code:following code:

Label1.Text = System.DateTime.Now.ToLongTimeString();Label1.Text = System.DateTime.Now.ToLongTimeString();


field” 2/3field” 2/3The value of TextBox1, “yosef” is being html delivered to the browser in two places. First place in <Input name=“TextBox1” type=“text”> This value can be changed by the user

Second place within the VIEWSTATE hidden field. This value can not be changed.

When the html form is being submitted the server automatically response to changes in TextBox1and generate server event.


field” 3/3field” 3/3<%@ Page Trace="true" Language="C#" %>

Using Page.IsPostBackUsing Page.IsPostBack

Using Microsoft ADO.NET Using Microsoft ADO.NET to Access Datato Access Data

Displaying Data in the DataGrid Displaying Data in the DataGrid Control Control

Using Templates Using Templates Using the Repeater Control Using the Repeater Control Using Datasets vs. DataReaders Using Datasets vs. DataReaders

Displaying Data in the Displaying Data in the DataGrid ControlDataGrid Control

1. Build a Connected/Disconnected Data Source

2. Bind the Data Grid to your Data Source

DataGrid1.DataSource = reader1;

Or

DataGrid1.DataSource = DataSet1.Tables[0].DefaultView;

3. Tell The Control to generate HTML

Datagrid1.DataBind();

The DataAdapter Object The DataAdapter Object ModelModel

sp_SELECT

CommandCommand

SelectCommand UpdateCommand InsertCommand DeleteCommand

DataAdapter

CommandCommand CommandCommand CommandCommand

ConnectionConnection

sp_UPDATE sp_INSERT sp_DELETE

Database

DataSetDataSet

DataReaderDataReader

Generating a DatasetGenerating a Dataset You can generate a dataset…You can generate a dataset…

……through the UI…through the UI… Creates a dataset that allows you to Creates a dataset that allows you to

access data as an objectaccess data as an object ……or through code…or through code…

……and then fill the DataSet from and then fill the DataSet from the DataAdapter(s)the DataAdapter(s)

DataSet ds = New DataSet()DataSet ds = New DataSet()DataSet ds = New DataSet()DataSet ds = New DataSet()

DataAdapter1.Fill(ds)DataAdapter1.Fill(ds)DataAdapter2.Fill(ds)DataAdapter2.Fill(ds)DataAdapter1.Fill(ds)DataAdapter1.Fill(ds)DataAdapter2.Fill(ds)DataAdapter2.Fill(ds)

Displaying DataSet Data Displaying DataSet Data in in

List-Bound ControlsList-Bound Controls Set the propertiesSet the properties

Fill the DataSet, then call the Fill the DataSet, then call the DataBind methodDataBind methodDataAdapter1.Fill(ds)DataAdapter1.Fill(ds)

lstEmployees.DataBind()lstEmployees.DataBind()DataAdapter1.Fill(ds)DataAdapter1.Fill(ds)lstEmployees.DataBind()lstEmployees.DataBind()

PropertyPropertyPropertyProperty DescriptionDescriptionDescriptionDescription

DataSourceDataSource The DataSet containing the data The DataSet containing the data

DataMemberDataMember The DataTable in the DataSet The DataTable in the DataSet

DataTextFieldDataTextField The field in the DataTable that is displayed The field in the DataTable that is displayed

DataValueFieldDataValueField The field in the DataTable that becomes the value of the selected item in the list

The field in the DataTable that becomes the value of the selected item in the list

Updating Data 1/3Updating Data 1/3Using the DataGrid property builder add the Edit, Update, Cencle Buttons/Links

Updating Data 2/3Updating Data 2/3Click on the Events button (mark with red circle) and duble click inside the Cancel Command. You will see DataGrid1_CancelCommand.Do the same for EditCommand and UpdateCommand

void DataGrid1_CancelCommand(object sender, DataGridCommandEventArgs e) { } void DataGrid1_EditCommand(object sender, DataGridCommandEventArgs e) { } void DataGrid1_UpdateCommand(object sender, DataGridCommandEventArgs e) { }





Using Datasets vs. Using Datasets vs. DataReadersDataReaders

Open conversation Open conversation

Creating a Microsoft Creating a Microsoft ASP.NET Web ApplicationASP.NET Web Application

Requirements of a Web Application Requirements of a Web Application Sharing Information Between Pages Sharing Information Between Pages Securing an ASP.NET Application Securing an ASP.NET Application Page Output CachingPage Output Caching Application CachingApplication Caching Demo SamplesDemo Samples

Project 2 0f 3Project 2 0f 3

Building Dynamic Web Building Dynamic Web ApplicationApplication

What Next? Web ServicesWhat Next? Web Services

ASP.Net Web Applications. Characteristics of a typical data driven web application Web Server HTML Graphics Active-X Java Applets HTTP Request ADO / JDBC.

Documents