【问题标题】:asp.net RadioButtonList order of html elementsasp.net RadioButtonList html元素的顺序
【发布时间】:2009-09-07 03:23:01
【问题描述】:

我从一家设计机构收到以下 html,将在其中一个 asp.net webapps 上以表单的形式显示:

<label>
    <input type="radio" />
    Label Text 1
</label>

<label>
    <input type="radio" />
    Label Text 2
</label>

<label>
    <input type="radio" />
    Label Text 3
</label>

您可以想象生成的输出会将单选按钮放在标签文本的左侧。

由于标签/单选按钮的数量是可变的,我决定使用 RadioButtonList 来动态操作添加的控件数量。

RadioButtonList 的问题是它生成的 html 不是很灵活。 我最接近客户想要的布局的是以下代码。但这会将单选按钮放在标签的右侧。 :(

    <asp:RadioButtonList ID="DayOfWeekRadioButtonList" runat="server" RepeatLayout="Flow" RepeatDirection="Vertical" TextAlign="Left">
    </asp:RadioButtonList>

这是生成的 HTML:

<label for="ControlID1">Text 1</label>
<input id="RadioControlID1" type="radio" name="NameRadioControlID1" value="Text 1" />

<label for="ControlID2">Text 2</label>
<input id="RadioControlID2" type="radio" name="NameRadioControlID2" value="Text 2" />

<label for="ControlID3">Text 3</label>
<input id="RadioControlID3" type="radio" name="NameRadioControlID3" value="Text 3" />

是否可以将输入控件放置在标签内?

【问题讨论】:

    标签: asp.net html radiobuttonlist


    【解决方案1】:

    如果不制作自定义控件来覆盖该行为,您将无法让 RadioButtonList 控件按照您的描述呈现标签内的按钮。

    正如 womp 所提到的,您需要设置 TextAlign="Right" 而不是“Left”,或者如果您将该属性留空,它应该默认为预期的行为。将其设置为“右”意味着“将文本与单选按钮的对齐”。 “左”则相反。

    您可以使用常规标签和 RadioButton 控件来获得所需的输出,而不是制作自定义控件,但您需要关联一个 GroupName 并单独检查每个按钮。这可以通过将它们放在面板控件中然后循环它们并确定选择哪个来增强。

    它是更多的标记,但它与您提到的格式相匹配:

    <label>
      <asp:RadioButton ID="rbMonday" runat="server" GroupName="DaysOfWeek" />
      Monday
    </label>
    

    坦率地说,标记并不重要,因为它不提供任何额外的功能。最终,您想要捕获输入,并且标签是否包含单选按钮不会影响该目标。如果您正在处理的代理机构对此很灵活,您可以解释不同的选项,也许他们会接受默认格式,这可以提高您的工作效率并让您在这方面花费更少的时间(反过来,这应该使他们更快乐)。

    【讨论】:

    • @pablo:看起来你投了反对票,但没有解释回复的问题。它对你不起作用还是不是你想要的?
    【解决方案2】:

    您的TextAlign 属性设置为“Left”,这意味着文本位于按钮的左侧。我相信将其设置为 TextAlign = "Right" 应该可以满足您的需求。

    【讨论】:

    • 不幸的是,这个属性与我的问题无关。 :(
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-20
    • 1970-01-01
    相关资源
    最近更新 更多