asp.net kontroller

Kontroller/Otto Knudsen 1

ASP.NET Kontroller Kontroller som objekter HTML kontroller Web kontroller


Kontrolbaseret Programmering Kontrolbaseret programmering er velkendt Windowsapplikationer har anvendt kontroller i evigheder

VB6, Delphi, Java, .NET (WinForms)

Koncept: En form består af en samling kontroller Hver kontrol kender sit eget udseende (Render-metode) Programmøren manipulerer kontrollerne og tilhørende hændelser … og overlader den underliggende funktionalitet til kontrollerne

selv


ASP.NET Kontroller ASP.NET gør det muligt at kode som sædvanlig …

Server-side objekter repræsenterer side-elementer Server-side objekter omsætter sig selv til HTML Noget virker som ved Windowsprogrammering … … andet gør ikke runat="server"-attribute angiver "server-side"-kontrol


To slags kontroller: HTMLControls

Fungerer som standard HTML-kontroller (<form>, <p>, etc.) lettere af forstå for HTML-programmører/designere begrænsede egenskaber jf. den underliggende HTML begrænset til klient-side (JavaScript)

WebControls Fungerer som deres Windows-modstykker (ListBox, DataGrid,

osv.) lettere at forstå for Windows-programmører højniveau-funktionalitet ligesom Windows-kontroller begrænset til server-side (.NET)


HTMLControls Ethvert HTML element med runat="server"

elementet har et tilhørende server-side-objekt

System.Object

System.Web.UI.Control

HtmlControl

HtmlImage

HtmlInputControl

HtmlInputFile

HtmlInputHidden

HtmlInputImage

HtmlInputRadioButton

HtmlInputText

HtmlInputButton

HtmlInputCheckBox

HtmlContainerControl

HtmlForm

HtmlGenericControl

HtmlSelect

HtmlTable

HtmlTableCell

HtmlTableRow

HtmlTextArea

HtmlAnchor

HtmlButton

<table>

<form>

<input type=button>

<tr>

<td>,<th>

<input type=text>

<textarea>

<input type=image>

<input type=file>

<input type=hidden>

<input type=radio>

<input type=checkbox>

<select>

<a>

<span>,<div>, ...

<button>

<img>

<input type="text" runat="server"...>


WebControlsSyst em. Obj ect

Syst em. Web. UI . Cont r ol

WebCont r ol

AdRot at or

BaseDat aLi st

Dat aGr i d

Dat aLi st

But t on

Cal endar

CheckBox

Radi oBut t on

Hyper Li nk

I mage

I mageBut t on

Label

BaseVal i dat or

BaseCompar eVal i dat or

Cust omVal i dat or

RangeVal i dat or

Regul ar Expr essi onVal i dat or

Requi r edFi el dVal i dat or

Li nkBut t on

Li st Cont r ol

Radi oBut t onLi st

CheckBoxLi st

Dr opDownLi st

Li st Box

Panel

Tabl e

Tabl eCel l

Tabl eHeader Cel l

Tabl eRowText Box

Val i dat i onSummar y

Repeat er

Compar eVal i dat or

Xml

<asp:Button ID="cmdAdd" runat="server" ...>


Eksempel Internet-baseret applikation med US Census data

Udbredelsen af efternavne i USA i 90'erne

census.txt


UI-design Baseret på web-kontroller:

ListBox• (ID) = lstTopTenNames• AutoPostBack = True

TextBox• (ID) = tbxNameInfo• ReadOnly = True

TextBox• (ID) = tbxUserName

Panel

Button• (ID) = btnSearch• Text = Search


Page_Load Indlæs "census.txt"-filen, dan datalisten

og befolk listboksen:

using System.Collections.Generic;using System.IO;

public partial class _Default : System.Web.UI.Page { private List<FamilyName> namesCollection; protected void Page_Load(object sender, EventArgs e) { // Finder stien til filen, uanset hvor applikationen er placeret: string filename = Path.Combine( System.AppDomain.CurrentDomain.BaseDirectory, Path.Combine("App_Data", "census.txt")); namesCollection = Program.ReadCensusData(filename); if (this.IsPostBack) // Listboksen er fyldt – hop ud! return; else // Første kald til siden; fyld listboksen med top 10: for (int i = 0; i < 10; i++) this.lstTopTenNames.Items.Add( namesCollection[i].Name ); }

using System.Collections.Generic;using System.IO;

public partial class _Default : System.Web.UI.Page { private List<FamilyName> namesCollection; protected void Page_Load(object sender, EventArgs e) { // Finder stien til filen, uanset hvor applikationen er placeret: string filename = Path.Combine( System.AppDomain.CurrentDomain.BaseDirectory, Path.Combine("App_Data", "census.txt")); namesCollection = Program.ReadCensusData(filename); if (this.IsPostBack) // Listboksen er fyldt – hop ud! return; else // Første kald til siden; fyld listboksen med top 10: for (int i = 0; i < 10; i++) this.lstTopTenNames.Items.Add( namesCollection[i].Name ); }


SelectedIndexChanged

Når en bruger vælger et navn i listen, så vis mere information i tekst-feltet

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

protected void lstTopTenNames_SelectedIndexChanged(object sender, EventArgs e) { int index = this.lstTopTenNames.SelectedIndex; this.tbxNameInfo.Text = namesCollection[index].ToString(); }


protected void lstTopTenNames_SelectedIndexChanged(object sender, EventArgs e) { int index = this.lstTopTenNames.SelectedIndex; this.tbxNameInfo.Text = namesCollection[index].ToString(); }


Knaptryk Når det trykkes på søgeknappen,

søges der efter efternavnet …


protected void btnSearch_Click(object sender, EventArgs e) { string username = this.tbxUserName.Text; int index = namesCollection.IndexOf( new FamilyName(username, 0.0, 0) );

if (index < 0) this.tbxNameInfo.Text = "Desværre, navnet findes ikke i census data."; else this.tbxNameInfo.Text = namesCollection[index].ToString(); }


protected void btnSearch_Click(object sender, EventArgs e) { string username = this.tbxUserName.Text; int index = namesCollection.IndexOf( new FamilyName(username, 0.0, 0) );

if (index < 0) this.tbxNameInfo.Text = "Desværre, navnet findes ikke i census data."; else this.tbxNameInfo.Text = namesCollection[index].ToString(); }


Validering

Valideringskontroller Klient-side vs. Server-side


Motivation Der er altid et behov for validering

indtastede brugeren data? (fx navn) indtastede brugeren data i det rigtige format? (fx emailadresse)


Tilgang For at undgå server-trafik, så valideres mest

muligt på klienten ASP.NET indeholder valideringkontroller til klient-side-

validering disse kontroller genererer automatisk JavaScript-kode til

klienten der er ingen post-back, førend data er valideret

Bemærk: klient-side-validering kan let omgås (fx ved at slå JavaScript

fra) server-side-validering er derfor også påkrævet

Godt nyt: Kontroller foretager automatisk server-side-validering Dårligt nyt: server-side-hændelser indtræffer alligevel, så check

IsValid egenskaben …


Eksempel Validér navn før søgning …

RequiredFieldValidator• ControlToValidate = tbxUserName• ErrorMessage = Please enter a name…

protected void btnSearch_Click(…) { // Validering ok: if (!this.IsValid) return; . . .

protected void btnSearch_Click(…) { // Validering ok: if (!this.IsValid) return; . . .


Data-binding

Data-binding til en database


Data-binding Data-binding er processen at befolke en kontrol med data

data fra collections, databaser, XML-dokumenter osv. kontroller bindes via IEnumerable interface, eller via DataSet/DataTable

Mange web-kontroller understøtter data-binding: ListBox DropDownList GridView DataList DetailsView mv.

DB


Wizard-baseret data-binding Visual Studio 2005 kan gøre arbejdet for dig

Konfigurér en af DataSource-kontrollerne (fx SQLDataSource) bind DataSource-kontrollen til en WebControl (fx GridView) Afvikl!


Eksempel: data-binding til en database

Trin: Lav en ny web site i VS tilføj en database-fil til App_Data-mappen (om nødvendigt) drag-drop SqlDataSource ind på siden Konfigurér til database …

gem forbindelsesstrengen i web.config drag-drop GridView ind på siden Vælg Datakilde …

muliggør Paging? muliggør Sorting? muliggør Selection? Edit? Delete? formattér kolonner?

Afvikl!

Bemærk: ret web.config, erstat eksplicit sti til DB med "|DataDirectory|"

DB


Manuel Data-binding Man kan også selv … Data-aware kontroller har to medlemmer:

egenskaben DataSource metoden DataBind( )

For at foretage data-bind, skal man: angive kontrollens DataSource egenskab med en datakilde evt. konfigurere kontrollen til, hvilke datafelter, der skal vises kald kontrollens DataBind-metode

protected void Page_Load(object sender, EventArgs e) { DataTable dt = <hent fra databasen>; if (!this.IsPostBack) { this.GridView1.DataSource = dt; this.GridView1.AutoGenerateColumns = true; this.GridView1.DataBind(); }}

protected void Page_Load(object sender, EventArgs e) { DataTable dt = <hent fra databasen>; if (!this.IsPostBack) { this.GridView1.DataSource = dt; this.GridView1.AutoGenerateColumns = true; this.GridView1.DataBind(); }}


Hvad så?

Øvelse #3


<blank>

…

asp.net kontroller

Documents