asp.net RadioButtonList html元素的顺序
我从一家设计机构收到了以下 html，将在 ASP.NET Web 应用程序之一上以表单形式显示：
<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" />
是否可以将输入控件放置在标签内？
I've received from a design agency the following html to be displayed in a form on one of 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>
You can imagine that the output produced will place the radio button on the left of the label text.
Since the number of labels/radio buttons is variable I decided to use the RadioButtonList to dynamically manipulate the number of controls added.
The problem with the RadioButtonList is that the html produced by it is not very flexible.
The nearest that I got to the layout my customer wants is the following code. But this places the radio buttons on the right of the label. :(
<asp:RadioButtonList ID="DayOfWeekRadioButtonList" runat="server" RepeatLayout="Flow" RepeatDirection="Vertical" TextAlign="Left">
</asp:RadioButtonList>
And here is the generated 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" />
Is it possible to place the input control within the label?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您将无法让 RadioButtonList 控件按照您的描述呈现标签内的按钮，而无需创建自定义控件来覆盖该行为。
正如 womp 提到的，您需要设置 TextAlign="Right" 而不是 "Left"，或者如果您将该属性留空，它应该默认为预期行为。将其设置为“Right”意味着“将文本与单选按钮的右侧对齐”。 “左”则相反。
您可以使用常规标签和 RadioButton 控件来获取所需的输出，而不是制作自定义控件，但您需要关联 GroupName 并单独检查每个按钮。这可以通过将它们放置在面板控件中然后循环它们并确定选择哪个来增强。
它是更多标记，但它与您提到的格式匹配：
坦率地说，标记应该不重要，因为它不提供任何额外的功能。最终您想要捕获输入，并且标签是否包含单选按钮不会影响该目标。如果与您打交道的机构对此很灵活，您可以解释不同的选项，也许他们会接受默认格式，这使您更有效率，并允许您在这方面花费更少的时间（反过来，这应该使他们更快乐）。
You won't be able to get the RadioButtonList control to render the button inside the label as you describe without perhaps making a custom control to override the behavior.
As womp mentioned, you need to set TextAlign="Right" instead of "Left," or if you leave that attribute blank it should default to the expected behavior. Setting it to "Right" means "align the text to the right of the radio button." You have the opposite with "Left."
Instead of making a custom control you could use regular labels and RadioButton controls to get the desired output, but you would need to associate a GroupName and check each button individually. This can be enhanced by placing them in a Panel control then looping over them and determining which is selected.
It's more markup but it matches the format you mentioned:
Frankly though, the markup shouldn't matter since it doesn't provide any extra functionality. Ultimately you want to capture the input, and whether the label contains the radio button or not doesn't affect that goal. If the agency you're dealing with is flexible about that you can explain the different options and perhaps they will accept the default formatting, which makes you more productive and allows you to spend less time on this (which, in turn, should make them happier).
您的
TextAlign属性设置为“Left”，这意味着文本位于按钮的左侧。我相信将其设置为TextAlign = "Right"应该可以满足您的要求。Your
TextAlignproperty is set to "Left", which means the text goes to the left of the buttons. I believe setting it toTextAlign = "Right"should do what you want.