复选框的自定义助手不绑定

Question

当使用 html 助手 CheckBoxFor() 时，可以这样做：

@Html.CheckBoxFor(model => model.active)

这将导致像这样的html代码：

    <input class="check-box" id="active" name="active" type="checkbox" value="true" />
<input name="active" type="hidden"  value="false" />

我的问题是，我使用的 html/css 模板在复选框字段之后需要一个特定的标签才能工作。 （复选框上的某些 css/jquery 效果需要它）。所以我需要修改 CheckBoxFor() 来生成它：

<input class="check-box" id="active" name="active" type="checkbox" value="true" />
<i class="no-rounded"></i>
<input name="active" type="hidden"  value="false" />

我尝试过创建这样的自定义扩展方法：

public static MvcHtmlString CustomCheckboxFor<TModel>(this HtmlHelper<TModel> helper, Expression<Func<TModel, bool>> expression)
{
    var data = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
    string propertyName = data.PropertyName;
    string s = "";
    s += "<input class=\"check-box\" id=\"" + propertyName + "\" name=\"" + propertyName+ "\" type=\"checkbox\" value=\"true\" />";
    s += "<i class=\"no-rounded\"></i>";
    s += "<input name=\"" + propertyName + "\" type=\"hidden\"  value=\"false\" />";
    return MvcHtmlString.Create(s.ToString());

并调用它

@Html.CustomCheckboxFor(model => model.active)

这正在绘制复选框，并且 css/jquery 效果正在工作， 但例如在创建或编辑视图时，它没有绑定到模型上的属性（如果属性为真，它应该加载选中复选框的表单，但它不会）

我该怎么做？

更新： 好的，我取得了一些进展，它现在可以工作了，但我敢打赌一定有更好、更优雅的方式来做到这一点......我所做的是让 .net 助手完成为复选框和生成 html 代码的工作隐藏字段。然后我得到了那个字符串，只需在两个字段之间插入所需的标签，然后返回：

    public static MvcHtmlString UnifyCheckboxFor<TModel>(this HtmlHelper<TModel> helper, Expression<Func<TModel, bool>> expression)
            {
                string s = helper.CheckBoxFor(expression).ToString();
                string part1 = s.Substring(0,s.IndexOf(">")+1);
                string part2 = s.Substring(s.IndexOf(">")+1);
                string str = part1 + "<i class=\"no-rounded\"></i>" + part2;
                return MvcHtmlString.Create(str.ToString());
   }

UPDATE2：@Joshua Duxbury 在 cmets 中提供的信息：如果创建自定义助手，框架不会尝试绑定它，所以我们必须自己对助手进行绑定。因此，初始代码只需添加该逻辑即可：

    public static MvcHtmlString CustomCheckboxFor<TModel>(this HtmlHelper<TModel> helper, Expression<Func<TModel, bool>> expression)
    {
        var data = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
        string propertyName = data.PropertyName;
        string s = "";
        s += "<input class=\"check-box\" id=\"" + propertyName + "\" name=\"" + propertyName+ "\" type=\"checkbox\" value=\"true\" " + ((data.Model.Equals(true)) ? "checked=\"checked\"" : "") +"/>";
        s += "<i class=\"no-rounded\"></i>";
        s += "<input name=\"" + propertyName + "\" type=\"hidden\"  value=\"false\" />";
        return MvcHtmlString.Create(s.ToString());
}

Answer 1

修复

正如我们在 OPs cmets 中所讨论的，您需要在 HTML 帮助程序中设置复选框的值。写复选框HTML代码时写checked=checked部分

你在输入标签上的硬编码value="true"，不应该设置这个吗 基于模型属性？

替代解决方案

像这样在扩展方法中手动创建 HTML 并不是最佳实践，您将忽略扩展方法提供的所有功能

1. 不正确的 2 路模型绑定
2. 模型状态验证
3. 不呈现data-val 属性

因此，如果您只需在 HTML 标记后插入一些 HTML，您可以使用脚本语言在客户端执行此操作。下面的例子是用 jQuery 编写的。

jQuery 示例

 $("<i class=\"no-rounded\"></i>").insertAfter("input .check-box");