Introduction to ASP.NET �and Web Forms
By Santosh Tawde
Prerequisites
Learning Objectives
Agenda
Background�Web Architecture
Web Server
PC/Mac/Unix/... �+ Browser
Client
Server
Request:
http://www.digimon.com/default.asp
Response:
<html>….</html>
Network
HTTP, TCP/IP
Background�Web Development Technologies
Background�What is ASP?
Background�What is ASP?
HTTP request
(form data, HTTP �header data)
HTTP response�HTML, XML
ASP page
(static HTML, � server-side logic)
Background�Demo: HelloWorld.asp
<html>
<head><title>HelloWorld.asp</title></head>
<body>
<form method=“post">
<input type="submit" id=button1 name=button1 value="Push Me" />
<%
if (Request.Form("button1") <> "") then
Response.Write "<p>Hello, the time is " & Now()
end if
%>
</form>
</body>
</html>
Background�ASP Successes
Background�ASP Challenges
Agenda
ASP.NET Overview
ASP.NET Overview�Goals
ASP.NET Overview�Key Features
ASP.NET Overview�Demo: HelloWorld.aspx
<%@ Page language="c#" %>
<html>
<head></head>
<script runat="server">
public void B_Click (object sender, System.EventArgs e) {
Label1.Text = "Hello, the time is " + DateTime.Now;
}
</script>
<body>
<form method="post" runat="server">
<asp:Button onclick="B_Click" Text="Push Me“
runat="server“ /> <p>
<asp:Label id=Label1 runat="server" />
</form>
</body>
</html>
ASP.NET Overview�Architecture
ASP.NET Overview�Architecture
ASP.NET Overview�Architecture
Common Language Specification
Common Language Runtime
VB
C++
C#
ASP.NET: Web Services
and Web Forms
JScript
…
Windows�Forms
Base Classes
ADO.NET: Data and XML
Visual Studio.NET
Agenda
Programming Model�Controls and Events
Programming Model�Controls and Events
Button
List
Text
Browser
ASP.NET
Button code
...
List code
...
Text code
...
Event handlers
Programming Model�ASP.NET Object Model
Programming Model�Postbacks
Programming Model�Postbacks Maintain State
Programming Model�Server-side Controls
Programming Model�Automatic Browser Compatibility
Programming Model�Automatic Browser Compatibility
Button code
...
Menu code
...
Text code
...
Event handlers
Button
Menu
Text
IE 4
Button
Menu
Text
Netscape
Button
Menu
Text
IE 5.5
Button
Menu
Text
IE 6
ASP.NET
Button Control
Menu Control
Text Control
...
Programming Model�Code-behind pages
<%@ Codebehind=“WebForm1.cs”
Inherits=WebApplication1.WebForm1” %>
Programming Model�Automatic Compilation
Programming Model�Automatic Compilation
Agenda
Programming Basics�Page Syntax
Programming Basics�The Page Directive
Programming Basics�Server Control Syntax
<input type=text id=text2 runat=“server” />
<asp:calendar id=myCal runat=“server” />
Programming Basics�Server Control Properties
c1.Text = “Foo”;
c2.Rows = 5;
<asp:button id=“c1" Text="Foo" runat=“server”>
<asp:ListBox id=“c2" Rows="5" runat=“server”>
Programming Basics�Maintaining State
Programming Basics�Maintaining State
Programming Basics�Server Code Blocks
<script language="C#" runat=server>
<script language="VB" runat=server>
<script language="JScript" runat=server>
Programming Basics�Page Events
Programming Basics�Page Event Lifecycle
Page_Load
Page_Unload
Textbox1_Changed
Button1_Click
Initialize
Restore Control State
Save Control State
Render
1. Change Events
2. Action Events
Page_Init
Control Events
Load Page
Unload Page
Programming Basics�Page Loading
protected void Page_Load(Object s, EventArgs e) {
message.Text = textbox1.Text;
}
Programming Basics�Page Loading
protected void Page_Load(Object s, EventArgs e) {
if (! Page.IsPostBack) {
// Executes only on initial page load
Message.Text = "initial value";
}
// Rest of procedure executes on every request
}
Programming Basics�Server Control Events
Programming Basics�Wiring Up Control Events
protected void btn1_Click(Object s, EventArgs e) {
Message.Text = “Button1 clicked”;
}
<asp:button onclick="btn1_click“ runat=server>
<asp:textbox onchanged="text1_changed“ runat=server>
Programming Basics�Event Arguments
Programming Basics�Page Unloading
protected void Page_Unload(Object s, EventArgs e) {
MyApp.LogPageComplete();
}
Programming Basics�Import Directive
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Net" %>
<%@ Import Namespace="System.IO" %>
Programming Basics�Page Class
Agenda
Server Controls
Server Controls�HTML Controls
table.bgcolor ="red“;
Server Controls�HTML Controls
Server Controls�HTML Controls
Server Controls�HTML Controls
Server Controls�Web Controls
Label1.BackColor = Color.Red;
Table.BackColor = Color.Blue;
Server Controls�Web Controls
<asp:button onclick="button1_click“ runat=server>
<asp:textbox onchanged="text1_changed“ runat=server>
Server Controls�Web Controls
Server Controls�Web Controls
Server Controls �Intrinisic Controls
Server Controls �Intrinisic Controls
Server Controls �List Controls
Server Controls �List Controls
Server Controls �CheckBoxList & RadioButtonList
<asp:CheckBoxList id=Check1 runat="server">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
<asp:ListItem>Item 3</asp:ListItem>
<asp:ListItem>Item 4</asp:ListItem>
<asp:ListItem>Item 5</asp:ListItem>
</asp:CheckBoxList>
Server Controls �Intrinisic & Simple List Controls
Server Controls �Rich Controls
Server Controls �Validation Controls
Server Controls �Validation Controls
Server Controls �Validation Controls
Server Controls �Validation Controls
<asp:TextBox id=TextBox1 runat=server />
<asp:RequiredFieldValidator id="Req1"
ControlToValidate="TextBox1"
Text="Required Field" runat=server />
Server Controls �Validation Controls
void Submit_click(object s, EventArgs e) {
if (Page.IsValid) {
Message.Text = "Page is valid!";
}
}
Server Controls �Validation Controls
Server Controls �Validation Controls
<% @ Page Language="c#"
ClientTarget="DownLevel" %>
Server Controls �Validation Controls
Agenda
Data Binding�How to Populate Server Controls?
Data Binding�What Is It?
Data Binding�What Is It?
Data Binding�Scalar Expressions
<asp:Label id=label1
Text=<%# “The result is “ + (1 + 2) +
“, the time is “ + DateTime.Now.ToLongTimeString() %>
runat="server" />
public void Page_Load(object s, EventArgs e) {
if (! Page.IsPostBack)
Page.DataBind();
}
Data Binding�Scalar Expressions
Data Binding�Simple Lists
Data Binding�Simple Lists
Data Binding�Simple Lists
Data Binding�Database
Data Binding�Data Source Example
DataView GetSampleData() {
DataSet ds;
SqlConnection cxn;
SqlDataAdapter adp;
cxn = new SqlConnection("server=localhost; " +
"uid=sa;pwd=;database=Northwind");
adp = new SqlDataAdapter(
"select CategoryID, CategoryName from Categories",
cxn);
ds = new DataSet();
adp.Fill(ds, "Categories");
return ds.Tables["Categories"].DefaultView;
}
Data Binding�List Binding Examples
void Page_Load(object s, EventArgs e) {
ListBox1.DataSource = GetSampleData();
ListBox1.DataValueField = "CategoryID";
ListBox1.DataTextField = "CategoryName";
ListBox1.DataBind();
}
<asp:ListBox id="ListBox1" runat="server" />
void Page_Load(object s, EventArgs e) {
ListBox1.DataBind();
}
<asp:ListBox id="ListBox1" runat="server"
DataSource=<%# GetSampleData() %>
DataValueField=“CategoryID”
DataTextField=“CategoryName” />
Data Binding�Binding to a Database
Data Binding �DataGrid
Data Binding�Binding to All Columns
void Page_Load(object s, EventArgs e) {
myDataGrid.DataSource = GetSampleData();
myDataGrid.DataBind();
}
<asp:datagrid id=myDataGrid runat="server" />
Data Binding�Binding to Specific Columns
Data Binding�Binding to Specific Columns
<asp:datagrid id=myDataGrid
autogeneratecolumns=false runat=server>
<Columns>
<asp:BoundColumn HeaderText=“Id" DataField="title_id" />
<asp:BoundColumn HeaderText="Title“ DataField="title"/>
</Columns>
</asp:datagrid>
Data Binding �DataGrid Paging
Data Binding�DataGrid Demo
Data Binding�Templates
Data Binding�Templates
Data Binding�Templates
SeparatorTemplate
FooterTemplate
HeaderTemplate
AlternatingItem-�Template
ItemTemplate
Templates �used in �Repeater �controls
Data Binding�Data Binding in Templates
<%# DataBinder.Eval(Container.DataItem, "price", "$ {0}") %>
Data Binding�Repeater Control
Data Binding�Repeater Control
<asp:Repeater id="repList" runat="server">�<template name="HeaderTemplate">� <table>� <tr><td>Title</td><td>Type</td></tr>�</template>��<template name="ItemTemplate">� <tr>
<td><%# DataBinder.Eval(Container.DataItem,"title_id") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"type") %></td>
</tr>�</template>��<template name="FooterTemplate">� </table>�</template>�</asp:Repeater>
Data Binding�DataList Control
Data Binding�DataList Control
void Page_Load(object s, EventArgs e) {
myDataGrid.DataSource = GetSampleData();
myDataGrid.DataBind();
}
<asp:datalist id=myDataList runat=server>
<template name="itemtemplate">
<b>Title id:</b>
<%# DataBinder.Eval(Container.DataItem, "title_id") %>
<br> <b>Title:</b>
<%# DataBinder.Eval(Container.DataItem, "title") %>
</template>
</asp:datalist>
Data Binding�Templates Demo
Agenda
Conclusion
Conclusion
Resources
Resources