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)

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

我该怎么做？

更新好吧，我做了一些进步，它现在正在工作，但我打赌必须有一个更好，更优雅的方式来做这个......我所做的就是让.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在评论中提供的信息：如果创建自定义助手，框架不会尝试绑定它，所以我们必须自己在帮助器上进行绑定。所以初始代码只需添加逻辑就可以了：

    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评论中讨论的那样，您需要在HTML帮助器中设置复选框的值。在编写复选框HTML代码

时写下checked=checked部分

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

替代解决方案

在扩展方法中手动创建HTML不是最佳做法，您将忽略扩展方法提供的所有功能

错误的双向模型绑定
ModelState验证
不呈现data-val属性

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

jQuery示例

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

复选框未绑定的自定义帮助程序

1 个答案: