C# 使用嵌套的div而不是表或流呈现RadioButtonList

我正在C#.NET 3.5中以编程方式生成单选按钮列表，并使用

RadioButtonList

来实现这一点。然而，我发现非常令人沮丧的是

RepeatLayout

属性，它只能设置为

Flow

或

Table

表格用于表格数据，不用于显示表单。而flow也没有什么帮助，因为它不适合造型

我真正想要的是一套可以用CSS处理的div。这能做到吗

下面是一些示例来说明我所说的内容和示例代码

流程示例

<span id="s1">
    <input id="s1_0" type="radio" value="Answer A" name="s1">
    <label for="s1_0">Answer A</label>
    <br>
    <input id="s1_1" type="radio" value="Answer B" name="s1">
    <label for="s1_1">Answer B</label>
</span>

---

我认为你应该寻找一个解决CSS的方法，而不是改变结构。即使我在这种结构上也会遇到一些问题，但我的设计团队很容易解决。

您可能想用它来改变

RadioButtonList

的呈现方式

以下是您案例的完整代码：

public class RadioButtonListAdapter : WebControlAdapter
{
    protected override void RenderBeginTag(HtmlTextWriter writer)
    {
        writer.RenderBeginTag("div");
    }

    protected override void RenderEndTag(HtmlTextWriter writer)
    {
        writer.RenderEndTag();
    }

    protected override void RenderContents(HtmlTextWriter writer)
    {
        var adaptedControl = (RadioButtonList) Control;
        int itemCounter = 0;

        writer.Indent++;
        foreach (ListItem item in adaptedControl.Items)
        {
            var inputId = adaptedControl.ClientID + "_" + itemCounter++;

            // item div
            writer.RenderBeginTag("div");
            writer.Indent++;

                // input
                writer.AddAttribute("type", "radio");
                writer.AddAttribute("value", item.Value);
                writer.AddAttribute("name", adaptedControl.ClientID);
                writer.AddAttribute("id", inputId);

                if (item.Selected)
                {
                    writer.AddAttribute("checked", "checked");
                }

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

                // label
                writer.AddAttribute("for", inputId);

                writer.RenderBeginTag("label");

                writer.Write(item.Value);

                writer.RenderEndTag();

            // div
            writer.Indent--;
            writer.RenderEndTag();
        }
        writer.Indent--;
    }
}

要将此适配器连接到应用程序，有两个选项。首先是在第页构造函数中以编程方式执行此操作：

var adapters = Context.Request.Browser.Adapters;
var radioButtonListType = typeof(RadioButtonList).AssemblyQualifiedName;
var adapterType = typeof(RadioButtonListAdapter).AssemblyQualifiedName;
if (!adapters.Contains(radioButtonListType))
{
    adapters.Add(radioButtonListType, adapterType);
}

第二个选项是使用

.browser

文件：

将新的

浏览器文件

添加到项目中。它将驻留在

App\u浏览器

文件夹中。然后用以下声明替换内容：

<browsers>
    <browser refID="Default">
            <controlAdapters>
                <adapter controlType="System.Web.UI.WebControls.RadioButtonList" 
                         adapterType="<your namespace>.RadioButtonListAdapter" />
            </controlAdapters>
    </browser>
</browsers>

他们可以为这个话题打下良好的基础

还有一个开源项目，它解决了默认ASP.NET控件的一些呈现问题。
For.NET 4.5>

您可以获得几乎所有的html，至少是使用OrderedList（或UnOrdered）的结构，然后使用CSS获得您喜欢的样式

<asp:RadioButtonList ID="rblTest" runat="server" TextAlign="Left" RepeatDirection="Vertical" RepeatLayout="OrderedList">
   <asp:ListItem Value="1" Text="Option 1"></asp:ListItem>
   <asp:ListItem Value="2" Text="Option 2"></asp:ListItem>
   <asp:ListItem Value="3" Text="Option 3"></asp:ListItem>
</asp:RadioButtonList>



这将呈现html：

<ol id="rblTest">
    <li>
        <label for="rblTest_0">Option 1</label>
        <input id="rblTest_0" type="radio" name="rblTest" value="0">
    </li>
    <li>
        <label for="rblTest_1">Option 2</label>
        <input id="rblTest_1" type="radio" name="rblTest" value="0">
    </li>
    <li>
        <label for="rblTest_2">Option 2</label>
        <input id="rblTest_2" type="radio" name="rblTest" value="0">
    </li>
</ol>



选择1


选择2


选择2


如果您愿意，设置TextAlign=“Right”会在输入后提供标签

这是使用div设置的最接近的地方，但是，再一次，用div包围整个列表，并从该div设置li和标签css，您应该被设置。
是的，这就是我在这种情况下要做的，只是因为时间限制。实际的造型不是问题所在；将CSS应用于表非常简单。问题是我们使用一个表来显示一些非表格数据。它对任何使用屏幕阅读器的人来说都是一场噩梦。我还注意到.NET4.5有无序列表和有序列表选项，这要好得多。但这对我没有帮助：（（使用3.5）如果你想限制
radioButtonList
我认为不可能在单独的div中禁用
列表项
。但是你可以使用
组名
单独设置
radion按钮
，并在你喜欢的地方设置你的每个
单选按钮
<browsers>
    <browser refID="Default">
            <controlAdapters>
                <adapter controlType="System.Web.UI.WebControls.RadioButtonList" 
                         adapterType="<your namespace>.RadioButtonListAdapter" />
            </controlAdapters>
    </browser>
</browsers>

<asp:RadioButtonList ID="rblTest" runat="server" TextAlign="Left" RepeatDirection="Vertical" RepeatLayout="OrderedList">
   <asp:ListItem Value="1" Text="Option 1"></asp:ListItem>
   <asp:ListItem Value="2" Text="Option 2"></asp:ListItem>
   <asp:ListItem Value="3" Text="Option 3"></asp:ListItem>
</asp:RadioButtonList>

<ol id="rblTest">
    <li>
        <label for="rblTest_0">Option 1</label>
        <input id="rblTest_0" type="radio" name="rblTest" value="0">
    </li>
    <li>
        <label for="rblTest_1">Option 2</label>
        <input id="rblTest_1" type="radio" name="rblTest" value="0">
    </li>
    <li>
        <label for="rblTest_2">Option 2</label>
        <input id="rblTest_2" type="radio" name="rblTest" value="0">
    </li>
</ol>