代码之家 › 专栏 › 技术社区 › dreza

基于ViewModel数据注释属性MVC4的自定义编辑器模板

editorfor data-annotations viewmodel asp.net-mvc-4 view

dreza · 技术社区 · 12 年前

我想做的是在输入文本框后自动添加一个图像跨度,如果[ 要求的 ]属性修饰我的ViewModel属性,可以是整数、双精度、字符串、日期等

例如,我的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方法来实现这种类型的功能吗?

2 回复 | 直到 12 年前

Community CDub 7 年前

是的,这是可能的,但总的来说,我不建议这样做,因为模板确实可以自定义类型渲染,并且您应该能够创建模板,而不必担心它会覆盖另一个模板。

相反,我会创建一个自定义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,这些javascript将基于标准MVC验证数据属性添加指示符(如果您使用的是不引人注目的验证)。请在此处查看答案:

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

Julian Wen Hsi Lee 12 年前

我所做的是修改jquery.validate.uno唐突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(replace)代码块中清空它:

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] 属性,但它有效。我也很确定你也可以用它来生成其他东西,而不仅仅是图像。