基于ViewModel Dataannotation属性的自定义编辑器模板MVC4

Question

如果[必需]属性修饰我的ViewModel属性，我想要做的是自动将图像跨度添加到我的输入文本框之后，无论它是整数，双精度，字符串，日期等

例如，我的视图模型可能看起来像

public class MyViewModel 
{ 
    [Required] 
    public string Name { get; set; } 
} 

我查看会是什么样子

@Html.EditorFor(model => model.Name) 
@Html.ValidationMessageFor(model => model.Name) 

，输出会是这样的

<input id="Name" class="text-box single-line" type="text" value="" name="Name" data-val-required="The Name field is required." data-val-length-max="20" data-val-length="The field Name must be a string with a maximum length of 20." data-val="true"> 
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Name"></span> 

-- Note the automatically added span 
<span class="indicator required" style="width: 11px;"></span> 

我打算有一些CSS，将显示图像即

span.required { 
    background-image: url("required.png"); 
} 

这是可以做到的还是我需要创建自己的Helper方法实现这种类型的功能？

Answer 1

是的，这是可能的，但一般我不会推荐它，因为模板是真的有自定义类型的渲染，你应该能够在不若覆盖另一个令人担忧的模板来创建模板。

我反而会创建一个自定义LabelFor帮手，如这里所描述的：

http://weblogs.asp.net/imranbaloch/archive/2010/07/03/asp-net-mvc-labelfor-helper-with-htmlattributes.aspx

或在这里：

http://weblogs.asp.net/raduenuca/archive/2011/02/17/asp-net-mvc-display-visual-hints-for-the-required-fields-in-your-model.aspx

第三个选择是不会做任何事情MVC，而是添加一些JavaScript，基于标准的MVC验证数据属性添加指标（如果您使用不显眼的验证）。看到这里的答案：

https://stackoverflow.com/a/8524547/61164

Answer 2

我所做的是修改jquery.validate.unobtrusive JS文件添加第二个容器，专门为你的图片，如果有一个验证错误。

var container2 = $(this).find("[data-valimg-for='" + escapeAttributeValue(inputElement[0].name) + "']"), 
     replace = $.parseJSON(container.attr("data-valimg-replace")) !== false; 

    container2.removeClass("img-validation-valid").addClass("img-validation-error"); 

那就不要忘了将它绑定到模型：

error.data("unobtrusiveContainer", container2); 

最后，空它在if（替换）代码块：

if (replace) { 
     container.empty(); 
     container2.empty(); 
     error.removeClass("input-validation-error").appendTo(container);    
    } 
    else { 
     error.hide(); 
    } 

成功时，请记住隐藏它：

var container2 = error.data("unobtrusiveContainer"), 
     replace = $.parseJSON(container.attr("data-valimg-replace")); 

    if (container2) { 
     container2.addClass("img-validation-valid").removeClass("img-validation-error"); 
     error.removeData("unobtrusiveContainer"); 

     if (replace) { 
      container2.empty(); 
     } 
    } 

如果你看看在文件中的onError和onSuccess函数中，你应该能够找到你可以放入的位置。

在您看来，下面的代码行添加到每个表单输入有验证为：

<img class="img-validation-valid" data-valimg-replace="true" data-valimg-for="<replace with field name here, ie. Name>" src="required.png" /> 

我只用[Required]属性测试这一点，但它的工作原理。我也很肯定你可以用它来产生其他的东西，而不仅仅是图像。