非绑定复选框的自定义帮助程序
提问于 2017-08-01 06:24:35
当使用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，它应该用选中的复选框加载表单，但不绑定)
我该怎么做？
更新： ok，我做了一些改进，它现在正在工作，但我打赌肯定有一个更好，更优雅的方法来做这件事.我所做的是让.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提供的信息:如果创建自定义助手，框架将不会尝试绑定它，因此我们必须自己对助手进行绑定。因此，最初的代码只需添加以下逻辑即可：
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());
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-01 07:25:02
The Fix
正如我们在OPs注释中讨论的那样，您需要在HTML助手中设置复选框的值。编写复选框时编写checked=checked部件
输入标记上的硬编码
value="true"，难道不应该根据模型属性来设置吗？
替代解决方案
在扩展方法中手动创建HTML不是最佳实践，而且您将忽略扩展方法提供的所有特性
- 不正确的双向模型绑定
- ModelState验证
- 不呈现
data-val属性
因此，如果只需要在HTML标记后面插入一些HTML，就可以使用脚本语言在客户端执行此操作。下面的示例是用jQuery编写的。
jQuery实例
$("<i class=\"no-rounded\"></i>").insertAfter("input .check-box");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45440515
复制相关文章
腾讯云开发者
