图形 ASP.NET 控件

分享于 

10分钟阅读

Web开发

  繁體

Graphical controls

介绍

可以创建非常好的网页,甚至可以使用 CSS ( 例如改变文本框和按钮的外观是有可能的) 更改某些窗体控件的外观。 本文描述了两个与标准 ASP.NET CheckBoxRadioButton 具有相同功能的自定义控件,以及允许你使用图像更改控件设计的属性。 如何在网页上使用复选框功能将 icon 放置在网页上,例如,我想将一些数据标记为锁定。

这两个控件非常简单,因为所有功能都与标准控件的功能相同,因这里可以使用。 这些控件使用 JavaScript,但是它使用 IE。Opera 和 Mozilla ( Firefox )的最新版本测试,因此它应该正确显示给大多数互联网用户。

复选框控件的另一个有用特性是,它支持三个状态。 因为标准HTML复选框不支持第三种状态,所以这可能非常有用,所以在 ASP.NET 中无法创建三个状态复选框。 如果你想允许第三个状态集 ThreeState 属性 true 你还需要一个或者两个( 如果你希望有一个不同的活动状态图像) 图像。 若要获取三种状态复选框的状态,可以使用 CheckState 属性,该属性返回 CheckedUnchecked 或者 Indeterminate

背景

图形复选框控件生成 img 标记,后面跟 span 隐藏起来 输入 控件的状态。控件的状态保存在隐藏 输入 当用户单击图像( 或者在与复选框关联的文本上) 时,控件将更改它的状态( 隐藏控件的值) 并更改 src 图像元素的属性。 ( 也可以在用户将鼠标移过复选框时显示图像- 这是使用 onmouseoveronmouseout 事件完成的。)

图形单选按钮与复选框非常类似,但有一个复杂的地方: 用户应该只能在每个组中检查一个按钮。 这个问题的唯一解决方案是使用更多的JavaScript。 为每个控件( 这是使用 IsStartupScriptRegisteredRegisterStartupScript 方法完成的,因此检查是否对同一组的任何控件生成了这里函数是非常简单的。) 生成一个名为 radio{GroupName}Sel的JS函数。 在单击该函数时,组中的每个控件都调用这里函数,因此这里函数可以取消选中以前选中的单选按钮。

控件需要实现接口 IPostBackDataHandler,以便在 postback 之后读取数据。 这里接口包含两个方法。 LoadPostData 在 postback 之后由 ASP.NET 调用,它处理 postback 数据( 从 POST Collection 读取数据并将新值与存储在ViewState中的值进行比较) 并选择调用引发 CheckedChanged 事件的第二方法( RaisePostDataChangedEvent )。

使用这里控件

设计器

Toolbox

Design time

这两个控件都支持设计时间,因此你可以简单地将它们添加到页面,就像任何其他 ASP.NET 控件一样。 首先,你需要向工具箱中添加控件。 为此,右键单击工具箱并选择"添加/删除项目"。 在"自定义工具箱"对话框中,单击浏览按钮并选择 EeekSoft.Web. Controls.dll。 单击 OK,之后,你应该能够在你的工具箱中看到两个新控件。

你可以修改属性窗口中的属性。 最重要的是定义控件所使用图像位置的属性。 输入图像 URL ( CheckedImg 或者 UncheckedImg ) 后,控件将自动更新它的外观。

代码

下面的代码演示如何从代码中访问控件属性:

<!-- Demo1.aspx --><%@RegisterTagPrefix="cc1"Namespace="EeekSoft.Web.Controls"Assembly="EeekSoft.Web.Controls"%><cc1:graphicalcheckboxid="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:graphicalcheckboxid="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:labelid="lblInfo"runat="server"></asp:label><asp:buttonid="btnPostback"runat="server"Text="Do postback!"></asp:button>
// Display what checkboxes are checkedprivatevoid btnPostback_Click(object sender, System.EventArgs e)
{
 if (check1.Checked&&check2.Checked)
 lblInfo.Text="Both checkboxes are checked!";
 elseif (check1.Checked)
 lblInfo.Text="First checkbox is checked!";
 elseif (check2.Checked)
 lblInfo.Text="Second checkbox is checked!";
 else 
 lblInfo.Text="No checkbox is checked!";
}

ThreeState chcekbox

如我所描述的,上面 支持第三个状态,因这里你可以使用它来允许用户从三个状态( 第三状态通常表明值不能明显地确定) 选择。 以下代码演示如何创建三个状态复选框以及如何从代码获取它的状态:

<!-- Demo2.aspx --><%@RegisterTagPrefix="cc1"Namespace="EeekSoft.Web.Controls"Assembly="EeekSoft.Web.Controls"%><cc1:graphicalcheckboxid="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:labelid="lblInfo"runat="server"></asp:label><asp:buttonid="btnPostback"runat="server"Text="Do postback!"></asp:button>
// Display value of three state checkboxprivatevoid 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 --><%@RegisterTagPrefix="cc1"Namespace="EeekSoft.Web.Controls"Assembly="EeekSoft.Web.Controls"%><cc1:graphicalcheckboxLoadGlobalSettings="true"id="check1"runat="server"Text="Checkbox 1"></cc1:graphicalcheckbox><cc1:graphicalcheckboxLoadGlobalSettings="true"id="check2"runat="server"Text="Checkbox 2"></cc1:graphicalcheckbox>
// Demo3.aspx.csusing EeekSoft.Web.Controls;// Save checkbox settings in Page_Load or in Application_Start event handlerGraphicalControlsSettings grs=new GraphicalControlsSettings();string skin="green/";// Set images for chcekbox buttonsgrs.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 buttonsgrs.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 Applicationgrs.Save();

历史记录

  • 7/9/2005 - 几个小的Bug 固定。

    ( 感谢 Andreas Menges的反馈。)

  • 1 - 图形复选框支持三种状态复选框属性,CheckState 和第三个状态的图像。

    ( 感谢bubák对此建议的支持。)

  • 10/2/2004 - 文章的第一个版本。

控制  asp  asp-net  Controls  
相关文章