Question

我正在开发一个Web表单页面，其中包含一个GridView，其中包含从asp：RadioButton控件生成的两列单选按钮。

我想在相应的列标题中实现“全选”复选框，在选中时，选中要在该特定列中选中的所有相应单选按钮。

我写了一小部分jQuery可以做到这一点，但它并没有立即起作用。为了让jQuery选择每个单选按钮并将其标记为已选中，我使用CssClass属性设置asp：RadioButton控件的类名：

<asp:RadioButton ID="id" CssClass="myClass" runat="server" ... />

我希望这会产生类似的标记：

<input type="radio" class="myClass" ... />

这意味着我的jQuery选择器将是：

jQuery("input.myClass")

相反，它将输入元素包装在span元素中，并将我指定的类属性应用于span元素而不是input元素。

使用asp：RadioButton控件时，有没有办法阻止ASP.NET在我的input元素周围生成这个包装span元素？

如果ASP.NET必须生成它，是否可以将class属性应用于实际的input元素，而不是包装span元素？

（注意：我已经更新了我的jQuery以使用同时工作的选择器：

jQuery("span.myClass input")

）

Answer 1

System.Web.UI.WebControls命名空间中的Web控件可能在不同的浏览器中呈现不同的方式。你不能指望他们总是渲染相同的元素。他们可能会添加他们认为需要的任何东西，以使其在特定的浏览器中工作，随着每个版本的.NET而变化。

如果您想要控制如何将控件呈现为html，则应该使用System.Web.UI.HtmlControls命名空间中的控件。那就是：

<input type="radio" id="RadioButton1" runat="server" class="myClass" />
<input type="radio" id="RadioButton2" runat="server" class="myClass" />
<input type="radio" id="RadioButton3" runat="server" class="myClass" />

它们将呈现为相应的html元素，不添加任何额外元素。这当然意味着您必须对浏览器兼容性负责，因为控件没有。此外，这些控件没有WebControls命名空间中控件的所有功能。所以这取决于您对具体情况的需求。

您还可以找到另一种方法来选择jquery中的所有输入，例如将其基于id（在所有输入上使用类似名称，并使用通配符全部选择它们）。 Attribute Contains Selector

Answer 2

这是ASP.NET WebForms的抱怨之一是您无法完全控制呈现的HTML。我已经完全按照您的实现使用了jQuery选择器并且工作得很好。

Answer 3

你无法改变asp.net渲染它的控制方式，所以你可以删除asp.net单选按钮并使用runat =“server”来输入标签。

Answer 4

您可以创建新的ASP.Net Server Control并将继承从WebControl更改为RadioButton 然后在渲染后修改html。它删除了span标记，并将属性Class And Title从span移回到rado按钮输入。

public class MYRADIOBUTTON: RadioButton
{
   public bool AddSpanTag { get { return ViewState["AddSpanTag"] != null ? (bool)ViewState["AddSpanTag"] : false; } set { ViewState["AddSpanTag"] = value; } }

    protected override void Render(HtmlTextWriter writer)
    {
        if (AddSpanTag)
        {
            base.Render(writer);
        }
        else
        {
            StringWriter w = new StringWriter();
            HtmlTextWriter rbw = new HtmlTextWriter(w);
            base.Render(rbw);
            rbw.Close();                
            string html = w.GetStringBuilder().ToString();
            if (html.Contains("<span"))
            {

                int start = html.IndexOf("<input");
                int end = html.IndexOf("/>", start);
                string rbHtml = html.Substring(start, (end - start));

                if (CssClass != "")
                    rbHtml = rbHtml + " class=\"" + CssClass + "\"";

                if (ToolTip != "")
                    rbHtml = rbHtml + " title=\"" + ToolTip + "\"";

                    html = rbHtml + "/>";                    
            }


            writer.Write(html);
        } 
}

在webproject中构建它之后。在Designview中打开一个页面，然后你应该在工具箱中使用自定义的radiobutton控件获得一个新的Tab。将其拖到页面并将Property AddSpanTag设置为false。

<cc1:MYRADIOBUTTON ID="btnSel" ToolTip="Select" GroupName="select" AddSpanTag="false" runat="server" />

CssClass属性在不正确的元素上生成类名

4 个答案: