ASP.NET Kontroller

1. ASP.NET Kontroller • Kontroller som objekter • HTML kontroller • Web kontroller

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

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

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)

5. HTMLControls <input type="text" runat="server"...> • Ethvert HTML element med runat="server" • elementet har et tilhørende server-side-objekt

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

7. census.txt Eksempel • Internet-baseret applikation med US Census data • Udbredelsen af efternavne i USA i 90'erne

8. UI-design • TextBox • (ID) = tbxNameInfo • ReadOnly = True • Baseret på web-kontroller: Panel • ListBox • (ID) = lstTopTenNames • AutoPostBack = True • TextBox • (ID) = tbxUserName • Button • (ID) = btnSearch • Text = Search

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 ); }

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(); }

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(); }

12. Validering • Valideringskontroller • Klient-side vs. Server-side

13. Motivation • Der er altid et behov for validering • indtastede brugeren data? (fx navn) • indtastede brugeren data i det rigtige format? (fx emailadresse)

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 …

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; . . .

16. Data-binding • Data-binding til en database

17. DB 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.

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!

19. DB 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|"

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(); } }

21. Hvad så? • Øvelse #3

22. <blank> • …