ASP.NET 4 Framework provide DataBound controls to create your application user interface for working with data. Using DataBound control you can display data or edit database data. In this article I am used XML ,all control retrieve data from XML file. There are three main types of DataBound controls: list control (Bulletedlist, CheckBoxList, DropdownList, ListBox, RadioButton), tabular control (GridView, DataList, Repeater, FormView, ListView, DetailsView), and hierarchical control (TreeView, Menu). ASP.NET 4 Framework includes the following five list controls: - BulletedList: Bulleted list display each item as text,a link button, or a hyperlink.
- CheckBoxList : Check boxes display multiple check boxes in the list.
- DropdownList: Drop-down list display a list of item. Only one can be selected.
- ListBox: ListBox: display list of many item you can select one item or multiple item from list.
- RadioButtonList: Displays a list of radio buttons. Only one radio button can be selected.
Detail xml file apply only on List control and Tabular Control. List controls and Tabular controls all retrieve data from Detail.xml file.
Detail.xml
<?xml version="1.0" encoding="utf-8" ?>
<Details>
<Detail name="Mark" id="1"></Detail>
<Detail name="Hussey" id="2"></Detail>
<Detail name="Clark" id="3"></Detail>
<Detail name="Hadden" id="4"></Detail>
<Detail name="Ricky" id="5"></Detail>
</Details>
ListControlUsingXML.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListControlUsingXML.aspx.cs" Inherits="ListControlUsingXML" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h5>BulletedList</h5>
<asp:BulletedList ID="BulletedList1" runat="server" DataSourceID="XmlDataSource1"
DataValueField="id" DataTextField="name">
</asp:BulletedList>
<h5 style="position: absolute; top: 13px; left: 259px; height: 19px; width: 1172px">CheckBoxList</h5>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="XmlDataSource1"
DataTextField="name" DataValueField="id" Style="z-index: 1; left: 261px; top: 32px;
position: absolute; height: 28px; width: 111px">
</asp:CheckBoxList>
<h5>DropDownlist</h5>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="XmlDataSource1"
DataTextField="name" DataValueField="id">
</asp:DropDownList>
<h5 style="position: absolute; top: 130px; left: 270px; z-index: 2; height: 19px;
width: 1172px">ListBox</h5>
<asp:ListBox ID="ListBox1" runat="server" DataSourceID="XmlDataSource1" DataTextField="name"
DataValueField="id" Style="position: absolute; z-index: 1; left: 267px; top: 170px">
</asp:ListBox>
<h5>RadioButtonList</h5>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" DataSourceID="XmlDataSource1"
DataTextField="name" DataValueField="id">
</asp:RadioButtonList>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Detail.xml" XPath="Details/Detail">
</asp:XmlDataSource>
</div>
</form>
</body>
</html>
Output:
Tabular control: It is mostly used when you are working with database data. These control enable you to display data, modify your data, insert data into specify records, and delete records from database.
GridView, DataList, Repeater and ListView display multiple data at a time.DetailsView and FormView display single data at a time.
TabularControlUsingXML.aspx
<%@ Page Language="C#" Theme="Theme1" AutoEventWireup="true" CodeFile="TabularControlUsingXML.aspx.cs" Inherits="TabularControlUsingXML" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body style="top: 0px; left: 0px; position: absolute; height: 632px; width: 1224px">
<form id="form1" runat="server">
<div>
<h5>Grid View </h5>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="XmlDataSource1">
<Columns>
<asp:BoundField DataField="name" HeaderText="Name" SortExpression="name" />
<asp:BoundField DataField="id" HeaderText="ID" SortExpression="id" />
</Columns>
</asp:GridView>
<h5 style="margin-left: 200px; position: absolute; top: 14px; left: 0px; height: 17px;width: 1228px;">DataList</h5>
<asp:DataList ID="DataList1" runat="server" DataSourceID="XmlDataSource1" Style="position: absolute;
top: 47px; left: 201px; height: 117px; width: 168px">
<ItemTemplate>
Name: <asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
ID:<asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />
</ItemTemplate>
</asp:DataList>
<h5>Repeater</h5>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1">
<ItemTemplate>
ID <%#Eval("id")%> used by <%#Eval("name")%> , </ItemTemplate>
</asp:Repeater>
<h5 style="margin-left: 200px; top: 293px; left: 7px; position: absolute; height: 19px;width: 1024px; z-index: 1;">
DetailsView</h5>
<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" AutoGenerateRows="False"
DataSourceID="XmlDataSource1" AllowPaging="True" Style="position: absolute; top: 334px;
left: 214px">
<Fields>
<asp:BoundField DataField="name" HeaderText="Name" SortExpression="name" />
<asp:BoundField DataField="id" HeaderText="ID" SortExpression="id" />
</Fields>
</asp:DetailsView>
<h5>List View</h5>
<asp:ListView ID="ListView1" runat="server" DataSourceID="XmlDataSource1">
<ItemTemplate>
<tr style="background-color: #FFFBD6; color: #333333;">
<td><asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' /></td>
<td><asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' /></td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="1" style="background-color: #FFFFFF;
border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr runat="server" style="background-color: #FFFBD6; color: #333333;">
<th runat="server">Name</th>
<th runat="server">ID </th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="text-align: center; background-color: #FFCC66;
font-family: Verdana, Arial, Helvetica, sans-erif; color: #333333;">
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
<h5>
FormView</h5>
<asp:FormView ID="FormView1" runat="server" AllowPaging="True" DataSourceID="XmlDataSource1">
<EditItemTemplate>
Name:<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
ID:<asp:TextBox ID="idTextBox" runat="server" Text='<%# Bind("id") %>' />
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
Text="Update" />
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
<InsertItemTemplate>
Name:<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
ID:<asp:TextBox ID="idTextBox" runat="server" Text='<%# Bind("id") %>' />
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
Text="Insert" />
<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel" />
</InsertItemTemplate>
<ItemTemplate>
Name:<asp:Label ID="nameLabel" runat="server" Text='<%# Bind("name") %>' />
ID:<asp:Label ID="idLabel" runat="server" Text='<%# Bind("id") %>' />
</ItemTemplate>
</asp:FormView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Detail.xml" XPath="Details/Detail">
</asp:XmlDataSource>
</div>
</form>
</body>
</html>
Output:
Detail2 xml file apply only on Hierarchical Control. Hierarchical control retrieve data from Detail2.xml file.
Detail2.xml
<?xml version="1.0" encoding="utf-8" ?>
<Details>
<Mark>
<City></City>
<Income></Income>
<Phone>
<Mobile></Mobile>
<Landline></Landline>
</Phone>
</Mark>
<Hussey></Hussey>
<Clark></Clark>
<Hadden></Hadden>
<Ricky></Ricky>
</Details>
HierarchicalControl: This control use to display nested data items.The ASP.NET 4 Framework provided two hierarchical DataBound controls:
- Menu: Displays data items in a static or dynamic menu (see below code ).
- TreeView: Displays data items in a tree form.
HierarchicalControlUsingXML.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HierarchicalControlUsingXML.aspx.cs" Inherits="HierarchicalControlUsingXML" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1">
</asp:Menu>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1">
</asp:TreeView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Detail2.xml" XPath="Details">
</asp:XmlDataSource>
</div>
</form>
</body>
</html>
Output:
