Controls You Can Use on Web Forms ASP.NET IE WebControls Toolbar WebControl
Essentially, to create a working Toolbar control, you need to add the control to the page, specify the set of ToolbarItem elements the control will contain, and add some code for handling the response of the different elements.
The below procedures show the minimum steps needed to display a Toolbar control.
- At the top of the Web Form, before any document structure markup, add the @ Import directive, which should look like the following:
<%@ Import namespace="Microsoft.Web.UI.WebControls" %>
NOTE: In this example, the @ Import directive is optional. This directive is only required when writing Web Forms that use server-side script to create or modify WebControls objects.
- On the next line, add the @ Register directive.
<%@ Register tagprefix="ie" namespace="Microsoft.Web.UI.WebControls"
assembly="Microsoft.Web.UI.WebControls" %>
- On the <body> section of the document structure, declare the <
ie:toolbar
> element and optionally set the control’s base properties.
NOTE: All WebControls elements must be authored within a <form runat="server"></form
> element, and the Web Form’s markup should look similar to the following.
<body>
<form runat="server">
<ie:toolbar id="toolbar1" runat="server">
... individual toolbar items markup goes here ...
</ie:toolbar>
</form>
</body>
- Add ToolbarItem elements as child elements of the Toolbar element.
NOTE: How items are added to the Toolbar control depends on whether you will display a static set of items or a set of items generated dynamically at run time.
For this example, we use statically defined ToolbarItem elements. At this point, the Web Form’s markup should look similar to the following.
<ie:toolbar id="tb1" runat="server"
onbuttonclick="getActive" autopostback>
<ie:toolbarcheckgroup>
<ie:toolbarcheckbutton id="btnHome" text="home" />
<ie:toolbarcheckbutton id="btnAbout" text="about us" />
<ie:toolbarcheckbutton id="btnSupport" text="support" />
</ie:toolbarcheckgroup>
<ie:toolbarseparator />
<ie:toolbarlabel text="products" />
<ie:toolbardropdownlist id="lstProducts"
onselectedindexchanged="getSelected" autopostback>
<asp:listitem text="Item 1" />
<asp:listitem text="Item 2" />
<asp:listitem text="Item 3" />
</ie:toolbardropdownlist>
<ie:toolbarseparator />
<ie:toolbarlabel text="search" />
<ie:toolbartextbox id="txtSearch"
ontextchanged="getText" autopostback />
<ie:toolbarbutton id="btnSearch"
imageurl="/asp.net.ph/shop/images/zoom.gif" />
</ie:toolbar>
Introduction to the Toolbar Control Customizing the Toolbar Control User Interface