DATA BINDING Hans Gruyaert en Rogier van der Linde

Transcriptie

1 DATA BINDING Hans Gruyaert en Rogier van der Linde

2 Inleiding

3 Data Binding Koppelen van data uit een databron aan webcontrols Webcontrols: DropDownList, RadioButtonList, GridView, DetailsView, ListView, Repeater, Datasources: Collections, DataSet, DataReader, Linq query,

4 DataSource based

5 Dropdownlist binden aan Collectie // Category entity class public class Category { public int CategoryID { get; set; } public string CategoryName { get; set; } public string Description { get; set; } } public static List<Category> GetCategories() { List<Category> categories = new List<Category>(); using (SqlConnection conn = new...) {... } }

6 Dropdownlist binden aan Collectie // Category collectie binden aan DropDownList CatList protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { List<Category> categories = Category.GetCategories(); CatList.DataTextField = "CategoryName"; CatList.DataValueField = "CategoryID"; CatList.DataSource = categories; CatList.DataBind(); } }

7 RadioButtonList binden met Linq // Categories worden met Linq gebonden aan // een RadioButtonList protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { NorthwindDataContext db = new NorthwindDataContext(); RadioList.DataSource = from c in db.categories select c; RadioList.DataTextField = "CategoryName"; RadioList.DataValueField = "CategoryID"; RadioList.DataBind(); } }

8 Data Binding Expressies

9 Data Binding Expressies <asp:dropdownlist ID="CategoryList" runat="server" AutoPostBack="true"> </asp:dropdownlist> <br />Uw keuze: <asp:label ID="Keuze" runat="server" Text='<%# CategoryList.SelectedItem.Text %>'> </asp:label> protected void Page_Load(object sender, EventArgs e) { // op het moment dat DataBind wordt uitgevoerd // wordt het geselecteerde item uit de DropDownList // aan de Text property van het Label gekoppeld Keuze.DataBind(); }

10 View Controls

11 Iteratieve Controls Iteratieve controls zijn web controls die iteratief over alle items uit de datasource een blok html renderen Voorbeelden van dergelijke webcontrols zijn: GridView, ListView, Repeater: weergeven van multiple records DetailsView, FormView: weergeven van één record

12 GridView Gebruik je om data in tabelvorm weer te geven Functionaliteit: sorteren, pagen, template-columns, editeren, etc. Voordeel: snel resultaat Nadeel: eenheidsworst, je zit vast aan html <table>

13 GridView <asp:gridview ID="ProductOverview" AutoGenerateColumns="false" runat="server"> <Columns> <asp:boundfield DataField="Name" HeaderText="Product" /> <asp:boundfield DataField="Category" HeaderText="Product" /> <asp:templatefield> <ItemTemplate> <asp:hyperlink runat="server" Text="Details" NavigateUrl= '<%# "Details.aspx?pid=" + Eval("ProductId") %>' /> </ItemTemplate> </asp:templatefield> </Columns> </asp:gridview>

14 GridView binding NorthwindDataContext db = new NorthwindDataContext(); var productsincategory = from p in db.products where p.categoryid == catid select new { ProductID = p.productid, Name = p.productname, Catagory = p.category.categoryname, Price = p.unitprice }; ProductOverview.DataSource = productsincategory; ProductOverview.DataBind();

15 DetailsView Gebruik je om details van één record weer te geven Functionaliteit: edit, insert, delete, etc. Voordeel: snel resultaat Nadeel: weinig mogelijkheden om output te tweaken, html <table>

16 DetailsView <asp:detailsview ID="DetailsView" runat="server" AutoGenerateRows="false" AutoGenerateEditButton="true" OnModeChanging="ChangeMode" DataKeyNames="ProductID" OnItemUpdating="UpdateRow"> <HeaderTemplate> <h2>details for <asp:label ID="ProductName" runat="server" Text='<%# Eval("ProductName") %>' /></h2> </HeaderTemplate> <Fields> <asp:boundfield DataField="ProductID" HeaderText="ProductID" ReadOnly="true" /> <asp:boundfield DataField="ProductName" HeaderText="Product Name" /> <asp:templatefield HeaderText="Category > <ItemTemplate> <asp:label ID="Category" runat="server" Text='<%# Eval("Category.CategoryName") %>' /> </ItemTemplate> <EditItemTemplate> <asp:dropdownlist ID="Categories" DataTextField="CategoryName" DataValueField="CategoryID" runat="server" /> </EditItemTemplate> </asp:templatefield> <asp:boundfield DataField="UnitPrice" HeaderText="Price" /> </Fields> </asp:detailsview>

17 DetailsView binding NorthwindDataContext db = new NorthwindDataContext(); var productdetails = from p in db.products where p.productid == productid select p; DetailsView.DataSource = productdetails; DetailsView.DataBind(); if (DetailsView.CurrentMode == DetailsViewMode.Edit) { DropDownList categorylist = (DropDownList)DetailsView.Rows[2].Cells[1].Controls[1]; var categories = from c in db.categories select c; categorylist.datasource = categories; categorylist.databind(); categorylist.selectedvalue = ((Product)DetailsView.DataItem).CategoryID.ToString(); }

18 DetailsView OnItemUpdating event protected void UpdateRow(object sender, DetailsViewUpdateEventArgs e) { productid = int.parse(detailsview.datakey.value.tostring()); NorthwindDataContext db = new NorthwindDataContext(); Product product = db.products.single(p => p.productid == productid); product.productname = ((TextBox)DetailsView.Rows[1].Cells[1].Controls[0]).Text; product.categoryid = int.parse(((dropdownlist) DetailsView.Rows[2].Cells[1].Controls[1]).SelectedValue); product.unitprice = decimal.parse(((textbox)detailsview.rows[3].cells[1].controls[0]).text); db.submitchanges(); DetailsView.ChangeMode(DetailsViewMode.ReadOnly); BindView(productID); }

19 ListView Tegenhanger van de GridView maar met volledige controle over de gerenderde html Functionaliteit: templates, edit, paging met DataPager, etc. Voordeel:

20 ListView <asp:listview ID="OrderView" ItemPlaceholderID="ItemPlaceHolder" runat="server"> <LayoutTemplate> <div class="scrollitem" id="itemplaceholder" runat="server" /> <asp:datapager runat="server" ID="DataPager" PageSize="10"> <Fields> <asp:nextpreviouspagerfield /> </Fields> </asp:datapager> </LayoutTemplate> <ItemTemplate> <div class="scrollitem" id="itemplaceholder" runat="server"> <h3>order <%# Eval("OrderID") %>: <%# Eval("TotalPrice") %></h3> Ordered by <%# Eval("CompanyName") %> on <%# ((DateTime)Eval("OrderDate")).ToShortDateString() %> <div class="detaillink"> > <asp:hyperlink ID="DetailLink" runat="server" NavigateUrl= '<%# "Details2.aspx?oid=" + Eval("OrderID") %>'>details</asp:hyperlink> </div> </div> </ItemTemplate> </asp:listview>

21 FormView Tegenhanger van de DetailsView maar met meer controle over de gerenderde html Functionaliteit: edit, delete, insert, etc. Voordeel: meer vrijheid in de markup dan met een DetailsView diir gebruik te maken van templates Nadeel: er wordt toch een <table> gerenderd

22 FormView <asp:formview ID="OrderDetails" runat="server"> <HeaderTemplate> <h3>order <%# Eval("OrderID") %> for customer <%# Eval("Customer")%></h3> <div class="product header"> <div class="productname">product</div> <div class="quantity">quantity</div> <div class="unitprice">unit Price</div> <div class="total">total</div> </div> </HeaderTemplate> <ItemTemplate> <asp:listview ID="ProductDetails" runat="server"> <LayoutTemplate> <div class="product" id="itemplaceholder" runat="server" /> </LayoutTemplate> <ItemTemplate> <div class="product" id="itemplaceholder" runat="server"> <div class="productname"><%# Eval("ProductName") %></div> <div class="quantity"><%# Eval("Quantity") %></div> <div class="unitprice"><%# Eval("UnitPrice") %></div> <div class="total"><%# Eval("Total") %></div> </div> </ItemTemplate> </asp:listview> </ItemTemplate>...

23 FindControl Alle controls genest in een ViewControls kunnen niet rechtstreeks met hun ID aangesproken worden Om die controls toch te vinden gebruik je de FindControl methode en geef je er de lokale ID aan mee

24 FormView binding NorthwindDataContext db = new NorthwindDataContext();` var order = from o in db.orders... ; OrderDetails.DataSource = order; OrderDetails.DataBind(); // geneste ListView kan je niet rechtstreeks aanspreken met z n // ID ProductDetails, in plaats daarvan wordt ze gevonden met de // FindControl methode: ListView productdetails = (ListView)OrderDetails.FindControl("ProductDetails"); var products = from o in db.order_details... ; productdetails.datasource = products; productdetails.databind();

25 Bind events