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

ASP.NET 跨浏览器工具栏

Philipp Sumi
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.86/5 (49投票s)

2005年2月1日

CPOL

8分钟阅读

viewsIcon

273604

downloadIcon

4222

一个灵活的跨浏览器工具栏组件，支持丰富的可视化设计器。支持任意工具栏项、JavaScript 悬停图片、禁用项，并提供便捷的回发事件处理。

Sample Image

Mozilla 中的水平工具栏。选中的项显示悬停图片。

目录

引言

在一个 ASP.NET 项目中，我需要一个灵活的工具栏组件。起初，我在网上搜寻，但没有找到完全符合我要求的。

  • 设计器支持以及运行时操作的灵活 API。
  • 跨浏览器支持（无需支持 NS 4.x）。
  • 易于安装和部署（无需复制支持文件等）。
  • 通过 CSS 进行灵活的格式化和皮肤定制。
  • 免费部署 - 应在开源项目中使用。

因此，我提出了自己的解决方案。该组件在所有主流浏览器上都能正常渲染，并且由于其丰富的可视化设计器支持，使用起来非常方便。主要特性包括：

  • 在所有主流浏览器上都能正常渲染。
  • 完整的设计器支持。
  • 支持预定义的项类型，如图片、文本字段、链接或图片按钮。
  • 可以通过 容器项 插入任意控件。
  • 可选的悬停图片。
  • 如果项被禁用，则支持不同的图片。
  • 支持水平和垂直渲染。
  • 便捷的 事件处理。
  • 自定义分隔符。

该组件的在线工作演示可在 此处 获得。

在设计器中构建工具栏

创建工具栏无需编写代码。如果您已将控件添加到 IDE 的工具箱中，只需将其拖到您的 Web 窗体上即可。由于尚无预览内容，它将显示一个灰色矩形。

所有控件的属性都可通过属性网格的“Toolbar”部分进行访问。它们都相当直观易懂。

要添加项到工具栏，只需单击 Items 属性（见上文）的按钮，这将打开一个新的设计器窗口。下面是我为项目示例使用的工具栏设置的截图。正如您所看到的，工具栏包含六个不同的项。可以通过左下角的下拉列表轻松添加新项。

设置工具栏和工具栏项非常直接，因为您可以在设计时获得工具栏的正确预览。因此，了解该组件的最佳方式是在您的 IDE 中尝试不同的设置……

工具栏项

该工具栏内置支持多种项类型。此外，还可以通过使用空的容器项将任意控件插入到工具栏中。（顺便说一句 - 您也可以在没有工具栏的情况下使用这些项。如果您只需要页面上的单个图片按钮进行悬停效果 - 只需将控件直接拖到 Web 窗体上即可完成。）

ToolbarImage

此项渲染一个简单的图片，可选择添加悬停效果。可以指定一个附加的 DisabledImageUrl，当项的 RenderDisabled 属性为 true 时，会渲染此图片。可以指定一个附加的标签（LabelText 属性），该标签会渲染在图片旁边。

ToolbarButton

此项渲染一个图片按钮，该按钮会回发到服务器并在工具栏上引发 ItemSubmitted 事件。与 ToolbarImage 控件一样，此项支持悬停和禁用图片。如果项的 RenderDisabled 属性设置为 true，则渲染普通图片而不是图片按钮。

可以指定一个附加的标签（LabelText 属性），该标签会渲染在图片按钮旁边。在未来的版本中，我将用一个也回发到服务器的 LinkButton 替换此标签。

ToolbarLink

此项渲染一个超链接图片。与 ToolbarImage 控件一样，此项支持悬停和禁用图片。如果项的 RenderDisabled 属性设置为 true，则渲染普通图片而不是链接。可以指定一个附加的标签（LabelText 属性），该标签会作为超链接的一部分进行渲染（参见上面垂直工具栏的示例图片）。

ToolbarTextBox

此项渲染一个 ASP.NET TextBox。您可以通过项的 Text 属性获取/设置项的文本。要格式化文本框，请使用项本身的属性（CssClass、Width、Height 等）。如果文本被更改，此项会在工具栏上引发 ItemSubmitted 事件。与标准的 ASP.NET TextBox 一样，它提供了一个 AutoPostBack 属性，当文本更改时会导致自动回发到服务器。

ToolbarLabel

渲染简单的文本，用 HTML span 标签括起来。可用于在自己的项单元格中渲染文本。这是安全地为工具栏分配文本而不会出现格式问题的方式（有关更多信息，请参见 故障排除）。

ToolbarSeparator

渲染一个分隔符项。分隔符是非常简单的控件，通过工具栏的属性进行配置。这使您可以一次性方便地配置所有工具栏的分隔符。如果您希望以更灵活的方式分隔项，只需使用 ToolbarImage 项即可。

ControlContainerItem

此类是任意控件的空容器。这使您可以在运行时将任意控件插入工具栏。

假设您想在工具栏中添加一个 ASP.NET DropDown 控件

  • 使用设计器将 ControlContainerItem 添加到工具栏（不要忘记 ItemId - 您在运行时引用该项时需要它！）。
  • 在运行时，只需两行代码即可分配 DropDown 控件。
private void Page_Load(object sender, System.EventArgs e)
{  
  //get the container item
  ToolbarItem item = this.Toolbar1.Items["DropdownItem"];
  //add the dropdown to the container's Controls collection
  item.Controls.Add(this.MyDropDownList);
}

示例项目包含一个 Web 窗体（containeritem.aspx），该窗体在运行时添加了一个 CheckBox 控件。

代码使用

回发事件处理

您可以通过工具栏的 ItemPostBack 事件为回发工具栏项注册事件处理程序。当事件发生时，工具栏会将导致回发的项提交给事件处理程序。如果有多个项回发到服务器，您可能会使用 ItemId 属性来确定如何响应事件。

典型的事件处理程序如下所示：

/// <summary>
/// Handles the toolbar's button events.
/// </summary>
/// <param name="item">Clicked toolbar button.</param>
private void Toolbar1_ItemPostBack(ToolbarItem item)
{
  if (item.ItemId == "SAVE")
  {
      //save something
  }
  else if (item.ItemId == "DELETE")
  {
      //delete something
  }
}

运行时处理工具栏项

您可以轻松地在运行时自定义工具栏。工具栏的 Items 集合提供了查找、添加或删除项所需的一切。

例如：示例项目中的“编辑”按钮是在运行时创建的。在下面的代码中，创建了一个新的 ToolbarButton 对象。然后，确定“保存”按钮的索引，并使用该索引在“保存”按钮之后添加新的“编辑”按钮。

/// <summary>
/// Creates an additional toolbar button and adds it to
/// the toolbar's <c>Items</c> collection.
/// </summary>
private void CreateEditButton()
{
  //create an "edit" button
  ToolbarButton editItem = new ToolbarButton();
  editItem.ID = "EditItem";
  editItem.ImageUrl = "images/edit.gif";
  editItem.RollOverImageUrl = "images/edit_ro.gif";
  editItem.ItemId = "Edit";
  editItem.ToolTip = "Click to enable save button";
  editItem.ItemCellWidth = Unit.Pixel(100);
  //get the index of the save button and insert the
  //edit button right after this one
  int index = this.Toolbar1.Items.IndexOf("Save");
  this.Toolbar1.Items.Insert(index + 1, editItem);
}

注意：动态创建的工具栏项控件未存储在 ViewState 中，因此您必须在回发时重新创建它们！

故障排除

悬停效果不起作用

悬停 JavaScript 使用包含图像（HTML 图像或图片按钮）的 HTML 元素的 id 属性来交换悬停图像。

<img src="save.gif" id="saveitem" />

但是，此属性仅在 ASP.NET ToolbarItem 对象的 ID（而非 ItemId！）属性已正确设置时可用。因此，如果悬停效果不起作用，请检查控件的 ID（当然，在检查完图像 URL 之后 ;-）。

如果您在设计器中配置工具栏，ID 会自动生成。但是，如果您在运行时通过代码添加项，则需要自己指定 ID。

 //create an "edit" button
 ToolbarButton editItem = new ToolbarButton();
 editItem.ID = "EditItem";

非 IE 浏览器的通用格式问题

默认情况下，ASP.NET 为所有非 IE 浏览器输出低版本输出（真糟糕...），这会阻止 CSS 样式被工具栏渲染。例如，如果您为图像项使用标签，您的工具栏可能会看起来很糟糕。

要正确识别 Firefox 等浏览器，更新 browserCaps 配置（代表“浏览器功能”）非常重要。Rob Everhardt 在这方面做得非常出色。您可以在他的 网站 上找到 browserCaps 的介绍、链接和下载。

如果您因某种原因无法更新 browserCaps，您也可以通过外部样式表中的声明来修复工具栏布局（示例假设工具栏的 CSS 类为 mytoolbar）。

/* adjust images and image buttons via external CSS */
.mytoolbar img, .mytoolbar input
{
  vertical-align:middle;
  border: none;
}

Netscape 4.x 上的示例看起来很糟糕

是的，看起来很糟糕，但我完全可以接受。我不得不在已弃用的 HTML 标签（align、border 等）和正确的 CSS 皮肤之间做出选择。我选择了后者，它在所有我测试过的主流浏览器上都能完美运行。

但是，如果您需要该控件的低版本兼容版本，应该只需很少的努力即可获得（但不要指望我来为您完成 ;-）。查看 Toolbar 和 ImageItem 类的渲染方法，并将 CSS 渲染替换为相应的 HTML 属性。

致谢与许可

为了输出悬停链接的 JavaScript，我最初使用了 MetaBuilders 的 RollOverLink 的一个过程，我对其进行了修改以满足我的需求。MetaBuilders 在其网站上提供了各种漂亮的控件 - 值得一看。

水平工具栏示例的背景主题取自出色的 PHPBB2 论坛。垂直工具栏示例的图形是我自己的，您可以随意使用。

此控件根据限制较少的 GNU 宽限通用公共许可证（LGPL）发布。虽然您不能在上面贴上您的名字并声称是您自己的（甚至出售它），但您可以自由地根据您的需求对其进行修改，并将其用于免费和商业应用程序。祝您玩得开心！

新闻稿

这是第一个版本，我很有信心会进行错误修复和功能增强。如果您不想回来检查更新，可以在我的 网站 订阅新闻通讯。

历史

  • V 1.0：初始发布（2005 年 1 月 22 日）
  • V 1.01：更新了具有“Localizable”属性的属性以支持国际化。
  • V 1.02：使库符合 CLS 标准（感谢 Jorge Castellanos）。
© . All rights reserved.