asp_net

New Web Server Controls in ASP.Net 2.0

ImageMap Web Server Control

The ImageMap control let you to create an image that has individual regions that users can click, which are identified as hot spots. Each of these hot spots can be a separate hyperlink or PostBack event.

The ImageMap control principally consists of two pieces. The first is an image, which can be a graphic in any standard Web graphic like a .gif, .jpg, or .png file.

The second one is a set of hot-spot controls. Each hot-spot control is a different element. For every hot-spot control, you can define its shapeâa circle, rectangle, or polygonâand the coordinates that specify the location and size of the hot spot.

You can define as many or as few hot spots for the image as you need. There is no to need to define hot spots to cover whole of the graphic.

It is important to note that you can define overlapping hot spots. Each hot spot is controls by a z-index value, and if a user clicks a region that is defined by two or more overlapping hot spots, the hot spot with the highest z-order is the hot spot that is selected.

Response on User Interaction

Each hot spot can be organized as a hyperlink that goes to a URL that you provide for that hot spot. You can specify what happens when a user clicks a hot spot on an ImageMap control. You can also configure the control to perform a PostBack when a user clicks a hot spot, giving a unique value for each hot spot. The PostBack fires the ImageMap control's Click event. You can read the unique value that you assign to each hot spot, in the event handler.

The TreeView Web Server Control

The TreeView control is used to present hierarchical data, such as a displaying the contents of an XML document, or displaying files and folders from the file system, in a tree structure

You can programmatically access the TreeView object model to dynamically create trees, populate nodes, set properties and so on. The TreeView control consists of nodes and there are three types of nodes that you can add to a TreeView control.

â¢ Root - A root node is a node that has no parent node. It has one or more child nodes.

â¢ Parent - A node that has a parent node and one or more child nodes

â¢ Leaf - A node that has no child nodes

The rendering of the TreeView control can be fully customized, which allows for a wide range of display styles.

Binding Data to the TreeView Control

You can bind a TreeView control to a data source that supports the IHierarchicalDataSource interface, like the XmlDataSource and SiteMapDataSource controls. In addition, you have complete control over which fields are populated from the XmlDataSource data source when binding data.

Syntax:
<asp:TreeView id="MyTreeView" dataSourceID="XmlDataSource" runat="server">
<DataBindings> <asp:TreeNodeBinding DataMember="Topic" TextField="Title"/>
<asp:TreeNodeBinding DataMember="Article" TextField="Heading"/>
<asp:TreeNodeBinding DataMember="Section" TextField="Heading"/>
</DataBindings>
</asp:TreeView>

<asp:XmlDataSource id="XmlDataSource" runat="server">
<Data>
<Topic Title="Topic Title">
<Article Heading="Article 1">
<Section Heading="Section 1">
</Section>
<Section Heading="Section 2">
</Section>
</Article>
<Article Heading="Article 2">
<Section Heading="Section 1">
</Section>
</Article>
</Topic>
</Data>
</asp: XmlDataSource>

Binding TreeView Control Data with an XML File

You can bind the TreeView control to an XML file. For doing so, you need to go through the following two steps.

â¢ Add an XmlDataSource control to the page and set its DataFile property to the name of the XML File

â¢ Then add a TreeView control and set its DataSourceID property to the ID of the XmlDataSource control.

â¢ Then map the nodes and their attributes in the XML file to the TreeView nodes by declaring the asp:TreeNodeBinding elements as part of the TreeView declaration.

Syntax:
You can create an Xml file like given below.
<? Xmlversion='1.0'?>
<Categories>
<CategoryID="1" Name="Fruits">
<DescriptionValue="Apple, Banana, Orange"/>
</Category>
<CategoryID="2" Name="Vegetables">
<DescriptionValue="Potato, Tomato, Onion"/>
</Category>
<CategoryID="3" Name="Drinks">
<DescriptionValue="Soft, Hard, Juice"/>
</Category>
</Categories>

After creating the XML file is created, create a new Web Form named TreeViewDataBinding. aspx and modify its code to look like the following.

<asp:TreeViewExpandImageUrl="Images/closed.gif"
CollapseImageUrl="Images/open.gif"ID="TreeView1"
Runat="server"DataSourceID="XmlDataSourceA">
<DataBindings>
<asp:TreeNodeBindingDataMember="Category"
ValueField="ID"TextField="Name">
</asp:TreeNodeBinding>
<asp:TreeNodeBindingDataMember="Description"
ValueField="Value"
TextField="Value">
</asp:TreeNodeBinding>
</DataBindings>
</asp:TreeView>
</div>
<div>
<asp:XmlDataSourceID="XmlDataSourceA"Runat="server"
DataFile="~/Data/Categories.xml">
</asp: XmlDataSource>

Programmatically Populating Nodes in TreeView

You can programmatically populate the nodes in the TreeView with data from the database. When users click a node, the child nodes for that author will be created by making a query to the database that fetches all the titles for that particular author. You can see this example, let us create a new web form having name MyTreeView.aspx and modify its code to look like as given below.

<%@ PageLanguage="C#"%>
<%@ ImportNamespace="System.Data"%>
<%@ ImportNamespace="System.Data.SqlClient"%>
<%@ ImportNamespace="System.Configuration"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Population of the TreeView Control</title>
<scriptrunat=server>
void Node Populate(object sender,
System.Web.UI.WebControls.TreeNodeEventArgs e)
{
if(e.Node.ChildNodes.Count == 0)
{
switch( e.Node.Depth )
{
case 0:
FillAuthors(e.Node);
break;
case 1:
FillTitlesForAuthors(e.Node);
break;
}
}
}

void FillAuthors(TreeNode node)
{
if (authors.Tables.Count > 0)
{
foreach (DataRow row in authors.Tables[0].Rows)
{
TreeNode newNode = new
TreeNode(row["au_fname"].ToString() + " " + row["au_lname"].ToString(),
row["au_id"].ToString());
newNode.PopulateOnDemand = true;
newNode.SelectAction = TreeNodeSelectAction.Expand;
node.ChildNodes.Add(newNode);
}
}
}
void FillTitlesForAuthors(TreeNode node)
{
if (titlesForAuthors.Tables.Count > 0)
{
foreach (DataRow row in titlesForAuthors.Tables[0].Rows)
{
TreeNode newNode = new
TreeNode(row["title"].ToString() ,
row["title_id"].ToString());
newNode.PopulateOnDemand = false;
newNode.SelectAction = TreeNodeSelectAction.None;
node.ChildNodes.Add(newNode);
}
}
}
</script>
</head>
<body>
<form id="Myform" runat="server">
<div>
<asp:TreeViewRunat="Server"ExpandImageUrl="Images/closed.gif"
CollapseImageUrl="Images/open.gif"
OnTreeNodePopulate="Node_Populate" ID="tvwauthors">
<Nodes>
<asp:TreeNodeText="Authors" PopulateOnDemand=true Value="0"/>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>