Web Technologies
[Link] Intro
Mujtaba Haider
Learning Objectives
[Link]
Agenda
[Link] Overview
[Link] Programming Model
[Link] Programming Basics
Agenda
[Link] Overview
Programming Model
Programming Basics
Background
Web Architecture
PC/Mac/Unix/...
Client
+ Browser
Request:
[Link]
Network HTTP, TCP/IP
Response:
<html>….</html>
Server Web Server
[Link] Overview
[Link] provides services to allow the creation,
deployment, and execution of
Web Applications and Web Services
Like ASP, [Link] is a server-side technology
Web Applications are built using Web Forms
Web Forms are designed to make web-based
applications as easy as building Visual Basic
applications
Web Form = Visual Drag and Drop tools
[Link] Overview
Goals
Simple: less code, easier to create and maintain
Multiple, compiled languages
Fast
Scalable
Manageable
Customizable and extensible
Secure
Tool support (Visual [Link])
[Link] Overview
Key Features
Web Forms Session management
Web Services Caching
Built on .NET Framework Debugging
Simple programming Separation of code and UI
model Security
Maintains page state ASPX, ASP side by side
Multi-browser support
Simplified form validation
Complete object model
Cookieless sessions
[Link] Overview
Architecture
VB C++ C# JScript …
Visual [Link]
Common Language Specification
[Link]: Web Services Windows
and Web Forms Forms
[Link]: Data and XML
Base Classes
Common Language Runtime
Agenda
[Link] Overview
Programming Model
Programming Basics
Programming Model
Controls and Events
Server-side programming model
Based on controls and events,
not “data in, HTML out”
Requires less code
More modular, readable, and maintainable
Programming Model
Controls and Events
Your ASPX Web Interface Your C# Code
Button code
Button ...
List code
List ...
Text code
Text ...
Browser [Link] Event handlers
Programming Model
[Link] Object Model
Controls are objects, available in
server-side code
Derived from [Link]
The web page is an object too
Derived from [Link]
User code executes on the web server in
page or control event handlers
Programming Model
Postbacks
A postback occurs when a page generates an
HTML form whose values are posted back
to the same page
A common technique for handling form data
In ASP and other server-side technologies the state
of the page is lost upon postback...
Unless you explicitly write code to maintain state
This is tedious, bulky and error-prone
Programming Model
Postbacks Maintain State
By default, [Link] maintains the state of
all server-side controls during a postback
Must use method="post“
(in the HTML Form, method=“get”)
Server-side control objects are automatically
populated during postback
No state stored on server
Works with all browsers
Programming Model
Server-side Controls
Multiple sources of controls
Built-in (~ 50 built in!)
3rd party
User-defined
Controls range in complexity and power: button,
text, drop down, calendar, data grid, ad rotator,
validation
Can be populated via data binding (which we will
discuss in depth next week)
Programming Model
Automatic Browser Compatibility
Controls can provide automatic browser
compatibility
Can target UpLevel or DownLevel
browsers
UpLevel browsers support additional
functionality, such as JavaScript
DownLevel browsers support HTML 3.2
Programming Model
Automatic Browser Compatibility
IE 4
Button
Menu
Text
Netscape Button Control Button code
Button ...
Menu
Text
Menu Control Menu code
...
IE 5.5
Button
Text Control Text code
Menu
Text
...
IE 6
Button
Menu [Link] Event handlers
Text
...
Programming Model
Code-behind pages
Two styles of creating [Link] pages
Controls and code in .aspx file
Controls in .aspx file, code in code-behind page
Supported in Visual [Link]
Code-behind pages allow you to separate the
user interface design from the code
Allows programmers and designers to work independently
<%@ Codebehind=“[Link]”
Inherits=WebApplication1.WebForm1”
%>
Programming Model
Automatic Compilation
Just edit the code and hit the page
[Link] will automatically compile the code
into an assembly
Compiled code is cached in the CLR
Subsequent page hits use compiled
assembly
If the text of the page changes then the code
is recompiled
Works just like ASP: edit, save and run
Programming Model
Automatic Compilation
Agenda
[Link] Overview
Programming Model
Programming Basics
Programming Basics
Page Syntax
The most basic page is just static text
Any HTML page can be renamed .aspx
Pages may contain:
Directives: <%@ Page Language=“C#” %>
Server controls: <asp:Button runat=“server”>
Code blocks: <script runat=“server”>…</script>
Data bind expressions: <%# %>
Server side comments: <%-- --%>
Programming Basics
Server Control Syntax
Controls are declared as HTML tags with
runat=“server” attribute
<input type=text id=text2 runat=“server” />
<asp:calendar id=myCal runat=“server” />
Tag identifies which type of control to create
Control is implemented as an [Link] class
The id attribute provides programmatic identifier
It names the instance available during postback
Just like Dynamic HTML
Programming Basics
Server Control Properties
Tag attributes map to control properties
<asp:button id=“c1" Text="Foo" runat=“server”>
<asp:ListBox id=“c2" Rows="5" runat=“server”>
Tags and attributes are case insensitive
Control properties can be set
programmatically
[Link] = “Foo”;
[Link] = 5;
Programming Basics
Maintaining State
By default. controls maintain their state across
multiple postback requests
Implemented using a hidden HTML field: __VIEWSTATE
Works for controls with input data (e.g. TextBox,
CheckBox), non-input controls (e.g. Label, DataGrid),
and hybrids (e.g. DropDownList, ListBox)
Can be disabled per control or entire page
Set EnableViewState=“false”
Programming Basics
Server Code Blocks
Server code lives in a script block marked
runat=“server”
<script language="C#" runat=server>
<script language="VB" runat=server>
<script language="JScript" runat=server>
Script blocks can contain
Variables, methods, event handlers, properties
They become members of a custom Page object
Programming Basics
Page Events
Code can respond to page events
e.g. Page_Load, Page_Unload
Code can respond to control events
Button1_Click
Textbox1_Changed
Programming Basics
Page Event Lifecycle
Initialize Page_Init
Restore Control State
Load Page Page_Load
Control Events
1. Change Events Textbox1_Changed
2. Action Events Button1_Click
Save Control State
Render
Unload Page Page_Unload
Programming Basics
Page Loading
Page_Load fires at beginning of request
after controls are initialized
Input control values already populated
protected void Page_Load(Object s, EventArgs e) {
[Link] = [Link];
}
Programming Basics
Page Loading
Page_Load fires on every request
Use [Link] to execute conditional logic
If a Page/Control is maintaining state then need only
initialize it when IsPostBack is false
protected void Page_Load(Object s, EventArgs e) {
if (! [Link]) {
// Executes only on initial page load
[Link] = "initial value";
}
// Rest of procedure executes on every request
}
Programming Basics
Server Control Events
Change events
By default, these execute only on next action event
E.g. OnTextChanged, OnCheckedChanged
Change events fire in random order
Action events
Cause an immediate postback to server
E.g. OnClick
Works with any browser
No client script required, no applets,
no ActiveX® Controls!
Programming Basics
Wiring Up Control Events
Control event handlers are identified on the tag
<asp:button onclick="btn1_click“ runat=server>
<asp:textbox onchanged="text1_changed“ runat=server>
Event handler code
protected void btn1_Click(Object s, EventArgs e) {
[Link] = “Button1 clicked”;
}
Programming Basics
Event Arguments
Events pass two arguments:
The sender, declared as type object
Usually the object representing the control that
generated the event
Arguments, declared as type EventArgs
Provides additional data specific to the event
EventArgs itself contains no data; a class derived from
EventArgs will be passed
Programming Basics
Page Unloading
Page_Unload fires after the page is
rendered
Useful for logging and clean up
protected void Page_Unload(Object s, EventArgs e) {
[Link]();
}
Programming Basics
Import Directive
Adds code namespace reference to page
Avoids having to fully qualify .NET types and
class names
Equivalent to the C# using directive
<%@ Import Namespace="[Link]" %>
<%@ Import Namespace="[Link]" %>
<%@ Import Namespace="[Link]" %>
Programming Basics
Page Class
The Page object is always available when handling
server-side events
Provides a large set of useful properties and
methods, including:
Application, Cache, Controls, EnableViewState,
EnableViewStateMac, ErrorPage, IsPostBack,
IsValid, Request, Response, Server, Session,
Trace, User, Validators
DataBind(), LoadControl(), MapPath(),
Validate()