asp.net.ph

Skip Navigation Links

Adding Toolbar Controls to a Web Forms Page

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.

To add a Toolbar control to a Web Forms page

  1. 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.

  2. On the next line, add the @ Register directive.
    <%@ Register tagprefix="ie" namespace="Microsoft.Web.UI.WebControls" 
    assembly="Microsoft.Web.UI.WebControls" %>
  3. 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.

  4. <body>
       <form runat="server">
          <ie:toolbar id="toolbar1" runat="server">
    
             ... individual toolbar items markup goes here ...
    
          </ie:toolbar>
       </form>
    </body>
  5. 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>
Toolbar with Default Settings
Run Sample | View Source
See Also

Introduction to the Toolbar Control   Customizing the Toolbar Control User Interface



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note