65.9K
CodeProject 正在变化。 阅读更多。
Home

在 ASP.NET 中开发 OutlookBar 用户控件

Gokuldas
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.62/5 (7投票s)

2004年11月21日

6分钟阅读

viewsIcon

73583

downloadIcon

1703

ASP.NET 中的 OutlookBar 用户控件。

Sample Image - OutlookBar.jpg

引言

你们中的许多人可能在使用 Microsoft Outlook 应用程序时见过上面所示的 Outlookbar。这个 UI 控件一直让我着迷。我觉得为什么不利用 ASP.NET 的强大功能来开发这个控件呢？所有的 OutlookBar 菜单和子菜单项都通过 XML 文件配置。因此，您可以根据自己的需求配置 XML 文件以显示主菜单和子菜单项。演示项目中使用的示例 XML 文件仅用于说明目的。本文将引导您了解如何在 ASP.NET 中将其实现为用户控件。

背景

最近，我正在开发具有可折叠功能的主/从 DataGrid。正如大多数人可能知道的，DataGrid 的 TemplateColumn 功能使我们能够使用诸如 Itemtemplate、EditTemplate、HeaderTemplate、FooterTemplate 和 SeparatorTemplate 等模板。这些模板使开发人员可以控制要在每个模板中绘制的内容。此外，DataGrid 提供了 OnEditCommand 和 OnCancelCommand 事件，我们可以为其编写处理程序代码，以便 DataGrid 可以绘制 Itemtemplate 或 EditItemTemplate 中指定的内容。我已将相同的概念用于此控件。

我在 ItemTemplate 部分使用了 asp:Button 控件，并使用 Repeater 显示子项在 EditTemplate 部分中使用了 asp:Button 和其他用户控件。我已将 OnEditCommand 事件处理程序连接到 asp:Button 控件。下面的代码段逐步解释了实现细节。

使用代码

Outlookbar 用户控件在 Outlookbar.ascx 中实现。它具有以下 HTML 声明

<%@ Register TagPrefix="uc1" TagName="ImageHandler" Src="ImageHandler.ascx" %>
<asp:DataGrid ShowHeader="False"  runat="server" OnEditCommand="OnEdit">

<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:Button Width="100%" BackColor="#cccc99" 
  Text='<%# DataBinder.Eval(Container.DataItem,"Caption") %>' 
  runat="server" CommandName="Edit" ID="Button1"/>
</ItemTemplate>
<EditItemTemplate>
<asp:Button width="100%" BackColor="#cccc99" 
  Text='<%# DataBinder.Eval(Container.DataItem,"Caption") %>' 
  runat="server" CommandName="Cancel" ID="Button2"/>
<uc1:ImageHandler id="imgHandle1" 
  SelectedIndex='<%# DataBinder.Eval(Container.DataItem,"MenuItemIndex") %>' 
  runat="server">
</uc1:ImageHandler>
</EditItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>

如果您查看上面的 HTML，可以看到我使用了 DataGrid 控件。请注意，我将 ShowHeader 属性设置为 false，因为此控件没有标题。在 Itemtemplate 部分，我声明了 asp:Button 控件并将其宽度设置为 100%。我还将 commandname 属性设置为 'Edit'，以便它连接到 OnEditCommand 事件处理程序。EditTemplate 部分包含 asp:Button 和另一个显示所有子菜单项的用户控件。我将在本文后面解释这个用户控件。请注意，asp:Button 的 Text 属性设置为绑定到 Datagrid 的 Datasource 的 Caption 项。ImageHandler 用户控件具有 SelectedIndex 属性，该属性使用 Datasource 的 menuItemIndex 属性设置。

此控件的代码隐藏文件具有以下详细信息

namespace OutLookStyleBar
{
    using System;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
    using System.Xml;
    using System.IO;

    /// <SUMMARY>
    ///        Summary description for OutlookStyleBar.
    /// </SUMMARY>
    public abstract class OutlookStyleBar : System.Web.UI.UserControl
    {
        protected System.Web.UI.WebControls.DataGrid dgOutLookStyleBar;
        private string m_sMenuItemsXML;
        private void Page_Load(object sender, System.EventArgs e)
        {
            if(!IsPostBack)
            {
                GetMenuItems();
                dgOutLookStyleBar.EditItemIndex=2;
                BindData();
            }
        
        }

如果您查看上面的代码片段，可以看到代码隐藏类 OutlookStyleBar 派生自 System.Web.UI.UserControl，并具有以下变量。第一个变量是 dgOutLookStyleBar，类型为 DataGrid，另一个是 string 变量 m_sMenuItemsXML。这个字符串变量保存所有主菜单项的 XML。这个 XML 字符串用于设置 DataGrid 的 DataSource 属性。它保存在视图状态中，以避免在每次回发时频繁访问数据库。

如果您查看 Page_Load 处理程序，它会调用 GetMenuItems 方法，该方法从 OutlookItems.xml 填充 m_sMenuItemsXML。

由于我想显示一行项展开，我已将 EditItemIndex 设置为 2。因此，当控件首次加载时，它将显示第三行展开。BindData 方法将 XML 字符串绑定到 DataGrid。

请从本文顶部显示的链接下载源代码，以获取上述方法的详细实现。现在，让我们看看 OnEdit 事件处理程序中的代码。

public void OnEdit(object source, 
       System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
  dgOutLookStyleBar.EditItemIndex= e.Item.ItemIndex;
  BindData();
}

如果您查看上面的代码，它非常简单。当用户点击任何菜单项时，OnEditCommand 会触发，并且 OnEdit 事件处理程序会被调用。这只是将 EditItemIndex 属性设置为用户选择的行值。这在 DataGridCommandEventArgs 类型的事件参数中传递。属性是 e.Item.ItemIndex。设置 EditItemIndex 后，下一步是调用 BindData 方法，以便 DataGrid 将根据所选行的 EditTemplate 部分进行绘制。其余行则根据 Itemtemplate 部分中指定的内容进行绘制。

现在，让我们看看内部控件是如何实现的。

此控件在 ImageHandler.ascx 中实现。我之所以这样命名，是因为它使用了 asp:ImageButton 控件来表示子菜单项以及向上和向下滚动。HTML 声明如下所示

<table cellSpacing="1" cellPadding="1" width="100%" bgColor="#808080" border="0">
<tr>
    <td align="right" height="15"><asp:imagebutton id="btnUp" 
             Runat="server" ImageUrl="Images/UpArrow.gif" Height="15px" 
             Width="30px"></asp:imagebutton></td>
</tr>
<tr>
    <td align="middle">
     <asp:repeater id="drImageList" runat="server" 
                  OnItemCommand="ImageSelect_Handler">
        <HeaderTemplate>
          <div style="WIDTH: 100%; BACKGROUND-COLOR: #808080">
        </HeaderTemplate>
        <ItemTemplate>
          <br />
        <span>
         <asp:ImageButton Width="40px" Height="40px" CommandName="Item" 
            BackColor="#cccc99" 
            ImageUrl='<%# DataBinder.Eval(Container.DataItem,"ImageURL") %>' 
            Runat="server" />
        </span>
        <br />
        <span style="COLOR: white">
          <%# DataBinder.Eval(Container.DataItem,"Caption") %>
        </span></br>
        </ItemTemplate>
        <FooterTemplate>
          <br />
          </div>
        </FooterTemplate>
    </asp:repeater> </td>
   </tr>
   <tr>
        <td align="right" height="15"><asp:imagebutton id="btnDown" 
        Runat="server" ImageUrl="Images/DownArrow.gif" Height="15px" 
        Width="30px"></asp:imagebutton></td>
   </tr>
</table>

在上面的 HTML 代码中，我声明了包含三行的 table 标签。在第一行的 <td> 标签中，我使用了 asp:ImageButton 控件来表示向上箭头。中间行的 <td> 标签包含 Repeater 控件，最后一行 <td> 标签包含另一个 asp:ImageButton 控件来表示向下箭头。向上和向下箭头按钮控件提供处理程序来处理 Repeater 控件中显示的图像项的滚动。

如您所知，Repeater 控件非常灵活，使我们能够控制绘制的内容。我在其 HeaderTemplate 中使用了 <DIV> 标签，并在 <span> 标签内使用了 asp:ImageButton 控件。另一个 <span> 标签用于包含 Image_Menu_Item 的 Caption。最后，Footer Template 包含结束 </DIV> 标签。

现在，让我们看一下 ImageHandler.ascx 的代码隐藏文件，它位于 ImageHandler.ascx.cs 文件中

namespace OutLookStyleBar
{
    using System;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
    using System.Xml;
    using System.IO;

    /// <SUMMARY>
    ///        Summary description for ImageHandler.
    /// </SUMMARY>
    public abstract class ImageHandler : System.Web.UI.UserControl
    {
        protected System.Web.UI.WebControls.Repeater drImageList;
        private string m_sImageItemsXML;
        protected System.Web.UI.WebControls.ImageButton btnUp;
        protected System.Web.UI.WebControls.ImageButton btnDown;
        private int m_iSelectedIndex;
        private const int MAX_REPEATER_ITEMS =3;
        private int m_iCurrentPos =1;
        private int m_iTotalItems =8;

        private void Page_Load(object sender, System.EventArgs e)
        {
            // Put user code to initialize the page here
            if(!IsPostBack)
            {
            
                m_iCurrentPos=1;
                ViewState["CurrentPos"]= m_iCurrentPos.ToString();
                GetNewItems();
                BindData();

            }
            else
            {
                if((string)ViewState["CurrentPos"] != null)
                {
                    m_iCurrentPos = 
                          Int32.Parse((string)ViewState["CurrentPos"]);
                    m_iTotalItems = 
                          Int32.Parse((string)ViewState["TotalItems"]);
                }
                else
                {
                    m_iCurrentPos=1;
                    m_iTotalItems=5;
                }
            }
            
        }

如果您查看上面的代码片段，我声明了类 ImageHandler，它派生自 System.Web.UI.UserControl，并具有以下声明

protected System.Web.UI.WebControls.Repeater drImageList;

private string m_sImageItemsXML;

protected System.Web.UI.WebControls.ImageButton btnUp;

protected System.Web.UI.WebControls.ImageButton btnDown;

private int m_iSelectedIndex;

private const int MAX_REPEATER_ITEMS =3;

private int m_iCurrentPos =1;

private int m_iTotalItems =8;
  • drImageList 是一个 Repeater 类型的变量，它将包含所有表示为图像的子菜单项。
  • btnUp 和 btnDown 是两个 ImageButton 类型的变量，用于为 Repeater 项的向上和向下滚动提供处理程序。
  • m_iSelectIndex 是 int 类型的变量，用于保存父菜单项的位置，在本例中是 OutlookBar.ascx 的 DataGrid 行。这个变量很重要，因为它用于根据其值从 ImageItems.xml 中检索子菜单项。
  • MAX_REPEATER_ITEMS 是一个整数常量，用于定义在 Repeater 中任何给定时间显示的最大项目数。
  • m_iCurrentPos 是整数变量，用于存储 Repeater 中显示的首项位置。m_iTotalItems 用于存储子菜单项的总数。这两个变量的值控制何时显示或隐藏向上和向下箭头按钮。
  • m_sImageItemsXML 是一个字符串类型的变量，用于存储从 ImageItms.xml 检索到的 XML 字符串。

在 Page_Load 事件处理程序内部，我们通过调用 GetNewItems 方法检索子菜单项，然后调用 BindData 方法将检索到的 XML 绑定到 Repeater。它还将 m_icurrentPos 设置为 1，以显示等于 MAX_REPEATER_ITEMS 的图像顶部列表。

请注意，这些变量的值保存在视图状态中，以便在用户向上或向下滚动时，在回发期间可以跟踪它们。

SelectedIndex 被定义为 public 属性，父控件使用它来设置其值。一旦设置，它将调用 GetNewItems 和 BindData 方法来刷新 Repeater 的 ImageList。代码片段如下所示

// Sets the Selected Index property and refreshes repeater list based on new value.
public int SelectedIndex
{
    set {
        m_iSelectedIndex=value; 
        GetNewItems();
        BindData();
    }
}

GetNewItems 方法负责根据 SelectedIndex 属性的值和 m_iCurrentPos 的值从 XML 文件中检索子菜单项。它使用 XPATH 表达式从 XML 中检索适当的项。BindData 方法非常标准，因为它将 XML 字符串绑定到 Repeater。您可以从本文顶部显示的链接下载代码并参考其详细信息。

结论

我们看到了 ASP.NET 的强大功能，尤其是 DataGrid 和 Repeater，如何用于开发像 OutlookBar 这样丰富的用户控件。源代码包含包含 OutlookBar 用户控件的测试 Web 表单。请下载并查看工作演示。如果您遇到任何困难，请通过 gokuldasc@yahoo.com 与我联系。祝您好运！！！

我的其他文章

© . All rights reserved.