ASP.NET 中的自定义复选框设计 (ICheck JS)

Question

通常我们在 asp.net 页面中使用复选框是没有问题的。我正在寻找改变复选框设计的解决方案。我发现它使用 js 和 css 文件的 ICHECK 插件。更改后，我的复选框设计良好，但单击事件不起作用。因为我看到了这样的变化：

项目中的普通复选框

<asp:CheckBox ID="atc" runat="server" type="checkbox" name="checkbox" OnCheckedChanged="atc_CheckChanged" Checked="false" AutoPostBack="True" Text='check this' CssClass="icheck" />   

更改了 HTML 中的复选框

<span class="icheck" type="checkbox" name="checkbox"> 
    <div class="icheckbox_square-grey checked" style="position: relative;">
    <input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ctl00$ctl00$fgnbvbn$uyyy$ytyvtholder$rdghjlop$ctl01$fffds\',\'\')', 0)" style="position: absolute; opacity: 0;">
      <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
      </ins>
    </div>
</span>   

它隐藏了复选框并创建了另一个设计，并且单击事件不起作用。

你有什么想法吗？我们可以解决这个问题还是你有更好的想法来改变复选框的设计？

ICHECK 项目地址：https://github.com/fronteed/icheck

问候，

Answer 1

可以通过控制写入客户端的 HTML 设计来创建自己的 CheckBox 设计。

首先创建一个class文件，在这个sn -p customControls.cs。在那里，我们将编写我们的自定义复选框设计。

using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.Adapters;

namespace customControls
{
    public class CheckBoxAdapter : WebControlAdapter
    {
        protected override void Render(HtmlTextWriter writer)
        {
            CheckBox targetControl = this.Control as CheckBox;

            if (targetControl == null)
            {
                base.Render(writer);
                return;
            }

            //checkbox span
            writer.AddAttribute("class", "icheck");
            writer.AddAttribute("type", "checkbox");
            writer.AddAttribute("name", "checkbox");
            writer.RenderBeginTag("span");
            writer.Indent++;

            //checkbox div
            writer.AddAttribute("class", "icheckbox_square-grey checked");
            writer.AddAttribute("style", "position: relative;");
            writer.RenderBeginTag("div");

            //input
            writer.AddAttribute("type", "checkbox");
            writer.AddAttribute("name", targetControl.UniqueID);
            writer.AddAttribute("id", targetControl.ClientID);

            //input attributes
            if (!string.IsNullOrEmpty(targetControl.CssClass))
            {
                writer.AddAttribute("class", targetControl.CssClass);
            }
            if (targetControl.Checked)
            {
                writer.AddAttribute("checked", "checked");
            }
            if (!targetControl.Enabled)
            {
                writer.AddAttribute("disabled", "disabled");
            }

            //add the postback event
            if (targetControl.AutoPostBack == true)
            {
                string pbcode = this.Page.ClientScript.GetPostBackEventReference(targetControl, "");
                writer.AddAttribute("onclick", pbcode);
            }

            writer.RenderBeginTag("input");
            writer.RenderEndTag();

            //checkbox text
            writer.AddAttribute("for", targetControl.ClientID);
            writer.RenderBeginTag("label");       
            writer.Write(targetControl.Text);
            writer.RenderEndTag();

            //checkbox ins
            writer.AddAttribute("class", "iCheck-helper");
            writer.RenderBeginTag("ins");
            writer.RenderEndTag();

            //end div
            writer.RenderEndTag();

            //end span
            writer.Indent--;
            writer.RenderEndTag();

            //register for postback
            Page.ClientScript.RegisterForEventValidation(targetControl.UniqueID);
        }
    }
}

然后将ASP.NET folder 添加到名为App_Browsers 的项目中。在该文件夹中添加Browser File (BrowserFile1.browser)。将以下代码添加到该文件以注册您的自定义 CheckBox。注意adapterType必须匹配customControls的命名空间。

<browsers>
  <browser refID="Default">
    <controlAdapters>
      <adapter controlType="System.Web.UI.WebControls.RadioButton" adapterType="System.Web.UI.WebControls.Adapters.HideDisabledControlAdapter" />
      <adapter controlType="System.Web.UI.WebControls.CheckBox" adapterType="customControls.CheckBoxAdapter" />
    </controlAdapters>
  </browser>
</browsers>

注意使用 adapterType="System.Web.UI.WebControls.Adapters.HideDisabledControlAdapter"。 没有这个单选按钮也将呈现为复选框（我没有 知道为什么）