从后面的 ASP 代码中添加 Bootstrap 样式的单选按钮

Posted 2023-03-27

【中文标题】从后面的 ASP 代码中添加 Bootstrap 样式的单选按钮

【英文标题】：Add Bootstrap styled radio button from ASP code behind

【发布时间】：2016-03-27 04:19:58

【问题描述】：

我需要在网页上动态生成一组单选按钮。为了为 Bootstrap 设置适当的样式，它们需要如下所示：

<div class="col-sm-3">
    <div class="radio">
        <label>
            <input type="radio" name="radioButtonGroup" value="1" />
            Option 1
        </label>
    </div>
</div>

我目前正在从代码隐藏中生成按钮，如下所示：

RadioButton r = new RadioButton

    AutoPostBack = true,
    GroupName = "radioButtonGroup",
    Text = "Option 1"
;
r.Attributes.Add("Value", "1");
r.CheckedChanged += RadioButtonChanged;

htmlGenericControl inner = new HtmlGenericControl("div");
inner.Attributes.Add("class", "radio");
inner.Controls.Add(r);

HtmlGenericControl outer = new HtmlGenericControl("div");
outer.Attributes.Add("class", "col-lg-3");
outer.Controls.Add(inner);

RadioButtonDiv.Controls.Add(outer);

这给了我一些东西接近，但没有雪茄：

<div class="col-sm-3">
    <div class="radio">
        <input id="ctl00_body_ctl02" type="radio" name="ctl00$body$radioButtonGroup" value="1" onclick="javascript: setTimeout('__doPostBack(\'ctl00$body$ctl02\',\'\')', 0)">
        <label for="ctl00_body_ctl02">Option 1</label>
    </div>
</div>

忽略所有的 ASP 垃圾，问题是标签没有环绕输入，并且 Bootstrap 中的格式最终都很难看。

有谁知道强制 ASP.Net 将输入包装在标签中的方法？还是我以某种方式接近这个错误。

我看到的唯一其他选项是使用 AJAX 查询从 Javascript 生成单选按钮。实际上，在我意识到当值发生变化时我需要执行服务器端操作之前，我就开始了这条路。因此，尽管我可以在客户端创建它们并附加服务器端事件，但我会丢失每个帖子的状态。这样做可能是可行的，但它似乎更加笨拙。

---

更新：所以我意识到如果我不直接在单选按钮上设置文本，我可以将它包装在标签中。还是不行。我可以插入一个System.Web.UI.WebControls.Label，但它会在 HTML 中生成一个<span>。 我可以插入 new HtmlGenericControl("label"); 并正确生成标签，但我不能先添加控件和 然后 文本：

HtmlGenericControl radioLabel = new HtmlGenericControl("label");
radioLabel.Controls.Add(r);
radioLabel.InnerText = "Option1";

生成<label>Option1</label>，但没有单选按钮。像这样颠倒控制和文本的顺序：

HtmlGenericControl radioLabel = new HtmlGenericControl("label");
radioLabel.InnerText = "Option1";
radioLabel.Controls.Add(r);

导致<label>Option1<input ...></label> 并且无法正确呈现（单选按钮与文本重叠）。

【参考方案1】：

我找不到这样做的方法。我将把问题留在这里，因为我认为这仍然是一个有效的问题

我解决它的方法是在客户端 (javascript) 生成单选按钮并使用 AJAX POST 来触发服务器端操作（通过 WCF 数据服务）。

将此标记为正确答案感觉不对，因为这是一种变通方法，而不是严格意义上的问题答案。但是community wiki 说我应该发布并接受我找到的任何解决方案：

最终，您将解决问题或找到解决方法（可能是，“这不起作用，所以这就是我所做的”）。请添加包含此信息的答案并接受您自己的答案，以便有相同问题的其他人可以看到您最终遵循的路径。

也就是说，如果有人有其他方法，我很乐意更新“正确”答案。