Question

我有一个表格，有些问题会询问是否包含了某些内容以及是否提供了理由。

所以我需要一个单选按钮，它向数据库记录它的值，就像我使用RadioButtonFor设置的正常值，如果选择“No”（false），则会显示其他单选按钮的组/列表。

Ofc这只是理想的解决方案，如果这种方法不可行，那么另一种解决方案可能是控制器中的if语句，这样如果主要的无线电按钮的值为“是”（真），那么它将设置将表格记录到数据库时，x，y和z radiobuttons的值为“No”（false）。

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

对于第二个想法，它是1不理想，2我不知道如何引用那些radiobuttons /代码if语句来执行所述任务。

任何其他想法也会受到欢迎，但希望有关如何实施它们的帮助。

Answer 1

我会选择你的第一个解决方案。渲染页面上的两组单选按钮，但用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为真，则在您的操作方法中忽略任何x，y，z值：

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

Answer 2

嗯，这可能听起来有点过分，但我会选择两个解决方案。您需要javascript脚本端代码才能从演示文稿的角度进行操作 - 您还需要服务器端代码才能进行验证。

如果您只实现客户端验证，如果浏览器不支持javascript，或者它刚被禁用，系统将如何表现？您无法将javascript支持视为理所当然......

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

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

编辑让我们谈谈一个完整的解决方案。

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

见这个例子：

<% 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，默认值为“Blue”。请注意，为方便起见，我们为每个单选按钮分配了一个不同的客户端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();
    }
});

我想那就是它。如果我遗漏了某些东西，请告诉我......： - ）

Answer 3

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

从单个单选按钮的选择中显示组/选择单选按钮的最佳方法是什么？

3 个答案: