asp.net-mvc - 使用 RadioButtonFor 编写一组单选按钮的正确方法

Question

根据我的研究，在 MVC 中编写复选框的正确方法如下。

@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)

这将渲染一个复选框，渲染该复选框的标签，并使标签可点击，这意味着单击标签也会切换复选框。

但是如果单个 View 模型字段有多个复选框怎么办？ (例如，也许每个复选框代表整数值中的一位。)或者，更好的是，单选按钮怎么样，其中总是有多个选项与同一字段关联？

在这些情况下，上面的代码似乎存在问题。要么并非所有元素都与同一字段关联，要么将呈现具有相同 ID 的多个元素。

我已经研究这个有一段时间了。我找到了很多解决方案；然而，它们似乎要么没有可点击的标签，要么需要一堆自定义和/或非标准编码。有些完全避免使用 RadioButtonFor/LabelFor，而是选择对原始 HTML 进行编码。

编写原始 HTML 很好，但是 MVC 的设计者难道没有预料到我们可能需要在同一个字段中使用多个单选按钮吗？如果他们这样做了，他们打算如何编码？

编辑:

经过更多研究后，下面的代码是我发现的对单选按钮进行编码的最佳方法。此代码假设我已经为每个 radio 选项定义了一个枚举。

@Html.RadioButtonFor(m => m.Gender, Gender.Male, new { id = "gender-male" })
@Html.LabelFor(m => m.Gender, Gender.Male.ToString(), new { @for = "gender-male" })
@Html.RadioButtonFor(m => m.Gender, Gender.Female, new { id = "gender-female" })
@Html.LabelFor(m => m.Gender, Gender.Female.ToString(), new { @for = "gender-female" })

也许这是我能期待的最好的结果，但它仍然让我有点困扰。

1. 为什么需要对 ID 等基本内容进行如此多的自定义？再说一次，微软难道没有预料到我们会想要多个单选按钮与同一字段关联吗？

2. 如果枚举名称与我想要的单选按钮标签的描述不同，则此方法似乎不支持字段属性，例如 [Display(Name = "")] .

(我想正确处理多个复选框将推迟到另一个问题。)

Answer 1

好吧，让我们做一些研究。首先，您不需要唯一的 ID 来通过单击标签来切换复选框/单选按钮。实际上你根本不需要id!您所要做的就是将您的输入包装在 <label> 中标签:

<label>
    <input type="radio" name="radio" value="1" /> Radio 1   
</label>

到目前为止一切顺利，ASP.NET MVC 使您能够编写自己的 html 帮助程序，让我们为 Enum 编写一个帮助程序模型字段!

想象一下，我们有一些注册模型:

public class RegisterViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; } 
}

该死!我刚刚复制粘贴了教程模型 o_O。我们现在想要的是获取用户的性别，因此我们添加 Gender枚举:

public enum Gender
{
    Iamparanoic = 0,

    Male = 1,

    Female = 2,
}

并添加 Gender Gender领域输入我们的模型(希望 C# 有一个 Gender 访问修饰符!)

public Gender Gender { get; set; }

现在，是时候使用一些 ASP.NET 魔法并编写我们的 html 帮助程序了:

public static MvcHtmlString RadioButtonsListForEnum<TModel, TEnum>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TEnum>> expression)
{
    var sb = new StringBuilder();
    sb.Append("<ul>"); //we want it to look cool, dont' we?
    foreach (var value in Enum.GetValues(typeof(TEnum)))
    {
        var radio = htmlHelper.RadioButtonFor(expression, value).ToHtmlString(); //you can generage any id and pass it to helper, or use a tagbuilder

        sb.AppendFormat(
            "<li><label>{0} {1}</label></li>",
            radio,
            ((Enum)value).GetEnumName() //instead of it you can grab e.g. Display/Description attribute value or w/e else
        );
    }
    sb.Append("</ul");
    return MvcHtmlString.Create(sb.ToString());
}

其用法如下:

@Html.RadioButtonsListForEnum(m => m.Gender)

很漂亮，不是吗？当然，您可以添加大量的自定义功能，例如使用独特的 mvc 样式 id 渲染单选按钮、各种 html 属性等。但这只是一个示例，请正确使用。

接下来，我们还想渲染复选框列表!

public static MvcHtmlString CheckBoxListForEnum<TModel, TEnum>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TEnum>> expression, IDictionary<string, object> htmlAttributes = null)
{
    var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
    var enumValue = Convert.ToInt32(metadata.Model);

    var sb = new StringBuilder();
    foreach (var value in Enum.GetValues(typeof (TEnum)))
    {
        var val = Convert.ToInt32(value);
        var checkbox = new TagBuilder("input");

        checkbox.MergeAttribute("type", "checkbox");
        checkbox.MergeAttribute("value", value.ToString());
        checkbox.MergeAttribute("name", htmlHelper.NameFor(expression).ToString());

        if ((enumValue & val) == val)
            checkbox.MergeAttribute("checked", "checked");
        if (htmlAttributes != null)
            checkbox.MergeAttributes(htmlAttributes);

        var label = new TagBuilder("label") { InnerHtml = checkbox + ((Enum)value).GetEnumName() };

        sb.Append(label);
        sb.Append("<br/>");
    }
    return new MvcHtmlString(sb.ToString());
}

再说一遍，简单的用法:

@Html.CheckBoxListForEnum(m => m.Gender)

顺便说一句，它仅适用于标有 Flags 的枚举。属性，当然你会遇到模型绑定(bind)的麻烦 - 它需要自定义绑定(bind)器。但这是另一个问题，我希望Jon Skeet可以回答一下:)