【问题标题】:mvc bind/post boolean to radiobuttonmvc 绑定/发布布尔到单选按钮
【发布时间】:2011-02-16 13:23:29
【问题描述】:

我的模型中有一个带有 NULLABLE 布尔值的列。现在在我的视图(用于编辑)上,我想将其绑定到两个单选按钮:是和否。如果值为空,则只需取消选中这两个单选按钮。我该怎么做呢?

谢谢。

【问题讨论】:

    标签: asp.net asp.net-mvc radio-button


    【解决方案1】:

    一旦您选择了一个单选按钮,就真的没有办法取消选择它(作为用户)。我建议,如果你真的需要一个三值结果,你应该有三个单选按钮——是的,不,不在乎。

    <%= Html.LabelFor( m => m.Foo ) %>
    <%= Html.RadioButtonFor( m => m.Foo, "true" ) %> Yes
    <%= Html.RadioButtonFor( m => m.Foo, "false" ) %> No
    <%= Html.RadioButtonFor( m => m.Foo, string.Empty ) %> Don't Care
    <%= Html.ValidationMessageFor( m => m.Foo ) %>
    

    【讨论】:

    • 谢谢 :) 直到今天才忘记我的问题,Html.RadioButtonFor 解决了这个问题。
    • 我想出了相同的解决方案,但不知何故,如果 Foonull Don't care 收音机没有检查...任何想法为什么?
    • @MichalB。我不知道。它在模型属性(以及值)上使用 Convert.ToString() 。如果bool? 为null,则应转换为string.Empty,并且应选中该按钮。
    • 是的。它不是。我有一个条件来检查值是否为空,在这种情况下,将 html 属性 checked="checked" 应用于最后一个单选按钮。否则它不起作用......
    • 虽然这将允许选择新值,但RadioButtonFor() 不会从绑定变量中选择当前值。它需要有条件地设置checked 属性。因此,它不应该是公认的答案。对不起。
    【解决方案2】:

    我可以晚点阅读这篇文章,但这是我的解决方案,它也处理设置值。这使用了一个编辑器模板。您将需要指定编辑器模板名称。我称我的为“NullableBool”

    @model bool?
    
    @{
    
    Layout = null;
    
    IDictionary<string, object> yesAttributes = new Dictionary<string, object>();
    IDictionary<string, object> noAttributes = new Dictionary<string, object>();
    IDictionary<string, object> naAttributes = new Dictionary<string, object>();
    
    if (Model.HasValue)
    {
        if (Model.Value)
        {
            yesAttributes.Add("checked", "checked");
        }
        else
        {
            noAttributes.Add("checked", "checked");
        }
    }
    else
    {
        naAttributes.Add("checked", "checked");
    }
    }
    
    @Html.RadioButtonFor(m => m, "true", yesAttributes) Yes`
    
    @Html.RadioButtonFor(m => m, "false", noAttributes) No`
    
    @Html.RadioButtonFor(m => m, string.Empty, naAttributes) N/A`
    

    【讨论】:

      【解决方案3】:

      使用多个 Html.RadioButtonFor (m => m.Foo, "true") 似乎会生成无效的 HTML,因为它会生成具有相同 ID 的控件:

      <input **id="Foo"** ... type="radio" value="True">
      <input **id="Foo"** ... type="radio" value="False">
      

      我通过直接在 html 中制作单选按钮解决了这个问题:

      <input type="radio" name="Foo" value="true" id="Foo_True"
             <%:Html.WriteCheckedIfTrue(Model.Foo.HasValue && Model.Foo.Value)%>/>
             <label for="Foo_True">Yes</label><br/>
      
      <input type="radio" name="Foo" value="false" id="Foo_False" 
             <%:Html.WriteCheckedIfTrue(Model.Foo.HasValue && !Model.Foo.Value)%>/> 
             <label for="Foo_False">No</label><br/>
      
      <input type="radio" name="Foo" value="" id="Foo_Null" 
             <%:Html.WriteCheckedIfTrue(!Model.Foo.HasValue)%>/> 
             <label for="Foo_Null">Don't Care</label>
      

      确保根据使用的视图模型命名单选按钮,例如:Model.Filter.HasImage 命名为:Filter.HasImage 以使用模型绑定

      “html 助手”如下所示:

          public static MvcHtmlString WriteCheckedIfTrue(this HtmlHelper htmlHelper, 
                                                         bool validation)
          {
              if(validation)
                  return new MvcHtmlString("checked=\"checked\"");
      
              return new MvcHtmlString(string.Empty);
          }
      

      【讨论】:

      • 请注意,您可以只覆盖助手生成的 ID。
      【解决方案4】:

      这是一个解决问题的绝妙方法。这是一个非常古老的 ASP 问题。

      问题是您需要设置checked 属性,因为Html.RadioButtonFor 不会检查基于可为空的布尔值的单选按钮(这似乎是一个缺陷)。

      另外,通过将单选按钮放在标签标签内,您可以通过单击标签来选择值。

      Shared/EditorTemplates/Boolean.cshtml

      @model bool?
      <label>
          <span>n/a</span>
          @Html.RadioButtonFor(x => x, "", !Model.HasValue ? new { @checked=true } : null) 
      </label>
      <label>
          <span>Yes</span>
          @Html.RadioButtonFor(x => x, true, Model.GetValueOrDefault() ? new { @checked = true } : null)
      </label>
      <label>
          <span>No</span>
          @Html.RadioButtonFor(x => x, false, Model.HasValue && !Model.Value ? new { @checked = true } : null)
      </label>
      

      【讨论】:

        猜你喜欢
        • 2023-03-18
        • 2021-12-24
        • 2014-01-20
        • 1970-01-01
        • 2012-06-13
        • 2011-07-24
        • 2021-10-23
        • 2015-04-27
        • 2013-06-02
        相关资源
        最近更新 更多