DEV 306 ASP NET Web Forms Part 2
DEV 306: ASP. NET Web Forms, Part 2 Susan Warren Program Manager. NET Framework Microsoft Corporation
Why ASP. NET Web Forms? l Control-based, event-driven execution model for Web UI Ø Ø Ø l Executed via CLR as native code Ø Ø l “RAD for the Web” Cleanly encapsulated functionality Much less code required than ASP Visual Basic®, C#, JScript™ Faster execution than ASP Runs side-by-side with ASP apps Ø Web Forms use “. ASPX” extension
Related ASP. NET Talks l l l Dev 211 – Web Forms, Part 1 Dev 306 – Web Forms, Part 2 Dev 310 – ASP. NET Security Ø l Thurs. , 10: 45 am D 1 Dev 332 – IBuy. Spy Portal Walk. Through Ø l BR III-IV Dev 311 – IBuy. Spy Store Walk. Through Ø l Wed. , 10: 45 am Thurs. , 1: 30 pm 260 -261 W Dev 415 – ASP. NET Tips and Tricks Ø Thurs. , 3: 15 pm Auditorium
In Part One… l l l The Basics: How a Web Form Works Server Controls User Controls In This Talk … l l l Creating Web UI Programmatically Data Binding in Web Forms Custom Server Controls
Creating Web UI Programmatically
The Page Control Tree l The Page class creates a hierarchical tree of controls Ø Ø l l Page is the root of the tree Static text is represented by the Literal. Control class in the hierarchy The page is rendered by calling Render() on each control in the tree Easily visualized using Trace
Example, Step 1 ASP. NET source <%@ Page language=“VB” %> <html> <body> <form runat=server> Enter : <asp: Text. Box runat=server /> </form> </body> </html>
Example, Step 2 Resulting control tree __PAGE System. Web. UI. Page ctrl 0 System. Web. UI. Literal. Control ctrl 1 System. Web. UI. Html. Controls. Html. Form ctrl 3 System. Web. UI. Literal. Control ctrl 4 System. Web. UI. Web. Controls. Text. Box ctrl 5 System. Web. UI. Literal. Control ctrl 2 System. Web. UI. Literal. Control
Example, Step 3 Rendered page __PAGE RE NDE R O RDE R Literal ctrl 0 Html. Form ctrl 1 Renders as: <html>n<body>n <form method="post"> Literal ctrl 3 n Enter Name: n ctrl 4 Text. Box <input type="text"> Literal ctrl 5 n </form> Literal ctrl 2 n</body>n</form>
Using Trace To Display The Page Control Tree
Manipulating The Control Tree 1. 2. Insert controls into the Controls collection of it’s parent Get an instance of a control Dim btn 1 as New Button() btn 1. Text = "Click Me" 3. Insert into the control hierarchy: my. Panel. Controls. Add (btn 1)
Dynamic Web UI Using The Page Control Tree
Web Forms Data Binding
Web Forms Data Binding l l Provides a simple, declarative way to bind Web UI elements to data “Simple” binding to a single property Ø l “List” binding to a data source Ø l l Or directly into the page Data. Grid, Drop. Down. List, etc. Huge variety of data sources supported But… One way snapshot model Ø Requires code to update the data source
Simple Binding Syntax l Bind to: Ø Ø Ø l A member or property of the page Result of a method Property of another control Step 1: Set bindings Ø Declaratively (in HTML): <asp: Label Text=<%# cust. ID %> … /> l Step 2: Call Data. Bind Sub Page_Load(s As Object, e As Event. Args) Label 1. Data. Bind() End Sub
Simple Binding Example <%@ Page language=“VB” %> <script runat=server> Sub Page_Load(s as Object, e as Event. Args) Label 1. Data. Bind() End Sub </script> <html> <body> <asp: Label id=Label 1 runat=server Text=<%# Date. Time. Now %> /> </body> </html>
List Binding Syntax l l Bind to IEnumerable data source Step 1: Set bindings Ø Declaratively (in HTML): <asp: Data. Grid Data. Source=<%# ds %> … /> Ø Imperatively (in code): Data. Grid 1. Data. Source=ds; l Step 2: Call Data. Bind Sub Page_Load(s As Object, e As Event. Args) Data. Grid 1. Data. Bind() End Sub
Supported List Data Sources l l ADO. NET Connected: Data. Reader ADO. NET Disconnected: Ø l Data. Set, Data. Table, Data. View Also other IEnumerable types: Ø Ø Ø Arraylist, Array Hastable Result of a method
List Data Binding
Binding Templated Lists l Templates enable “Lookless” UI Ø Ø l l Customize structure – not just style Controls can be nested within templates Repeater, Data. List, Data. Grid Container: alias for the item created from the template + data Ø Container. Data. Item this row of data
Data. List Example <script runat=server> Sub Page_Load(s as Object, e as Event. Args) Data. List 1. Data. Source = Get. Cust. Data() Data. List 1. Data. Bind() End Sub </script> <html> <body> <asp: Data. List id=Data. List 1 runat=server> <Item. Template> <%# Container. Data. Item("Name") %> </Item. Template> </asp: Data. List> </body> </html>
Data. Binder. Eval Method l Helper method for late-binding Ø Even in C#! before: <%# (((Data. Row. View)Container. Data. Item) ["Price“]) %> after: <%# Data. Binder. Eval(Container. Data. Item, "Price") %> l Optional 3 rd param formatting <%# Data. Binder. Eval(Container. Data. Item, "Price", "{0: c}") %>
Template Data Binding
Custom Server Controls
Controls Versus User Controls What’s the difference? l A User. Control is declarative (like a page) Ø Ø Ø l Good for application-specific UI ++ Easy to build - - Less flexibility, fair designer support A Custom Control is precompiled Ø Good for reuse, encapsulate common UI § Ø Ø Third party Control libraries ++ Total flexibility, good designer support - - Harder to build (need to know more up front)
Creating A Custom Control 1. Derive from a base class l 2. Control, Web. Control Override methods as needed l Base handles most behavior 3. Consume it in a Web Form l Optional: Implement interfaces to process posted data or expose events Optional: Use metadata to define persistence and designer options Optional: Create additional designer and installation support l l
Create A Custom Control
Summary l Control-based, event-driven execution Ø Ø l Simpler development Cleaner code The Control Tree, Data Binding and Custom Controls are powerful ways to extend the functionality and flexibility of your. NET Web applications
Resources l Quickstart: 900+ ASP. NET samples Ø l l Installs with. NET Framework SDK IBuy. Spy samples: www. ibuyspy. com ASP. NET Community: www. asp. net
- Slides: 30