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

图形化 ASP.NET 控件

Tomas Petricek
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.64/5 (53投票s)

2004年10月7日

Ms-PL

4分钟阅读

viewsIcon

291857

downloadIcon

7047

图形化单选按钮和复选框 ASP.NET 控件。

Graphical controls

引言

可以创建非常漂亮的网页，甚至可以使用 CSS 更改某些表单控件的外观（例如，可以更改文本框和按钮的外观），但无法更改复选框和单选按钮的外观。本文介绍了两个自定义控件，它们具有与标准 ASP.NET CheckBox 和 RadioButton 相同的功能，并带有允许您使用图像更改控件设计的属性。另一种使用此类控件的方法是，当您想在网页上放置具有复选框功能的图标时；例如，我想将某些数据标记为隐藏，因此我使用了带有锁定和删除锁定图标的复选框控件。

这两个控件使用起来非常简单，因为所有功能都与标准控件相同，所以如果您想用这些图形化控件替换标准控件，可以使用“搜索/替换”工具。这些控件使用 JavaScript，但已在最新版本的 IE、Opera 和 Mozilla (FireFox) 中进行了测试，因此应该能够正确显示给大多数 Internet 用户。

复选框控件的另一个有用功能是它支持三态。这可能非常有用，因为标准 HTML 复选框不支持第三种状态，因此在 ASP.NET 中无法创建三态复选框。如果要允许第三种状态，请将 ThreeState 属性设置为 true。您还需要一到两张图像（如果您想为活动状态使用不同的图像）。要获取三态复选框的状态，可以使用 CheckState 属性，该属性返回 Checked、Unchecked 或 Indeterminate。

背景

图形化复选框控件会生成 img 标签，后面跟着 span 和隐藏的 input 控件。控件的状态保存在隐藏的 input 控件中。当用户单击图像（或与复选框关联的文本）时，控件会更改其状态（隐藏控件的值）并更改图像元素的 src 属性。（您还可以设置当用户鼠标悬停在复选框上时显示的图像 - 这是通过 onmouseover 和 onmouseout 事件完成的。）

图形化单选按钮与复选框非常相似，但有一个复杂之处：用户应该只能检查每个组中的一个按钮。解决此问题的唯一方法是使用更多的 JavaScript。为每个控件组生成一个名为 radio{GroupName}Sel 的 JS 函数（这是通过 IsStartupScriptRegistered 和 RegisterStartupScript 方法完成的，因此可以轻松检查同一组的任何控件是否之前生成了此函数）。组中的每个控件在单击时都会调用此函数，因此该函数可以取消选中之前已选中的单选按钮。

控件需要实现 IPostBackDataHandler 接口才能在回发后读取数据。此接口包含两个方法。LoadPostData 在回发后由 ASP.NET 调用，它处理回发数据（从 POST 集合读取数据并将新值与 ViewState 中存储的值进行比较）并可选地调用第二个方法 (RaisePostDataChangedEvent)，该方法会引发 CheckedChanged 事件。

使用此控件

设计器

Toolbox

Design time

两个控件都支持设计时，因此您可以像添加任何其他 ASP.NET 控件一样将它们添加到页面中。首先，您需要将控件添加到工具箱。为此，请右键单击工具箱并选择“添加/删除项”。在“自定义工具箱”对话框中，单击“浏览”按钮并选择 EeekSoft.Web.Controls.dll。单击“确定”后，您应该能在工具箱中看到两个新控件。

您可以在属性窗口中修改属性。最重要的属性是定义控件使用的图像位置的属性。输入图像 URL（CheckedImg 或 UncheckedImg）后，控件会自动更新其外观。

代码

以下代码演示了如何从代码中访问控件属性

<!-- Demo1.aspx -->
<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web.Controls"
  Assembly="EeekSoft.Web.Controls" %>
  
<cc1:graphicalcheckbox id="check1" runat="server" 
  CheckedOverImg="checked-over.gif" UncheckedOverImg="unchecked-over.gif" 
  UncheckedImg="unchecked.gif" CheckedImg="checked.gif" Checked="False" 
  Text="First checkbox"></cc1:graphicalcheckbox>
<cc1:graphicalcheckbox id="check1" runat="server" 
  CheckedOverImg="checked-over.gif" UncheckedOverImg="unchecked-over.gif" 
  UncheckedImg="unchecked.gif" CheckedImg="checked.gif" Checked="False" 
  Text="First checkbox"></cc1:graphicalcheckbox>
    
<asp:label id="lblInfo" runat="server" ></asp:label>
<asp:button id="btnPostback" runat="server" Text="Do postback!"></asp:button>
// Display what checkboxes are checked
private void btnPostback_Click(object sender, System.EventArgs e)
{
  if (check1.Checked&&check2.Checked)
    lblInfo.Text="Both checkboxes are checked!";
  else if (check1.Checked)
    lblInfo.Text="First checkbox is checked!";
  else if (check2.Checked)
    lblInfo.Text="Second checkbox is checked!";
  else 
    lblInfo.Text="No checkbox is checked!";
}

三态复选框

如上所述，复选框支持第三种状态，因此您可以在允许用户从三种状态中选择时使用它（第三种状态通常表示值无法明确确定）。以下代码显示了如何创建三态复选框以及如何从代码中获取其状态

<!-- Demo2.aspx -->
<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web.Controls"
  Assembly="EeekSoft.Web.Controls" %>
  
<cc1:graphicalcheckbox id="threeCheck" runat="server"
  ThreeState="True" CheckState="Indeterminate" 
  IndeterminateOverImg="indet-over.gif" IndeterminateImg="indet.gif" 
  CheckedOverImg="checked-over.gif" UncheckedOverImg="unchecked-over.gif" 
  UncheckedImg="unchecked.gif" CheckedImg="checked.gif" 
  Text="Three state checkbox"></cc1:graphicalcheckbox>
    
<asp:label id="lblInfo" runat="server" ></asp:label>
<asp:button id="btnPostback" runat="server" Text="Do postback!"></asp:button>
// Display value of three state checkbox
private void btnPostback_Click(object sender, System.EventArgs e)
{
  switch(threeCheck.CheckState)
  {
    case CheckState.Checked:
      lblInfo.Text="Checkbox is checked!"; break;
    case CheckState.Unchecked:
      lblInfo.Text="Checkbox is unchecked!"; break;
    case CheckState.Indeterminated:
      lblInfo.Text="Value is set to indeterminated!"; break;
  }
}

全局设置图形化外观

如果页面上有多个控件，为控件的每种状态设置图像位置会有点麻烦，因此我创建了一个名为 GraphicalControlsSettings 的对象，该对象允许您在整个应用程序中仅设置一次图像位置。此对象存储所有图像（复选框和单选按钮）的位置，并存储在应用程序状态（Application 属性）中。使用此对象为控件保存设置后，所有 LoadGlobalSettings 属性设置为 true 的控件将自动加载这些设置，因此您不必设置特定图像的位置。

以下示例显示了如何使用此对象（要了解更多信息，请参阅演示应用程序中的 design.aspx.cs 文件）

<!-- Demo3.aspx -->
<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web.Controls"
  Assembly="EeekSoft.Web.Controls" %>
  
<cc1:graphicalcheckbox LoadGlobalSettings="true" id="check1" 
  runat="server" Text="Checkbox 1"></cc1:graphicalcheckbox>
<cc1:graphicalcheckbox LoadGlobalSettings="true" id="check2" 
  runat="server" Text="Checkbox 2"></cc1:graphicalcheckbox>
// Demo3.aspx.cs
using EeekSoft.Web.Controls;

// Save checkbox settings in Page_Load or in Application_Start event handler
GraphicalControlsSettings grs=new GraphicalControlsSettings();
string skin="green/";

// Set images for chcekbox buttons
grs.CheckboxCheckedImg=skin+"check-checked.gif";
grs.CheckboxUncheckedImg=skin+"check.gif";
grs.CheckboxCheckedOverImg=skin+"check-checked-over.gif";
grs.CheckboxUncheckedOverImg=skin+"check-over.gif";

// Set images for radio buttons
grs.RadioCheckedImg=skin+"radio-checked.gif";
grs.RadioUncheckedImg=skin+"radio.gif";
grs.RadioCheckedOverImg=skin+"radio-checked-over.gif";
grs.RadioUncheckedOverImg=skin+"radio-over.gif";

// Save settings to Application
grs.Save();

历史

  • 2005/9/7 - 修复了一些小错误。

    (感谢 Andreas Menges 的反馈。)

  • 2004/12/10 - 图形化复选框现在支持三态复选框属性 ThreeState、CheckState，并添加了第三种状态的图像。

    (感谢 bubák 的建议。)

  • 2004/10/2 - 文章的第一个版本。
© . All rights reserved.