Пользовательский шаблон редактора на основе атрибута ViewModel Dataannotation MVC4

Что я хочу сделать, так это автоматически добавить диапазон изображений после моих текстовых полей ввода, если атрибут [Required] украшает мое свойство 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");
}

Возможно ли это сделать или мне нужно создать свой собственный вспомогательный метод для реализации этого типа функций?


viewmodel view data-annotations asp.net-mvc-4 editorfor
person dreza    schedule 13.03.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Да, это возможно, но в целом я бы не рекомендовал это, потому что шаблоны действительно существуют для настройки рендеринга шрифтов, и вы должны иметь возможность создавать шаблоны, не беспокоясь о том, что они переопределяют другой шаблон.

Вместо этого я бы создал собственный помощник 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

person Erik Funkenbusch    schedule 13.03.2013

arrow_upward
1
arrow_downward

Что я сделал, так это изменил JS-файл jquery.validate.unobtrusive, чтобы добавить второй контейнер, специально для ваших изображений, если есть ошибка проверки.

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], но это работает. Я также уверен, что вы можете использовать это для создания других вещей, а не только изображений.

person Julian Wen Hsi Lee    schedule 13.03.2013
comment
Ура, Джулиан, я попробую и сообщу, что у меня получилось. - person dreza; 13.03.2013
comment
Я бы не стал изменять jquery.unobtrusive.js, так как этот файл время от времени обновляется, и вам придется повторно применять изменения. Лучшее решение — просто использовать jquery с существующими атрибутами. - person Erik Funkenbusch; 13.03.2013
comment
Да, если есть способ добавить эти изменения через внешний файл сценария, например, просто расширить эти две функции, было бы лучше. - person Julian Wen Hsi Lee; 13.03.2013