【问题标题】:Best way to display a group/selection of radiobuttons from the choice of a single radiobutton?从单个单选按钮的选择中显示一组/选择单选按钮的最佳方式?
【发布时间】:2011-01-25 14:54:06
【问题描述】:

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

所以我需要一个单选按钮,它将它的值像正常一样记录到数据库中,我使用 RadioButtonFor 进行设置,如果选择“否”(false),则将显示其他单选按钮的组/列表。

如果此方法不可行,这只是理想的解决方案,那么另一种解决方案可能是控制器中的 if 语句,以便如果该主单选按钮的值为“是”(真),那么它将设置将表单记录到数据库时,将 x、y 和 z 单选按钮的值设置为“否”(false)。

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

对于第二个想法,它 1 不理想,2 我不确定我将如何引用这些单选按钮/编码 if 语句来完成所述任务。

也欢迎任何其他想法,但希望对如何实施它们有所帮助。

【问题讨论】:

  • 我真的无法理解,因为你几乎没有使用任何标点符号,如果你能修复它会更好,看看我的意思。
  • @rsenna 我所能做的就是把它隔开一点,所以我希望这会更好
  • @rsenna:有什么想法或解决方案吗?
  • 浏览量超过 100 次,但只有 2 票,所有这些都是我的猜测,其他人偶然发现此页面时正在寻找其他东西。

标签: c# jquery asp.net-mvc visual-studio-2010 asp.net-mvc-2


【解决方案1】:

好吧,这听起来可能有点矫枉过正,但我​​会选择 both 解决方案。从演示的角度来看,您需要 javascript 脚本端代码才能正确执行此操作 - 而且您也需要服务器端代码才能正确执行验证。

如果您只实现客户端验证,如果浏览器不支持 javascript,或者如果它只是被禁用,系统将如何运行?你不能认为对 javascript 的支持是理所当然的......

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

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

编辑所以我们来谈谈一个完整的解决方案。

同样,我不确定我是否了解您在这里需要什么。您在谈论单选按钮,但您似乎也认为您可以单独控制它们(许多收音机绑定到许多字段)。通常情况并非如此 - 一组单选按钮通常绑定到 same 字段,每个单选按钮表示不同的值(与单个下拉列表完全一样)。当然,这意味着您的数据库必须以相同的方式运行...

看这个例子:

<% 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”。请注意,为方便起见,我们为每个单选按钮(rbColorBluerbColorGreen 等)分配了不同的客户端 ID。这意味着您将能够在 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();
    }
});

我想就是这样。如果我遗漏了什么,请告诉我... :-)

【讨论】:

  • 我仍然不确定如何实现上述功能,我知道 m.BlahTable.BlahColumn, false, new { @onclick = "showReasons" } )%>No 然后我会在它下面的
  • 我已经让它正确隐藏所有内容,但它似乎不想再次显示它,我什至在 id 旁边设置了一个 [@onclick = "showReason",] 希望[function showReason() { // 如果用户选择任何单选按钮: if ($('#appTherNo:checked').length > 0) { $('#reasontest').show(); } 其他 { $('#reasontest').hide(); } }] 会起作用,但这也不想触发它,除非它们必须只是“RadioButton”,因为我的必须是“RadioButtonFor”
  • 嗯,我测试了一个普通的“RadioButton”,它也隐藏了它,但不会再次显示它。
【解决方案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 为真,则在您的操作方法中忽略任何 x、y、z 值:

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

【讨论】:

  • 那么我将如何对单选按钮进行分组?正如我所说,我对 jquery 不是很好,所以虽然我发现 (stackoverflow.com/questions/1159567/…) 这是针对表格行的,而且它看起来不像记录原始单选按钮值,所以仍然不清楚如何解决这个问题。
  • 只需将您的第二组包装在一个 div 中,然后显示/隐藏该 div。
  • 如果它甚至是 onload 命令而不是另一个命令,我将如何设置该 div 隐藏然后让 jquery 取消隐藏它或让 jquery onload 隐藏它?
  • @Brian 关于如何实现您的解决方案的任何想法然后是 brian,因为我已经设法让 rsenna 的解决方案可以使用一半,但部分正常编码,然后 jquery 隐藏它,但它不想要为了让我再次显示它,所以我需要一种新的方法来使用补充显示代码或修改版本的 rsennas jquery 代码来隐藏它,我尝试了多种组合和不同的方法来让 jquery 像替换一样工作长度与大小,并试图使 onclick 事件显示部分,但无济于事。
  • @Brian Well 把 onclick="$('#other-options').hide();"在 m.amwrAudit.AppTher, true, new { ...})%> 中,另一个按钮的 opp 现在可以正确显示和隐藏,因此对于大多数人来说简单的解决方案,但现在正在努力让控制器方面与它一起工作。
【解决方案3】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-07-24
    • 1970-01-01
    • 2016-09-24
    • 1970-01-01
    • 2015-02-27
    • 1970-01-01
    • 2011-10-28
    • 1970-01-01
    相关资源
    最近更新 更多