从单个单选按钮的选择中显示一组/选择的单选按钮的最佳方式？

Question

我有一个表格，对于某些问题会询问是否包含某些内容以及是否不提供原因。

因此，我需要一个单选按钮，它将其值记录到数据库中，就像我使用 RadioButtonFor 设置的正常值一样，如果选择“否”（假），则将显示其他单选按钮的组/列表。

Ofc 这只是理想的解决方案，如果此方法不可行，那么另一种解决方案可能是在控制器中使用 if 语句，这样如果该主单选按钮的值为“是”（true），那么它将设置当将表单记录到数据库时，x、y 和 z 单选按钮设置为“否”（假）。

这是我关于如何获得相同的最终结果的两个想法，但对于第一个想法，我认为执行其功能的最简单方法是在 jquery 中，我对 jquery 相当陌生，所以很难想出如何做对于

第二个想法，它 1 不理想，2 我不确定如何引用这些单选按钮/代码 if 语句来执行所述任务。

任何其他想法也将受到欢迎，但希望能够帮助您实施它们。

Answer 1

好吧，我想出了让控制器整理验证的最简单方法，即
if (wd.AppTher == true)
{ wd.AppTherRea = 0;这是下拉列表的示例，对于另一个单选按钮，它将代替“0”或您想要的下拉列表的任何值，因为它是“false”，或者如果您想要/有多个选项int 在 db 字段类型中，那么您也只需将 N/A 或 w/e 值设置为 =，对于多个 RB 或 DDL，然后只需在 { 和 } 之间添加更多内容，wd 是分配用于表示表的值，否则可以使用视图模型值。

Answer 2

我会选择你的第一个解决方案。在页面上渲染两组单选按钮，但使用 css 隐藏第二组。然后在第一组中的单选按钮上设置一些 onclick 事件，以根据单击的单选按钮显示/隐藏第二组。

我认为由于您正在编写 onclick 处理程序，因此手动编写单选按钮的 html 会更容易，但您也可以使用 RadioButtonFor 来管理它。

因此，您的是/否将如下所示：

<input type="radio" name="yesNo" id="yes" onlclick="$('#other-options').hide();' value='true' <%: Model.YesNo ? "checked='checked'" : "" %>/><label for='yes'>Yes</label>
<input type="radio" name="yesNo" id="no" onlclick="$('#other-options').show();' value='false'<%: !Model.YesNo ? "checked='checked'" : "" %>/><label for='no'>No</label>

您的其他选项将如下所示：

<div id='otherOptions' <%: Model.YesNo ? "style='display: none;'" : "" %>>
    <input type="radio" name="XYesNo" id="xyes" value='true'/><label for='xyes'>X Yes</label>
    <input type="radio" name="XYesNo" id="xno" value='false'/><label for='xno'>X No</label>
    <input type="radio" name="YYesNo" id="yyes" value='true'/><label for='yyes'>Y Yes</label>
    <input type="radio" name="YYesNo" id="yno" value='false'/><label for='yno'>Y No</label>
    <input type="radio" name="ZYesNo" id="zyes" value='true'/><label for='zyes'>Z Yes</label>
    <input type="radio" name="ZYesNo" id="zno" value='false'/><label for='zno'>Z No</label>
</div>

在您的操作方法中，如果第一个 YesNo 为 true，则忽略任何 x,y,z 值：

if(model.YesNo){
    //persist false values for x,y,z
} else {
    //check model for values of x,y,z
}

Answer 3

嗯，这可能听起来有些过分，但我会选择两种解决方案。从演示的角度来看，您需要 javascript 脚本端代码来正确执行此操作 - 并且还需要服务器端代码来正确执行验证。

如果您仅实现客户端验证，那么如果浏览器不支持 javascript，或者只是禁用了 javascript，系统将如何表现？您不能认为 JavaScript 支持是理所当然的...

OTOH，如果您添加了您正在谈论的客户端功能，您将提供最佳的用户体验...

以及您对如何进行服务器端验证的疑问：那就是使用 ASP.NET MVC 很容易 - 在加载时，只需设置您在发布期间阅读的相同 ViewData 条目/ViewModel 属性。

编辑 那么我们来谈谈完整的解决方案。

再说一遍，我不确定我是否理解您在这里需要什么。您正在谈论单选按钮，但您似乎也认为您将能够单独控制它们（许多单选按钮绑定到许多字段）。通常情况并非如此 - 一组单选按钮通常绑定到相同字段，每个单选按钮表示不同的值（因此与单个下拉列表完全相同）。当然，这并不意味着您的数据库必须以相同的方式运行...

请参阅此示例：

<% using(Html.BeginForm("HandleForm", "Home")) { %>
    Select your favorite color:<br />
    <%= Html.RadioButton("favColor", "Blue", true, new { id = "rbColorBlue", class = "favColor" }) %> Blue <br />
    <%= Html.RadioButton("favColor", "Purple", false, new { id = "rbColorPurple", class = "favColor" })%> Purple <br />
    <%= Html.RadioButton("favColor", "Red", false, new { id = "rbColorRed", class = "favColor" })%> Red <br />
    <%= Html.RadioButton("favColor", "Orange", false, new { id = "rbColorOrange", class = "favColor" })%> Orange <br />
    <%= Html.RadioButton("favColor", "Yellow", false, new { id = "rbColorYellow", class = "favColor" })%> Yellow <br />
    <%= Html.RadioButton("favColor", "Brown", false, new { id = "rbColorBrown", class = "favColor" })%> Brown <br />
    <%= Html.RadioButton("favColor", "Green", false, new { id = "rbColorGreen", class = "favColor" })%> Green
    <%= Html.RadioButton("favColor", "Other", false, new { id = "rbColorOther", class = "favColor" })%> Other
    <div id="divOtherColorText" style="display: block">
         Describe the color you want here:<br />
         <%=Html.TextArea("otherColorText", new { id = "taOtherColor" }) %><br />
    </div>
<% } %>

这将绑定到单个控制器参数，favColor，具有默认值“蓝色”的价值。请注意，为了方便起见，我们为每个单选按钮分配了一个不同的客户端 ID（rbColorBlue、rbColorGreen 等）。这意味着您将能够在 jQuery 代码中单独处理每个单选按钮，即使它们对服务器端控制器代表单个值。

谈论服务器端代码，操作将如下所示：（

public class HomeController : Controller
{
    public ActionResult HandleForm(string favColor, string otherColorText)
    {
        // Add action logic here
        // If you want to have a separated field for your database,
        // just do something like that:
        MyDbFacade.BlueColorField = (favColor == "Blue");
        MyDbFacade.GreenColorField = (favColor == "Green");
        ...

        return View();
    }

}

当然，您也可以使用 ViewModel，但我不会在这里讨论该选项。）

回到客户端。假设您不想显示 taOtherColor，除非用户选择 rbColorOther 单选按钮。 jQuery 代码将是这样的：

$(document).ready(function() {
    // If user selects any radiobutton:
    if ( $('#rbColorOther:checked').length > 0) {
        $("#divOtherColorText").show();
    } else {
        $("#divOtherColorText").hide();
    }
});

我想就是这样。如果我错过了什么，请告诉我...:-)