Page 51 - DCAP312_WEB_TECHNOLOGIES_II

Unit 3: Server Controls Basic

3.2 Data Binding Notes

ASP.NET 3.5 introduces a new data binding control (Figure 3.1) named the List View. ASP.NET
already has a lot of data bind controls; it should be more than 10. But the good news is, List
View can literally replace all other data binding controls in ASP.NET. List View control makes
data binding easier than previous controls. It has included styling with CSS, flexible pagination,
and sorting, inserting, deleting, and updating features.

Figure 3.1: Data binding control

Id Name Type

1 Ashrafur Rahaman Faisal Family Update Delete Cancel
2 Kader Razwan Mishu Friends Edit
3 Ajanta Das Friends Edit
4 Mahfuzur Rahaman Family Edit
5 Raisul Kabir Business Edit

First Name Last Name Contact Type Insert

The List View is a model ambitious control which means that it will not make anything. By
default, the developer must completely specify the HTML he/she wants to render in the form
of templates. To show data in List View control, we need to take a Layout Template (to define
top level of HTML for output rendering). To show data, we need to take Item Template and
AlternativeItemTemplate to show alternative row as with different CSS. Here is the example of
simple data binding with AlternativeItemTemplate.
//very simple databinding in ListView
<LayoutTemplate>
<table border= “0” cellpadding= “1”>
<tr style= “background-color:#E5E5FE”>
<th align= “left”><asp:LinkButton ID= “lnkId” runat= “server”>Id</
asp:LinkButton></th>
<th align=“left”><asp:LinkButtonID=“lnkName”runat= “server”>Name</
asp:LinkButton></th>
<th align=“left”><asp:LinkButton ID=“lnkType” runat=
“server”>Type</asp:LinkButton></th>
<th></th>
</tr>
<tr id= “itemPlaceholder” runat= “server”></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><asp:Label runat= “server” ID= “lblId”><%#Eval(“ID”) %></
asp:Label></td>
<td><asp:Label runat= “server” ID= “lblName”><%#Eval(“FirstName”)+”
“+Eval(“LastName”) %></asp:Label></td>
<td><asp:Label runat= “server”ID= “lblType”><%#Eval(“ContactTy
pe”) %></asp:Label></td>
<td></td>

LOVELY PROFESSIONAL UNIVERSITY 45