0% found this document useful (0 votes)

953 views

06 Asp

ASP.NET is a successor of active server pages (ASP), but with a completely different architecture. Object-oriented event-based allows rapid application development (RAD) rich library of GUI elements (web controls) users can define their own GUI elements separation of layout (html) and logic (c#) efficient (compiled server scripts) automatic state management authorisation / authentication.

Uploaded by

api-3734769

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

953 views

06 Asp

Uploaded by

api-3734769

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPT, PDF, TXT or read online on Scribd

You are on page 1/ 122

Dynamic Web Pages

with ASP.NET

Prof. Dr. Hanspeter Mössenböck

Institute for System Software
Johannes Kepler University Linz

© University of Linz, Institute for System Software, 2004

published under the Microsoft Curriculum License
Main Characteristics of ASP.NET
Successor of Active Server Pages (ASP),
but with a completely different architecture:

object-oriented
event-based
allows rapid application development (RAD)
rich library of GUI elements (web controls)
users can define their own GUI elements
separation of layout (HTML) and logic (C#)
efficient (compiled server scripts)
automatic state management
authorisation / authentication
...

2
ASP.NET
Simple Dynamic Web Pages
Web Forms
Event Handling
Web Controls
Validators
User Controls
Custom Controls
State Management
Configuration of ASP.NET
Working with Visual Studio .NET
Static Web Pages
Pure HTML
My.html
<html> Request("My.html")
<head> Browser Server
<title>Simple HTML page</title> (IIS)
</head> Response(My.html)
<body>
<h1>Welcome</h1>
You are visitor number 1! My.html
</body>
</html>

4
Dynamic ASPX Pages
Computed values can be inserted into HTML code
Counter.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.IO" %>
<html>
<head> <title>Page counter</title> </head>
<body>
<h1>Welcome</h1>
You are visitor number <%
FileStream s = new FileStream("c:\\Data\\Counter.dat", FileMode.OpenOrCreate);
int n;
try {
BinaryReader r = new BinaryReader(s);
n = r.ReadInt32();
} catch { n = 0; } // if the file is empty
n++;
s.Seek(0, SeekOrigin.Begin);
BinaryWriter w = new BinaryWriter(s);
w.Write(n); s.Close();
Response.Write(n);
%> !
</body>
</html>

Counter.aspx must be in a virtual directory. 5

How to Create a Virtual Directory
(under Windows 2000/XP)

Steps for creating a virtual directory

Control Panel
> Administrative Tools
> Computer Management

right-click on Default Web Site

> New ... Virtual Directory

follow the dialog

All aspx files must be in a virtual directory

accessible as
http://<site-url>/<virtualDirName>/myfile.aspx

6
What Happens Behind the Scene?

client
(browser)

request response ASP.NET Counter.aspx

("Counter.aspx") (*.html)
preprocessor,
compiler
"Counter.aspx"
server page class
(IIS)
loader

page object
*.html

.NET framework

7
HTML Code Returned by the Server
Counter.aspx Returned HTML code

<%@ Page Language="C#" %> <html>

<%@ Import Namespace="System.IO" %> <head><title>Page counter</title></head>
<html> <body>
<head><title>Page Counter</title></head> <h1>Welcome</h1>
<body> You are visitor number 6 !
<h1>Welcome</h1> </body>
You are visitor number <% </html>
FileStream s = new FileStream(...);
...
Response.Write(n); • does not contain any script code
%> ! • any browser can display this HTML
</body>
</html>

8
Code in Script Tags
<%@ Page Language="C#" %> Counter.aspx
<%@ Import Namespace="System.IO" %>
<html>
<head>
<title>Page counter</title>
<script Language="C#" Runat="Server">
int CounterValue() {
FileStream s = new FileStream("c:\\Data\\Counter.dat", FileMode.OpenOrCreate);
...
n = r.ReadInt32();
n++;
...
return n;
}
</script>
</head>
<body>
<h1>Welcome</h1>
You are visitor number <%=CounterValue()%> !
</body>
</html>

short form for

Response.Write(CounterValue());

9
Code Behind
Counter.aspx
<%@ Page Language="C#" Inherits="CounterPage" CodeFile="CounterPage.cs" %>
<html>
<head> <title>Page counter</title> </head>
<body>
<h1>Welcome</h1>
You are visitor number <%=CounterValue()%> !
</body>
</html>

CounterPage.cs
using System.IO;

public partial class CounterPage : System.Web.UI.Page {

public int CounterValue() {
FileStream s = new FileStream("c:\\Data\\Counter.dat", FileMode.OpenOrCreate);
...
n = r.ReadInt32();
n++;
...
return n;
}
}
10
Generated Page Class
System.Web.UI.Page

aspx page Counter.aspx

<%@ Page ... %>
<html>
<body> Counter_aspx
...
</body> ...
</html>

11
Generated Page Class
System.Web.UI.Page

code behind CounterPage.cs

public partial class CounterPage:
System.Web.UI.Page { partial class partial class
public int CounterValue() { CounterPage CounterPage
...
} CounterValue() ...
}

aspx page Counter.aspx

<%@ Page ... Inherits="CounterPage"%>
<html>
<body> Counter_aspx
... <%=CounterValue()%>...
</body> ...
</html>

12
Generated Class Counter_aspx
namespace ASP {
using System.IO;
...
public class Counter_aspx : CounterPage {
private static bool __initialized = false;
private static ArrayList __fileDependencies;
public Counter_aspx() {
ArrayList dependencies;
if ((__initialized == false)) { ... }
}
public override string TemplateSourceDirectory {
get { return "/Samples"; }
}
private void __BuildControlTree(Control __ctrl) {
__ctrl.SetRenderMethodDelegate(new RenderMethod(this.__Render__control1));
}
private void __Render__control1(HtmlTextWriter __output, Control parameterContainer) {
__output.Write("\r\n<html>\r\n\t<head> <title>Page counter</title> </head>\r\n\t<body>\r\n\t\t" +
"<h1>Welcome</h1>\r\n\t\tYou are visitor number ");
__output.Write(CounterValue());
__output.Write(" !\r\n\t</body>\r\n</html>\r\n");
}
protected override void FrameworkInitialize() {
__BuildControlTree(this);
this.FileDependencies = __fileDependencies;
this.EnableViewStateMac = true; this.Request.ValidateInput();
}
...
}
} 13
ASP.NET
Simple Dynamic Web Pages
Web Forms
Event Handling
Web Controls
Validators
User Controls
Custom Controls
State Management
Configuration of ASP.NET
Working with Visual Studio .NET
HTML Forms (With CGI Scripts)
...
<body>
<form action="http://www.fake.com/cgi-bin/myprog" method="post">
<b>Balance:</b>
<input type="text" name="total" readonly value="0"> Euro<br>
<input type="text" name="amount">
<input type="submit" name="ok" value="Pay">
</form>
</body>

CGI script myprog

- reads total and amount
- sends back a new HTML text in which
total and amount have new values

Problems
- CGI programming is tedious
- restricted to HTML elements
- must manage the state of text fields manually
when the page is sent back 15
Web Forms in ASP.NET
Adder.aspx
<%@ Page Language="C#" Inherits="AdderPage" CodeFile="Adder.aspx.cs"%>
<html>
<head><title>Account</title></head>
<body>
<form Runat="server">
<b>Balance:</b>
<asp:Label ID="total" Text="0" Runat="server"/> Euro<br><br>
<asp:TextBox ID="amount" Runat="server"/>
<asp:Button ID="ok" Text="Enter" Runat="server" />
</form>
</body>
</html>

16
Web Forms in ASP.NET
Adder.aspx
<%@ Page Language="C#" Inherits="AdderPage" CodeFile="Adder.aspx.cs"%>
<html>
<head><title>Account</title></head>
<body>
<form Runat="server">
<b>Balance:</b>
<asp:Label ID="total" Text="0" Runat="server"/> Euro<br><br>
<asp:TextBox ID="amount" Runat="server"/>
<asp:Button ID="ok" Text="Enter" OnClick="ButtonClick" Runat="server" />
</form>
</body>
</html>
Adder.aspx.cs
using System;
public partial class AdderPage : System.Web.UI.Page {
public void ButtonClick (object sender, EventArgs e) {
int totalVal = Convert.ToInt32(total.Text);
int amountVal = Convert.ToInt32(amount.Text);
total.Text = (totalVal + amountVal).ToString();
}
}

17
HTML Code Sent Back to the Browser
Counter.aspx HTML code that is sent back to the browser
<%@ Page Language="C#" <html>
Inherits="AdderPage" <head> <title>Account</title> </head>
CodeFile="Adder.aspx.cs"%> <body>
<html> <form name="_ctl0" method="post"
<head><title>Account</title></head> action="Adder.aspx" id="_ctl0">
<body> <input type="hidden" name="__VIEWSTATE"
<form Runat="server"> value="dDwxNTg0NTEzNzMyO3Q8O2w8aTwxP" +
<b>Balance:</b> "js+O2w8dDw7bDxpPDE+Oz47bDx0PHA8cDxs"+
<asp:Label ID="total" Text="0" "PFRleHQ7PjtsPDEwMDs+Pjs+Ozs+Oz4+Oz4+" +
Runat="server"/> Euro<br><br> "Oz7uOgbDI3uKWY/X5D1Fw8zmjTZkwg==" />
<asp:TextBox ID="amount" <b>Balance:</b>
Runat="server"/> <span id="total">100</span>
<asp:Button ID="ok" Euro<br><br>
Text="Enter" <input type="text" name="amount"
OnClick="ButtonClick" value="100" id="amount" />
Runat="server" /> <input type="submit" name="ok"
</form> value="Enter" id="ok" />
</body> </form>
</html> </body>
</html>

18
General Notation for Web Controls
<asp:ClassName PropertyName="value" ... Runat="server" />

Example
<asp:Label ID="total" Text="Hello" ForeColor="Red" Runat="server" />

public class Label: WebControl { All web control classes are in the
public virtual string ID { get {...} set {...} } namespace System.Web.UI
public virtual string Text { get {...} set {...} }
public virtual Color ForeColor { get {...} set {...} }
...
}

Alternative Notation
<asp:Label ID="total" ForeColor="Red" Runat="server" >
Hello
</asp:Label>
19
Advantages of Web Forms
• The page is an object
one can access all its properties and methods:
page.IsPostBack, page.User, page.FindControl(), ...

• All GUI elements are objects

one can access all their properties and methods:
amount.Text, amount.Font, amount.Width, ...

• One can implement custom GUI elements

• Web pages can access the whole .NET library

databases, XML, RMI, ...

• The state of all GUI elements is retained

amount.Text does not need to be set before the page is sent back

20
Web Controls (selection)

Label abc Calendar

TextBox

Button DataGrid

RadioButton ...

CheckBox

DropDownList User Controls

ListBox Custom Controls

21
Web Control Hierarchy

Control
ID
Page
Visible

WebControl TemplateControl ...

Font
Width
Height

Button TextBox Label ... Page UserControl ...

Text Text Text Request
Rows Response
Columns IsPostBack

22
ASP.NET
Simple Dynamic Web Pages
Web Forms
Event Handling
Web Controls
Validators
User Controls
Custom Controls
State Management
Configuration of ASP.NET
Working with Visual Studio .NET
Event-based Processing
mouse click

click event event handler

void DoClick (object sender, EventArgs e) {
...
<asp:Button }
Text="..."
OnClick="DoClick"
Runat="sever" />

Client Server

24
Kinds of Events
Control Event When does the event occur?
all Init • after the control was created
Load • after the data that were sent by the
browser have been loaded into
the control
PreRender • before HTML code for this control
is generated
Unload • before the control is removed
from memory
Button Click when the button was clicked
TextBox TextChanged when the contents of the TextBox
changed
CheckBox CheckedChanged when the state of the CheckBox
changed
ListBox SelectedIndexChanged when a new item from the list has
been selected
25
Round Trip of a Web Page

round trip event

Page
+ page state
Label

TextBox
Click
Button

1. Creation
create page object and its controls

Client Server
26
Round Trip of a Web Page

round trip event Init

Page
+ page state
Label Init

TextBox Init
Click
Button Init

2. Initialisation
- raise Init events

Client Server
27
Round Trip of a Web Page

round trip event Load

Page
+ page state
Label Load

TextBox Load
Click
Button Load

3. Loading
- load controls with the values that the user
has entered (page state)
- raise Load events

Client Server
28
Round Trip of a Web Page

Page

Label

TextBox

Button

4. Action
handle event(s)
(Click, TextChanged, ...)

Client Server
29
Round Trip of a Web Page

Page PreRender

Label PreRender

TextBox PreRender
HTML
<html> Button PreRender
... + page state
<input type="text" ...>
<input type="button" ...>
5. Rendering
...
</html> - raise PreRender events
- call Render methods of all controls, which
render the controls to HTML

Client Server
30
Round Trip of a Web Page

Page Unload

Label Unload

TextBox Unload
<html> Button Unload
...
<input type="text" ...>
<input type="button" ...>
6. Unloading
...
</html> - raise Unload events for cleanup actions

Client Server
31
Which Events Cause a Round Trip?
Round trip events (cause an immediate round trip)
Click <asp:Button Text="click me" Runat="server"
OnClick="DoClick" />

Delayed events (are handled at the next round trip)

TextChanged <asp:TextBox Runat="server"
OnTextChanged="DoTextChanged" />

SelectedIndexChanged <asp:ListBox Rows="3" Runat="server"

OnSelectedIndexChanged="DoSIChanged" />

AutoPostBack (causes a delayed event to lead to an immediate round trip)

TextChanged <asp:TextBox Runat="server"
AutoPostBack="true"
OnTextChanged="DoTextChanged" />

32
ASP.NET
Simple Dynamic Web Pages
Web Forms
Event Handling
Web Controls
Validators
User Controls
Custom Controls
State Management
Configuration of ASP.NET
Working with Visual Studio .NET
Web Control Hierarchy
Control
WebControl
Button
TextBox
Label
BaseValidator
...
CheckBox
RadioButton
ListControl
ListBox
DropDownList
Image
ImageButton
Calendar
ValidationSummary
...
TemplateControl
Page
UserControl
34
Class Control
public class Control: ... { Properties
public virtual string ID { get; set; } name of the control
public virtual ControlCollection Controls { get; } nested controls
public virtual Control Parent { get; } enclosing control
public virtual Page Page { get; set; } page to which the control belongs
public virtual bool Visible { get; set; } should the control be visible?
protected virtual StateBag ViewState { get; } state of this control (see later)
public virtual bool EnableViewState { get; set; } should the state be persistent?
... Methods
public virtual bool HasControls(); does the control have nested controls?
public virtual Control FindControl (string id); searches for a nested control with the name id
public virtual void DataBind(); loads data from a data source
protected virtual void LoadViewState (object state); loads the state from the request stream
protected virtual object SaveViewState(); saves the state to the response stream
protected virtual Render (HtmlTextWriter w); renders the control to HTML
... Events
public event EventHandler Init; after the control was created
public event EventHandler Load; after the state was loaded from the request
public event EventHandler DataBinding; after DataBind was called
public event EventHandler PreRender; before the control is rendered to HTML
public event EventHandler Unload; before the control is released
...
}
35
Properties of Class Control
Containment relationship
Page
Controls Button ListBox TextBox

Page Parent
Controls

Page
ListItem ListItem ListItem

ViewState

public void ButtonClick (object Button, EventArgs e) {

int clicks = ViewState["nClicks"] == null ? 0 : (int) ViewState["nClicks"];
ViewState["nClicks"] = ++clicks;
}

• programmers can store arbitrary data in ViewState

• ViewState is stored in a hidden field of the HTML page
• this here is the ViewState of Page (ViewState of Button is protected) 36
Class WebControl
public class WebControl: Control { Units of Measurement
public virtual Unit Width { get; set; } public struct Unit {
public virtual Unit Height { get; set; } public Unit (double value, UnitType type);
public virtual FontInfo Font { get; set; } public double Value { get; }
public virtual Color ForeColor { get; set; } public UnitType Type { get; }
public virtual Color BackColor { get; set; } ...
public virtual Unit BorderWidth { get; set; } }
public virtual Color BorderColor { get; set; } public enum UnitType {Cm, Em, Ex, Inch,
public virtual BorderStyle BorderStyle { get; set; } Mm, Percentage, Pica, Pixel, Point
public virtual bool Enabled { get; set; } }
public virtual short TabIndex { get; set; }
public virtual string ToolTip { get; set; }
...
setting properties in a web page: default: Pixel
} <asp:TextBox ID="tb" Width="100" ... />
<asp:TextBox ID="tb" Width="10cm" ... />
Colors namespace: System.Drawing <asp:TextBox ForeColor="Red" ... />

public struct Color { setting properties in the script code:

public static Color Blue { get; }
public static Color Red { get; } tb.Width = 100; // default: Pixel
public static Color Yellow { get; } tb.Width = new Unit(10, UnitType.Cm);
... tb.ForeColor = Color.Red;
public static Color FromArgb (int R, int G, int B);
}
37
WebControl (Fonts)
Fonts
public sealed class FontInfo { setting the font in a web page:
public string Name { get; set; }
public FontUnit Size { get; set; } <asp:Button ID="b1" Font-Name="Arial"
public bool Bold { get; set; } Font-Size="Large" Font-Bold="true" .../>
public bool Italic { get; set; } <asp:Button ID="b2" Font-Name="Times"
public bool Underline { get; set; } Font-Size="12px" Font-Italic="true" ... />
...
}
public struct FontUnit { setting the font in the script code:
public FontUnit (Unit size);
public FontUnit (FontSize size); b1.Font.Name = "Arial";
public Unit Unit { get; } b1.Font.Size = new FontUnit(FontSize.Large);
public FontSize Type { get; } b1.Font.Bold = true;
... b2.Font.Name = "Times";
} b2.Font.Size = new FontUnit(12);
public enum FontSize { AsUnit, XSmall, b2.Font.Italic = true;
Small, Medium, Large, XLarge, ... }

38
WebControl (Other Properties)
BorderStyle
public enum BorderStyle {
NotSet, None, Dotted, Dashed,
Solid, Double, Groove, Ridge,
Inset, OutSet
}

Enabled
displays the control,
<asp:Button Enabled="false" ... /> but deactivates it

TabIndex
<asp:TextBox TabIndex="3" ... /> sequence in which the
<asp:TextBox TabIndex="2" ... /> controls are visited
<asp:TextBox TabIndex="1" ... /> TAB TAB when the TAB key is
pressed

39
Class Button
public class Button: WebControl {
//--- properties caption of the button
public string Text { get; set; }
public string CommandName { get; set; } for handling
public string CommandArgument { get; set; } Command events.
public bool CausesValidation { get; set; } should the validators run when the
//--- events page is sent to the server?
public event EventHandler Click; default = true
public event CommandEventHandler Command;
}

<asp:Button Text="click me" OnClick="DoClick" Runat="server" />

public void DoClick (object sender, EventArgs e) { delegate EventHandler

... • either in the code behind
} • or in <script> tags of the page

40
Button (Command Event)
Command Event
useful if multiple buttons on a page should be handled by the same event handler

public void DoCommand (object sender, CommandEventArgs e) {

double total = Convert.ToDouble(label.Text);
if (e.CommandName == "add")
total += total * Convert.ToDouble(e.CommandArgument);
else if (e.CommandName == "sub")
total -= total * Convert.ToDouble(e.CommandArgument);
label.Text = total.ToString("f2");
}
41
Class TextBox
public class TextBox: WebControl { public enum TextBoxMode {
//--- properties MultiLine, Password, SingleLine
public virtual string Text { get; set; } }
public virtual TextBoxMode TextMode { get; set; }
public virtual int MaxLength { get; set; }
public virtual int Columns {get; set; }
public virtual int Rows { get; set; }
public virtual bool Wrap { get; set; }
public virtual bool ReadOnly { get; set; } true: TextChanged causes an
public virtual bool AutoPostBack { get; set; } immediate round trip
//--- events
public event EventHandler TextChanged; raised when the RETURN key is pressed
} or when the cursor leaves the TextBox

<asp:TextBox Text="sample" Runat="server" />

<asp:TextBox TextMode="Password" MaxLength="10" Runat="server" />

<asp:TextBox TextMode="MultiLine"
Rows="2" Columns="15" Wrap="true" Runat="server" />
line 1
line 2
line 3
</asp:TextBox> 42
Class CheckBox
public class CheckBox: WebControl { public enum TextAlign {
//--- properties Left, Right
public virtual bool Checked { get; set; } }
public virtual string Text { get; set; }
public virtual TextAlign TextAlign { get; set; }
public virtual bool AutoPostBack { get; set; }
//--- events
public event EventHandler CheckedChanged; raised when Checked changes
}

void DoClick (object sender, EventArgs e) {

label.Text = "You bought: ";
if (apples.Checked) label.Text += "Apples ";
if (pears.Checked) label.Text += "Pears ";
if (bananas.Checked) label.Text += "Bananas ";
} 43
Class RadioButton
public class RadioButton: CheckBox { all radio buttons of the same group
public virtual string GroupName { get; set; }
must have the same group name
}

<form Runat="server">
<p>Select method of payment:</p>
<asp:RadioButton ID="cash" Text="cash" GroupName="payment"
OnCheckedChanged="RadioChanged" AutoPostBack="true"
Runat="server" /><br>
<asp:RadioButton ID="cheque" Text="cheque" GroupName="payment"
OnCheckedChanged="RadioChanged" AutoPostBack="true"
Runat="server" /><br>
<asp:RadioButton ID="card" Text="credit card" GroupName="payment"
OnCheckedChanged="RadioChanged" AutoPostBack="true"
Runat="server" /><br><br>
<asp:Label ID="label" Runat="server" />
</form>

void RadioChanged (object sender, EventArgs e) {

label.Text = "Method of payment: ";
if (cash.Checked) label.Text += cash.Text;
if (cheque.Checked) label.Text += cheque.Text;
if (card.Checked) label.Text += card.Text;
}
44
Class ListControl
Base class of ListBox, DropDownList, ...
public class ListControl: WebControl { public sealed class ListItem {
//--- properties public string Text { get; set; }
public virtual ListItemCollection Items { get; set; } public string Value { get; set; }
public virtual ListItem SelectedItem { get; } public bool Selected { get; set; }
public virtual int SelectedIndex { get; set; } }
public virtual string DataTextFormatString { get; set; }
public virtual object DataSource { get; set; } -1 or 0, 1, 2, 3, ...
public virtual string DataTextField { get; set; }
public virtual string DataValueField { get; set; }
e.g. "width = {0,f2} cm"
public virtual bool AutoPostBack { get; set; }
//--- events
public event EventHandler SelectedIndexChanged; raised when a new ListItem
} is selected

DataSource arbitrary object that implements ICollection

(DataView, Array, ArrayList, SortedList, ...)
DataTextField for DataView: name of the column that contains the text to be displayed
DataValueField for DataView: name of the column that contains the value which corrsponds
to the displayed text
45
Class ListBox
public class ListBox: ListControl { public enum ListSelectionMode {
public virtual int Rows { get; set; } Single, Multiple
public virtual ListSelectionMode SelectionMode { get; set; } }
}

statically specified list

void ButtonClick (object sender, EventArgs e) {

lab.Text = "The selected country has the international car code ";
if (list.SelectedItem != null) lab.Text += list.SelectedItem.Value;
}
46
ListBox (Dynamically Specified List)
<form Runat="server">
<asp:ListBox ID="list" Rows="3" AutoPostBack="true"
OnSelectedIndexChanged="Show" Runat="server" /> <br><br>
<asp:Button Text="Fill" OnClick="Fill" Runat="server" /> <br><br>
<asp:Label ID="lab" Runat="server" />
</form>

void Fill (object sender, EventArgs e) {

SortedList data = new SortedList();
data["United States"] = "USA";
data["Great Britain"] = "GB";
data["France"] = "F";
data["Italy"] = "I";
list.DataSource = data;
list.DataTextField = "Key"; // take the text from the Key property of the items
list.DataValueField = "Value"; // take the value from the Value property of the items
list.DataBind();
}
void Show (object sender, EventArgs e) {
lab.Text = "The selected country has the international car code ";
if (list.SelectedItem != null) lab.Text += list.SelectedItem.Value;
}

47
ListBox (Even Simpler)
If Text and Value are equal, one can use the followin simple solution
<form Runat="server">
<asp:ListBox ID="list" Rows="3" AutoPostBack="true"
OnSelectedIndexChanged="Show" Runat="server" /> <br><br>
<asp:Button Text="Fill" OnClick="Fill" Runat="server" /> <br><br>
<asp:Label ID="lab" Runat="server" />
</form>

void Fill (object sender, EventArgs e) {

list.DataSource = new string[] {"D", "F", "GB", "I", "USA"};
list.DataBind();
}
void Show (object sender, EventArgs e) {
lab.Text = "The selected country has the international car code ";
if (list.SelectedItem != null) lab.Text += list.SelectedItem.Value;
}

48
ListBox (List Generated From a Database)
<form OnInit="PageInit" Runat="server">
<asp:ListBox ID="list" DataTextField="LastName" DataValueField="EmployeeID"
OnSelectedIndexChanged="HandleSelect" AutoPostBack="true" Runat="server" /><br>
<asp:Label ID="label" Runat="server" />
</form>

public partial class BasePage : System.Web.UI.Page {

public void PageInit (object sender, EventArgs e) {
DataSet ds = new DataSet();
SqlConnection con = new SqlConnection(
"data source=localhost\\SQLEXPRESS; initial catalog=Northwind; " +
"persist security info=True; integrated security=True; pooling=False");
string cmdString = "SELECT * FROM Employees";
SqlDataAdapter adapter = new SqlDataAdapter(cmdString, con);
adapter.Fill(ds, "Employees");
if (ds.HasErrors) ds.RejectChanges(); else ds.AcceptChanges();
list.DataSource = ds.Tables["Employees"].DefaultView;
list.DataBind();
}
public void HandleSelect (object sender, EventArgs e) {
label.Text = "employee number = ";
if (list.SelectedItem != null) label.Text += list.SelectedItem.Value;
}
}
49
Class DropDownList
public class DropDownList: ListControl {
// same interface as ListControl
}

statically specified DropDownList

void HandleSelect (object sender, EventArgs e) {

lab.Text = "The selected country has the international car code ";
if (list.SelectedItem != null) lab.Text += list.SelectedItem.Value;
}

DropDownList can also be filled dynamically (like ListBox)

50
Class DataGrid
public class DataGrid: BaseDataList { public class DataGridColumn: ... {
//--- properties public virtual string HeaderText { get; set; }
public virtual object DataSource { get; set; } public virtual string FooterText { get; set; }
public virtual bool AutoGenerateColumns { get; set; } public virtual TableItemStyle HeaderStyle {get;}
public virtual DataGridColumnCollection Columns {get;} public virtual TableItemStyle FooterStyle {get;}
public virtual DataGridItemsCollection Items { get; set; } ...
public virtual DataGridItem SelectedItem { get; set; } }
public virtual int SelectedIndex { get; set; }
... public class DataGridItem: ... {
} public virtual TableCellCollection Cells { get; }
...
}
DataGridColumn
public class TableCell: WebControl {
public virtual string Text { get; set; }
public virtual bool Wrap { get; set; }
...
}
DataGridItem
TableCell

51
DataGrid (Formatting)
public class DataGrid: BaseDataList { public enum GridLines {
//--- properties Both, Horizontal, None, Vertical
... }
public virtual GridLines GridLines { get; set; }
public virtual int CellPadding { get; set; }
public virtual int CellSpacing { get; set; }
public virtual bool ShowHeader { get; set; }
public virtual bool ShowFooter { get; set; } Text Text
public virtual TableItemStyle AlternatingItemStyle { get; }
public virtual TableItemStyle HeaderStyle { get; }
public virtual TableItemStyle FooterStyle { get; } CellPadding CellSpacing
public virtual TableItemStyle ItemStyle { get; }
public virtual TableItemStyle SelectedItemStyle { get; }
...
}

public class TableItemStyle: Style { <asp:DataGrid HeaderStyle-Font-Bold="true" Runat="server">

public FontInfo Font { get; } <ItemStyle ForeColor="Red" Font-Name="Times" />
public Color ForeColor { get; set; } <AlternatingItemStyle BackColor="LightGray" />
public Color BackColor { get; set; } </asp:DataGrid>
public Unit Width { get; set; }
public Unit Height { get; set; }
...
}
52
DataGrid (Methods and Events)
public class DataGrid: BaseDataList {
...
//--- methods
public override void DataBind();
...
//--- events
public event DataGridCommandEventHandler ItemCommand;
public event DataGridCommandEventHandler EditCommand;
public event DataGridCommandEventHandler CancelCommand;
public event DataGridCommandEventHandler UpdateCommand;
public event DataGridCommandEventHandler DeleteCommand;
public event EventHandler SelectedIndexChanged;
}

Events are raised depending on the column kind

ButtonColumn
BoundColumn
EditCommandColumn

53
DataGrid (Column Kind)
<asp:BoundColumn ... Is automatically bound to a column of the data source
DataField = "dbColumnName"

<asp:ButtonColumn ... Every line contains a button which raises an ItemCommand

ButtonType = "LinkButton" | "PushButton"
Text = "buttonLabel"
CommandName = "Select" | "Delete" | "anyText"

CommandName is passed to the ItemCommand event

<asp:EditCommandColumn ... Every line contains an edit button. If it is clicked it is replaced

with an update and a cancel button.
ButtonType = "LinkButton" | "PushButton"
EditText = "editButtonLabel"
UpdateText = "updateButtonLabel"
CancelText = "cancelButtonLabel"

54
DataGrid (Event Handling)
Kind of the raised event

column kind condition raised events

ButtonColumn CommandName == "Select" ItemCommand + SelectedIndexChanged
CommandName == "Delete" ItemCommand + DeleteCommand
CommandName == arbitrary ItemCommand

EditCommandColumn click on edit button ItemCommand + EditCommand

click on update button ItemCommand + UpdateCommand
click on cancel button ItemCommand + CancelCommand

Event parameter of ItemCommand

void HandleItemCommand (object sender, DataGridCommandEventArgs e) {...}

column kind e.CommandName

ButtonColumn CommandName

EditCommandColumn Edit-Button "Edit"

UpdateButton "Update"
CancelButton "Cancel"
55
DataGrid (Simple Example)
<form OnInit="PageInit" Runat="server">
<asp:DataGrid ID="grid" Runat="server" />
</form>

public partial class BasePage : System.Web.UI.Page {

public void PageInit (object sender, EventArgs e) {

DataSet ds = new DataSet();
SqlConnection con = new SqlConnection(
"data source=localhost\\SQLEXPRESS; initial catalog=Northwind; " +
"persist security info=True; integrated security=True; pooling=False");
string sqlString = "SELECT EmployeeID, FirstName, LastName FROM Employees";
SqlDataAdapter adapter = new SqlDataAdapter(sqlString, con);
adapter.Fill(ds, "Employees");
if (ds.HasErrors) ds.RejectChanges(); else ds.AcceptChanges();
grid.DataSource = ds.Tables["Employees"].DefaultView;
grid.DataBind();
grid.HeaderStyle.Font.Bold = true;
grid.AlternatingItemStyle.BackColor = System.Drawing.Color.LightGray;
}
}

56
DataGrid (Example With ButtonColumn)

<form OnLoad="PageLoad" Runat="server">

<asp:DataGrid ID="grid" Runat="server"
AutoGenerateColumns="false"
CellPadding="3"
HeaderStyle-BackColor="#aaaadd"
AlternatingItemStyle-BackColor="LightGray"
OnDeleteCommand="DeleteRow"
OnSelectedIndexChanged="SelectRow" >
<Columns>
<asp:BoundColumn HeaderText="ID" DataField="EmployeeID">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundColumn>
<asp:BoundColumn HeaderText="First Name" DataField="FirstName" />
<asp:BoundColumn HeaderText="Last Name" DataField="LastName" />
<asp:ButtonColumn ButtonType="LinkButton" Text="delete" CommandName="Delete" />
<asp:ButtonColumn ButtonType="LinkButton" Text="select" CommandName="Select" />
</Columns>
</asp:DataGrid><br>
<asp:Label ID="label" Runat="server" />
</form>

57
DataGrid (Code Behind for the Previous Example)
public partial class BasePage: System.Web.UI.Page {
DataView dataView;
public void PageLoad (object sender, EventArgs e) {
DataSet ds;
if (!IsPostBack) {
... // load ds from the database
Session["Data"] = ds;
} else ds = (DataSet)Session["Data"];
dataView = ds.Tables["Employees"].DefaultView;
grid.DataSource = dataView;
grid.DataBind();
}
public void DeleteRow (object sender, DataGridCommandEventArgs e) {
dataView.Delete(e.Item.DataSetIndex); // deletes data only in the DataSet
grid.DataSource = dataView; // but not in the database
grid.DataBind();
}
public void SelectRow (object sender, EventArgs e) {
grid.SelectedItemStyle.BackColor = System.Drawing.Color.Gray;
label.Text = grid.SelectedItem.Cells[1].Text + " " + grid.SelectedItem.Cells[2].Text;
}
}

58
ASP.NET
Simple Dynamic Web Pages
Web Forms
Event Handling
Web Controls
Validators
User Controls
Custom Controls
State Management
Configuration of ASP.NET
Working with Visual Studio .NET
Validators
Objects for plausibility checks

Label

BaseValidator

RequiredFieldValidator BaseCompareValidator CustomValidator

checks if a text field does a user-defined

is empty check
RangeValidator CompareValidator
checks if the value compares the values
of a text field is of two text fields
in a valid range

60
Validators (Example)
Name:
<asp:TextBox ID="name" Runat="server" />
<asp:RequiredFieldValidator ControlToValidate="name" Text="*"
ErrorMessage="You must enter a name" Runat="server" />
<br>
Age:
<asp:TextBox ID="age" Runat="server" />
<asp:RangeValidator ControlToValidate="age" Text="*"
MinimumValue="0" MaximumValue="100" Type="Integer"
ErrorMessage="The age must be between 0 and 100" Runat="server" />
<asp:Button Text="Submit" OnClick="DoClick" Runat="server" />
<asp:ValidationSummary Runat="server" />

61
ASP.NET
Simple Dynamic Web Pages
Web Forms
Event Handling
Web Controls
Validators
User Controls
Custom Controls
State Management
Configuration of ASP.NET
Working with Visual Studio .NET
User Controls (Example)
Group of controls that can be used like a single control

Described in an ascx file (e.g. MoneyField.ascx)

<%@ Control Inherits="MoneyFieldBase" CodeFile="MoneyField.ascx.cs" %>

<asp:TextBox ID="amount" Runat="server" />
<asp:DropDownList ID="currency" AutoPostBack="true"
OnSelectedIndexChanged="Select" Runat="server">
<asp:ListItem Text="Euro" Value="1.0" Selected="true" />
<asp:ListItem Text="Dollars" Value="0.88" />
<asp:ListItem Text="Francs" Value="1.47" />
<asp:ListItem Text="Pounds" Value="0.62" />
</asp:DropDownList>

63
User Controls (Code Behind)
MoneyField.ascx.cs
using System;
public partial class MoneyFieldBase : System.Web.UI.UserControl {
public string Text {
get { return amount.Text; }
set { amount.Text = value; }
}
private double OldRate {
get { return ViewState["rate"] == null ? 1 : (double)ViewState["rate"]; }
set { ViewState["rate"] = value; }
}
public void Select (object sender, EventArgs arg) {
try {
double val = Convert.ToDouble(amount.Text);
double newRate = Convert.ToDouble(currency.SelectedItem.Value);
double newVal = val / OldRate * newRate;
amount.Text = newVal.ToString("f2");
OldRate = newRate;
} catch (Exception) {
amount.Text = "0";
}
}
}

64
User Controls (Usage)
Multiple instances of them can be used on the same page
<%@ Page Language="C#" %>
<%@ Register TagPrefix="my" TagName="MoneyField" Src="MoneyField.ascx" %>
<html>
<body>
<form Runat="server">
Amount 1: <my:MoneyField ID="field1" Text="100" Runat="server" /><br>
Amount 2: <my:MoneyField ID="field2" Runat="server" />
</form>
</body>
</html>>

65
ASP.NET
Simple Dynamic Web Pages
Web Forms
Event Handling
Web Controls
Validators
User Controls
Custom Controls
State Management
Configuration of ASP.NET
Working with Visual Studio .NET
Custom Controls (Example)
Allow you to implement completely new functionality (e.g. text folding)

Must be implemented as a (direct or indirect) subclass of Control

Control
foreground text: property Fold.Text
WebControl background text: property ImageButton.AlternateText
Click event: inherited from ImageButton
ImageButton
must override the Render method,
Fold which translates this control to HTML
67
Custom Controls (Example: Class Fold)
using System; using System.Web.UI; using System.Web.UI.WebControls;
namespace Folds { // custom controls must be declared in a namespace
public class Fold : ImageButton {
public string Text {
get { return ViewState["Text"]==null ? "" : (string)ViewState["Text"]; }
set { ViewState["Text"] = value; } SolidLeft.gif
} SolidRight.gif
public string Icon { // "Solid" or "Hollow"
get { return ViewState["Icon"]==null ? "Solid" : (string)ViewState["Icon"]; } HollowLeft.gif
set { ViewState["Icon"] = value; } HollowRight.gif
}
public Fold() : base() { Click += FoldClick;}
void FoldClick (object sender, ImageClickEventArgs e) {
string s = Text; Text = AlternateText; AlternateText = s; // AlternateText from ImageButton
if (Icon == "Solid") Icon = "Hollow"; else Icon = "Solid";
}
protected override void Render (HtmlTextWriter w) {
w.Write("<input type=image name=" + this.UniqueID);
w.Write(" src='" + TemplateSourceDirectory + "/" + Icon + "Left.gif' border=0 />");
w.Write(Text);
w.Write("<img src='" + TemplateSourceDirectory + "/" + Icon + "Right.gif'>");
}
}
} 68
Custom Controls (Usage)
Must be compiled into a DLL, which has to be stored in the \bin directory
csc /target:library /out:bin/Fold.dll Fold.cs

Used as follows
<%@ Page Language="C#" %>
<%@ Register TagPrefix="my" Namespace="Folds" Assembly="Fold" %>
<html> <body>
<form Runat="server">
<my:Fold Text="..." AlternateText="..." Runat="server" />
</form>
</body> </html>

69
ASP.NET
Simple Dynamic Web Pages
Web Forms
Event Handling
Web Controls
Validators
User Controls
Custom Controls
State Management
Configuration of ASP.NET
Working with Visual Studio .NET
3 Kinds of States
Page state
e.g. contents of TextBoxes, state of CheckBoxes, ...
Session state (session = all requests from the same client within a certain time)
e.g. shopping cart, email address of a client, ...
Application state (Application = all aspx files in the same virtual directory)
e.g. configuration data, number of sessions, ...

application
session
C request + page state /Samples
l response + page state x.aspx
i
e S y.aspx
session state e
n z.aspx
t session r
C v application
l e state
i r
e session state
n
t 71
How to Access State Information
Page state
writing: ViewState["counter"] = counterVal;
reading: int counterVal = (int) ViewState["counter"];

Session state
writing: Session["cart"] = shoppingCart;
reading: DataTable shoppingCart = (DataTable) Session["cart"];

Application state
writing: Application["database"] = databaseName;
reading: string databaseName = (string) Application["databaseName"];

ViewState, Session and Application are properties of the Page class

72
Class Page
public class Page: TemplateControl { IsValid
//--- properties true, if none of the validators
public ValidatorCollection Validators { get; } on the page reported an error
public bool IsValid { get; }
public bool IsPostBack { get; } IsPostBack
public virtual string TemplateSourceDirectory { get; } true, if the page was sent to the
public HttpApplicationState Application { get; } server in a round trip. If the page
public virtual HttpSessionState Session { get; }
was requested for the first time
public HttpRequest Request { get; }
IsPostBack == false
public HttpResponse Response { get; }
...
TemplateSourceDirectory
//--- methods
public string MapPath(string virtualPath); current virtual directory,
public virtual void Validate(); e.g. "/Samples"
...
} Application and Session
application state and session state
MapPath(virtPath)
maps the virtual directory to the physical one Request und Response
HTTP request and HTTP response
Validate()
starts all validators on the page
73
Class HttpRequest
public class HttpRequest { UserHostName
public string UserHostName { get; } domain name of the client
public string UserHostAddress { get; }
public string HttpMethod { get; } UserHostAddress
public HttpBrowserCapabilities Browser { get; } IP number of the client
public NameValueCollection Form { get; }
public NameValueCollection QueryString { get; }
public NameValueCollection Cookies { get; }
public NameValueCollection ServerVariables { get; }
...
}

<body> address = 127.0.0.1

<%= "address = " + Request.UserHostAddress %><br> method = GET
<%= "method = " + Request.HttpMethod %><br> browser = IE
<%= "browser = " + Request.Browser.Browser %><br> version = 6.0
<%= "version = " + Request.Browser.Version %><br> supports JS = True
<%= "supports JS = " + Request.Browser.JavaScript %><br> server = Microsoft-IIS/5.0
<%= "server = " + Request.ServerVariables["SERVER_SOFTWARE"] %>
</body>

74
HttpRequest (Request and Form Parameters)
<form Runat="server">
<asp:TextBox ID="text1" Runat="server" /><br>
<asp:TextBox ID="text2" Runat="server" /><br>
<asp:CheckBox ID="checkbox" Text="box" Runat="server" /><br>
<asp:Button ID="button" Text="Send" OnClick="DoClick" Runat="server" />
<asp:Label ID="lab" Runat="server" />
</form>

void DoClick (object sender, EventArgs e) {

lab.Text = "Query string<br>";
foreach (string par in Request.QueryString.Keys)
lab.Text += par + " = " + Request.QueryString[par] + "<br>";
lab.Text += "<br>Form parameters<br>";
foreach (string par in Request.Form.Keys)
lab.Text += par + " = " + Request.Form[par] + "<br>";
}

Query string
par1 = 123
par2 = Hello
Form parameters
__VIEWSTATE = dDwxMTYxMTk1 ...
text1 = John
text2 = Miller
checkbox = on
button = Send 75
Class HttpResponse
public class HttpResponse { ContentType
//--- properties MIME type (e.g. text/html)
public string ContentType { get; set; }
public TextWriter Output { get; } Output
public int StatusCode { get; set; } HTML response stream; can be
public HttpCookieCollection Cookies { get; set; } written to with Write
...
//--- methods
StatusCode
public void Write(string s); // various overloaded versions e.g. 200 for "ok" or
public void Redirect(string newURL); 404 for "page not found"
...
}

Test1.aspx
<form Runat="server">
Name: <asp:TextBox ID="name" Runat="server" />
<asp:Button Text="Send" OnClick="DoClick" Runat="server" />
</form>

void DoClick (object sender, EventArgs e) {

Response.Redirect("Welcome.aspx?name=" + name.Text);
}

Welcome.aspx
Welcome <%= Request.QueryString["name"] %> ! 76
ASP.NET
Simple Dynamic Web Pages
Web Forms
Event Handling
Web Controls
Validators
User Controls
Custom Controls
State Management
Configuration of ASP.NET
Working with Visual Studio .NET
machine.config and web.config

CONFIG App1 App2

... x.aspx a.aspx
machine.config y.aspx b.aspx
web.config subdir
web.config
subdir

virtual directories c.aspx

web.config

machine.config • global configuration file

• stored in the .NET Framework directory

web.config • specific configuration file

• stored in a virtual directory or in its subdirectories
• overwrites configurations from machine.config or from other
configuration files further up the hierarchy

Configuration files are written in XML

78
Example: Application Parameters
web.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<appSettings>
<add key="author" value="hm" />
<add key="organisation" value="JKU" />
</appSettings>
...
</configuration>

Can be accessed in ASP.NET pages

<%@Page Language="C#" %>

<%@ Import Namespace="System.Configuration" %>
<html>
<body>
<%= "author = " + ConfigurationSettings.AppSettings["author"] %><br>
<%= "organisation = " + ConfigurationSettings.AppSettings["organisation"] %><br>
</body>
</html>

79
Example: Tracing
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.web>
<trace enabled="true" pageOutput="true" />
...
</system.web>
...
</configuration>

Gives detailed error diagnostics Shows a trace if the page is correct

80
Authorization
Who may visit the pages of a specific directory?
The directory must have a web.config file with the following contents

<?xml version="1.0" encoding="UTF-8"?>

<configuration>
users="user1, user2, ..."
<system.web> * all users
<authorization>
<allow users="admin" /> ? anonymous users
<deny users="?" />
</authorization> name users who have authenticated
... themselves with this name
</system.web>
...
</configuration>
machine.config contains
<allow users="*" />
This is default if no <allow ...> is specified

81
Authentication
4 kinds
None No authentication.
All users are anonymous.

Windows Uses the login name and the password of the Windows login.
Makes only sense for local servers.

Passport Users are redirected to the login page of the Passport server
where they can authenticate themselves (with their user name and password).

Forms Users are authenticated by a custom login page.

82
Forms Authentication (Configuration)
web.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.web>
<authorization>
<deny users="?" />
</authorization>
<authentication mode="Forms">
<forms loginUrl="Login.aspx" name="mycookie" protection="All" timeout="20">
<credentials passwordFormat="MD5">
<user name="peter" password="85C69322756E01FD4A7A22DE55E19743"/>
<user name="wolfgang" password="85C69322756E01FD4A7A22DE55E19743"/>
</credentials>
</forms>
</authentication> string encryptedPwd =
... FormsAuthentication.HashPasswordForStoringInConfigFile("myPwd", "MD5");
</system.web>
...
</configuration>

The users "peter" and "wolfgang" as well as their passwords are stored on the server

83
Authentication (How it Works)
directory requiring authentication
1. Anonymous user tries to
access A.aspx
A.aspx B.aspx C.aspx
2. Because of <deny users="?"/>
and <forms loginUrl="Login.aspx">
the user is redirected to Login.aspx
web.config
<deny users="?" />
..
<forms loginUrl="Login.aspx" ...>

5. User is redirected to A.aspx and may also

access all other pages of this directory now
no yes (because she is authenticated)
3. User enters her name
and password and is 4. Authentication
authenticated successful?

84
Login.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Security" %>
<html>
<head> validates against the credentials in web.config
<title>Login page</title>
<script Language="C#" Runat="server"> create persistent cookie?
void Authenticate (object sender, EventArgs e) {
if (FormsAuthentication.Authenticate(user.Text, pwd.Text) || user.Text == "Karin")
FormsAuthentication.RedirectFromLoginPage(user.Text, false);
else
msg.Text = "-- authentication failed";
}
</script>
</head>
<body>
<form Runat="server">
<asp:TextBox ID="user" Runat="server"/> Name<br>
<asp:TextBox ID="pwd" TextMode="Password" Runat="server"/> Password<br><br>
<asp:Button ID="button" Text="Login" OnClick="Authenticate" Runat="server" />
<br><br>
<asp:Label ID="msg" Runat="server" />
</form>

</body>
85
</html>
User Identification With Cookies
How does ASP.NET remember if a user is already authenticated?

Client Server Login Server

GET "A.aspx" GET "Login.aspx"
cookie
HTML + cookie
identifies the
This cookie tells the user
server that the user is
GET "B.aspx" + cookie
already authenticated
HTML + cookie*

Specifications about Cookies in the configuration file

name of the cookies should cookies should

cookie to be be encrypted become invalid
generated after 20 minutes 86
ASP.NET
Simple Dynamic Web Pages
Web Forms
Event Handling
Web Controls
Validators
User Controls
Custom Controls
State Management
Configuration of ASP.NET
Working with Visual Studio .NET
Creating a Project

88
Composing a GUI With Drag & Drop

Solution
Explorer

the created GUI

Toolbox
Property
Window
Used to switch between
design view and HTML view

89
HTML View

90
Event Handling
Double click on a Button creates an event handler in the code behind

event handler for Click event

91
Executing the Page
Menu: Debug | Start

92
New Features in ASP.NET 2.0

• Master pages
• Navigation
• Themes and skins
• Personalisation
• Authentication and membership classes
• New Controls for database access
• ...
Idea
Uniform layout for all pages
My.master Page1.aspx http://domain/virtualdir/Page1.aspx
<%@ Master %> <%@ Page masterPageFile="My.master" %>

<asp:Content
... Title area ... ContentPlaceHolderId="Stuff"
runat="server">
... Links ...

<asp:ContentPlaceHolder
id="Stuff"
runat="server"/> </asp:Content>

Page2.aspx http://domain/virtualdir/Page2.aspx

<%@ Page masterPageFile="My.master" %>

<asp:Content
ContentPlaceHolderId="Stuff"
runat="server">

</asp:Content>

94
Characteristics of Master Pages
• May contain arbitrary HTML code and arbitrary ASP.NET web controls
• May have a code behind
• Can be nested
<%@ Master language="C#" %> Main.master
...
<asp:ContentPlaceHolder id="Submaster" runat="server" />

<%@ Master language="C#" masterPageFile="Main.master" %> Sub.master

...
<asp:Content ContentPlaceHolderId="Submaster" runat="server">
...
<asp:ContentPlaceHolder id="MyContent" runat="server" />
</asp:Content>

<%@ Page language="C#" masterPageFile="Sub.master" %> MyPage.aspx

...
<asp:Content ContentPlaceHolderId="MyContent" runat="server">
This is the contents
</asp:Content>

• Master can be assigned to all pages of a site by specifying it in web.config

• Users can define different master pages for different browser types 95
Code Behind

<% Master Language="C#" Inherits="MyBase" CodeFile="My.master.cs" %> My.master

...

public partial class MyBase: System.Web.UI.MasterPage { My.master.cs

...
}

96
New Features in ASP.NET 2.0

• Master pages
• Navigation
• Themes and skins
• Personalisation
• Authentication and membership classes
• New Controls for database access
• ...
Site Maps
Page hierarchy of an application is described in XML
web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
<siteMapNode title="Articles" description="Home" url="Articles.aspx" > Each of these pages
<siteMapNode title="Computers" url="Computers.aspx">
uses the same Master.
<siteMapNode title="PCs" url="PCs.aspx" />
<siteMapNode title="Notebooks" url="Notebooks.aspx" />
This Master contains
</siteMapNode> a TreeView control.
<siteMapNode title="Printers" url="Printers.aspx"> Thus the TreeView is
<siteMapNode title="Laser" url="Laser.aspx" /> re-displayed on every
<siteMapNode title="InkJet" url="InkJet.aspx" /> page.
</siteMapNode>
</siteMapNode>
</siteMap>

TreeView control can be bound to this hierarchy

<asp:SiteMapDataSource ID="data" runat="server"/>
<asp:TreeView DataSourceID="data" runat="server"/>

connects to web.sitemap by default

98
Navigation With SiteMapPath
<asp:SiteMapPath runat="server"/>

Shows the path to the current page if this page belongs to a Sitemap

99
New Features in ASP.NET 2.0

• Master pages
• Navigation
• Themes and skins
• Personalisation
• Authentication and membership classes
• New Controls for database access
• ...
Themes and Skins
Allow users to define default settings for web controls

Skin: settings for a specific control

<asp:Label ForeColor="#585880" Font-Size="0.9em" Font-Name="Verdana" />

can be given a name

<asp:Label SkinID="red" ForeColor="#FF0000" Font-Name="Arial" Font-Bold="true" />

All other attributes of the control remain unchanged

Theme: collection of skins; stored in a file with the ending .skin in an App_Themes subdirectory
MyApp Fancy.skin
My.aspx <asp:Label .../>
App_Themes <asp:Button .../>
Fancy
<asp:TextBox ...>/
Images Plain.skin
Fancy.skin <asp:Label .../>
Plain <asp:Button .../>
Plain.skin <asp:TextBox ...>/
101
Setting a Theme
Globally for the whole application
<configuration> web.config
<system.web>
<pages theme="Fancy" />
...
</system.web>
</configuration>

For a single page

• either in the Page directive
<%@ Page Language="C#" Theme="Fancy" %>
...

• or in the code behind

public partial class PageBase: System.Web.UI.Page { • ASP.NET 2.0 has a new
public void Page_PreInit(object sender, EventArgs e) { PreInit event
Theme = "Fancy"; • Page has a property with
} the name Theme
}
102
Explicitly Selecting a Skin
All skins in a single file Fancy.skin
<asp:Label ForeColor="#585880" Runat="server" /> App_Themes
<asp:Label SkinID="Red" ForeColor="#FF0000" Runat="server" /> - Fancy
... - Fancy.skin

<%@ Page Language="C#" Theme="Fancy" %>

...
<asp:Label Runat="server">color #585880"</asp:Label>
<asp:Label SkinID="Red" Runat="server">color #FF0000"</asp:Label>
...

Multiple skin files Fancy.skin

<asp:Label ForeColor="#585880" Runat="server" /> App_Themes
... - Fancy
Red.skin - Fancy.skin
- Red.skin
<asp:Label SkinID="Red" ForeColor="#FF0000" Runat="server" />
...

<%@ Page Language="C#" Theme="Fancy" %>

...
<asp:Label Runat="server">color #585880"</asp:Label>
<asp:Label SkinID="Red" Runat="server">color #FF0000"</asp:Label> 103
New Features in ASP.NET 2.0

• Master pages
• Navigation
• Themes and skins
• Personalisation
• Authentication and membership classes
• New Controls for database access
• ...
Personalisation
Allows the creation of user profiles
• Stored as name/value pairs
• Name and type are defined in web.config

<system.web>
<profile>
<properties>
<add name="User" type="System.String" />
<add name="LastVisit" type="System.DateTime" />
</properties>
</profile>
</system.web>

• Can be accessed through the Profile property of the Page class

label.Text = "Welcome " + Profile.User;
Profile.LastVisit = DateTime.Now;

• Are statically typed!

• Are stored in a database (i.e. persistent) differences to the
session state!
• Are only loaded on demand
• Users are identified via cookies or URL rewriting
105
Selecting a Personalisation Database
Done via Provider classes

• Can be specified in web.config

• Providers for MS Access and MS SQL Server are available

• Standard provider is MS SQL Server

Writes to the file ApplicationDir/App_Data/...

• Users can write and install their own providers

106
Example: Personalized Theme
Defining a user profile property Theme of type String
<profile>
<properties>
<add name="Theme" type="System.String"/>
</properties>
</profile>

Users can set their preferred theme during one of their visits
void SetTheme(object sender, EventArgs e) {
Profile.Theme = textBox.Text;
}

This theme is then used during later visits

void Page_PreInit(object sender, EventArgs e) {
Theme = Profile.Theme;
}

107
New Features in ASP.NET 2.0

• Master pages
• Navigation
• Themes and skins
• Personalisation
• Authentication and membership classes
• New Controls for database access
• ...
Login Controls 1/2
LoginStatus displays
Login if the user is not yet logged in
<asp:LoginStatus Runat="server" />
Logout if the user is logged in

Login link leads to a page that can be specified in web.config

LoginView and LoginName

<asp:LoginView Runat="server">
<AnonymousTemplate> text that is displayed if the
You are not logged in. Click the Login link to sign in. user is not yet logged in
</AnonymousTemplate>
<LoggedInTemplate> text that is displayed if the
You are logged in. Welcome, user is already logged in
<asp:LoginName Runat="server" />!
</LoggedInTemplate> LoginName: name that the
</asp:LoginView> user used for his login
109
Login Controls 2/2
Login
<asp:Login Runat="server" />

• is used on the login page that was

specified in web.config.
• if the authentication succeeds
the user is redirected to the page
that was originally requested by him.

PasswordRecovery
<asp:PasswordRecovery Runat="server">
<MailDefinition
from="mailto:[email protected]"
cc="your password" />
</asp:PasswordRecovery>

• sends an email with the password to

the user
• email address and password are stored
in the user data (see later)
110
Membership Classes
Membership (in System.Web.Security)
• Maintains a set of users
static MembershipUser CreateUser(string name, string password) {...}
static MembershipUser GetUser(string name) {...}
static void UpdateUser(MembershipUser user) {...}
static bool DeleteUser(string name) {...}
static bool ValidateUser(string name, string password) {...}
• Users are stored in a database (Access, SQL Server, user-defined)
Default is MS SQL Server: ApplicationDir/App_Data/...
• Users are identified via cookies or URL rewriting
• ValidateUser is called from the Login web control

MembershipUser (in System.Web.Security)

• Contains the data of a single user There must be a web page on which the
- name user can enter this data. The data is then
- password stored in the database using CreateUser
- email address or UpdateUser
- last login date
- password recovery question
- ... 111
Protected Member Pages
• Stored in a subdirectory of the application directory (e.g. Members/)
- Application
...
- Members
- xxx.aspx
- yyy.aspx
• This subdirectory must have a web.config file with an <authorization> element
<configuration>
<system.web> unknown users must register at a login page
<authorization>
<deny users="?" />
</authorization>
<authentication mode="Forms"> redirect unknown users to login.aspx
<forms loginUrl="login.aspx" />
</authentication>
</system.web>
</configuration>

• If unknown users try to access a member page they are redirected to the login page.

112
Authentication
Access to protected member pages
somewhere.aspx protected member page

Login via LoginStatus control

Main.aspx login.aspx
<asp:LoginStatus .../> <asp:Login .../>

yes user no
known? 113
Roles
Class Roles (in System.Web.Security)
• manages user roles (e.g. Admin, Employee, ...)
static void CreateRole(string roleName) {...}
static void AddUserToRole(string userName, string roleName) {...}
...

• Access to the pages of a directory can also be managed via roles.

Requires web.config in this directory:
<system.web>
<roleManager enabled="true" />
<authorization> only users with the role Admin are allowed
<allow roles="Admin" /> to access the pages in this directory
<deny users="*" />
</authorization>
all other users are denied access
<system.web>

114
New Features in ASP.NET 2.0

• Master pages
• Navigation
• Themes and skins
• Personalisation
• Authentication and membership classes
• New Controls for database access
• ...
Visualization of Database Tables
AccessDataSource, SqlDataSource, XmlDataSource
<asp:AccessDataSource ID="data" Runat="server"
DataFile="db.mdb"
SelectCommand="SELECT id, name, subject FROM Students" />

• The web control specifies the database name and the SQL command
• Creates a DataSet that can be displayed in a ListBox, DropDownList, GridView, etc.

GridView
<asp:GridView DataSourceID="data" Runat="server" AllowSorting="true" />

• Shows the AccessDataSource with the name data

• Columns can be sorted by clicking on the
column name
• Allows various ways of formatting

116
DropDownList With AccessDataSource
<asp:AccessDataSource ID="data" Runat="server"
DataFile="db.mdb"
SelectCommand="SELECT DISTINCT subject FROM Students" />

<asp:DropDownList DataSourceID="data" DataTextField="subject" Runat="server" />

117
Parameters of Select Commands
<asp:TextBox id="subj" AutoPostBack="true" OnTextChanged="..." Runat="server" />

<asp:AccessDataSource ID="data" Runat="server"

DataFile="db.mdb"
SelectCommand="SELECT id, name, subject FROM Students WHERE subject=@par"
<SelectParameters>
<asp:ControlParameter name="par" ControlID="subj" PropertyName="Text" />
</SelectParameters>
</asp:AccessDataSource>

118
Editing a GridView
<asp:AccessDataSource ID="data" Runat="server"
DataFile="db.mdb" column values
SelectCommand="SELECT id, name, subject FROM Students"
UpdateCommand="UPDATE Students SET name=@name, subject=@subject WHERE id=@id"
DeleteCommand="DELETE FROM Students WHERE id=@id" />

<asp:GridView ID="grid" DataSourceID="data" Runat="server"

DataKeyNames="id"
AutoGenerateEditButton="true"
AutoGenerateDeleteButton="true" />

Additionally, events are raised that can be caught and handled

119
Detailed View of a Database Record
DetailsView
<asp:AccessDataSource ID="data" Runat="server"
DataFile="db.mdb"
SelectCommand="SELECT id, name, subject FROM Students" />

<asp:DetailsView DataSourceID="data" Runat="server"

DataKeyNames="id"
AllowPaging="true"
PagerSettings-Mode="NextPrevFirstLast" />

• Used if the record is too big for a single line

• This view can also be edited (like a GridView)
• Allows various ways of formatting

120
Summary
Summary
Advantages of ASP.NET over ASP
• object-oriented
• event-based
• predefined and user-defined web controls
• separation between layout (HTML) and business logic (e.g. C#)
• compiled code instead of interpreted server scripts
• convenient state management

Examples available at
http://dotnet.jku.at/book/samples/ Examples from the book
http://dotnet.jku.at/book/exercises/ Exercises from the book
http://dotnet.jku.at/buch/solutions/ Solutions to the exercises
122