asp.net kontroller
Post on 26-Jan-2016
72 Views
Preview:
DESCRIPTION
TRANSCRIPT
Kontroller/Otto Knudsen 1
ASP.NET Kontroller Kontroller som objekter HTML kontroller Web kontroller
Kontroller/Otto Knudsen 2
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
Kontroller/Otto Knudsen 3
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
Kontroller/Otto Knudsen 4
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)
Kontroller/Otto Knudsen 5
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"...>
Kontroller/Otto Knudsen 6
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" ...>
Kontroller/Otto Knudsen 7
Eksempel Internet-baseret applikation med US Census data
Udbredelsen af efternavne i USA i 90'erne
census.txt
Kontroller/Otto Knudsen 8
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
Kontroller/Otto Knudsen 9
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 ); }
Kontroller/Otto Knudsen 10
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(); }
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(); }
Kontroller/Otto Knudsen 11
Knaptryk Når det trykkes på søgeknappen,
søges der efter efternavnet …
public partial class _Default : System.Web.UI.Page { . . .
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(); }
public partial class _Default : System.Web.UI.Page { . . .
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(); }
Kontroller/Otto Knudsen 12
Validering
Valideringskontroller Klient-side vs. Server-side
Kontroller/Otto Knudsen 13
Motivation Der er altid et behov for validering
indtastede brugeren data? (fx navn) indtastede brugeren data i det rigtige format? (fx emailadresse)
Kontroller/Otto Knudsen 14
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 …
Kontroller/Otto Knudsen 15
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; . . .
Kontroller/Otto Knudsen 16
Data-binding
Data-binding til en database
Kontroller/Otto Knudsen 17
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
Kontroller/Otto Knudsen 18
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!
Kontroller/Otto Knudsen 19
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
Kontroller/Otto Knudsen 20
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(); }}
Kontroller/Otto Knudsen 21
Hvad så?
Øvelse #3
Kontroller/Otto Knudsen 22
<blank>
…
top related