Настроить Html.ValidationMessageFor не работает на стороне клиента

Question

Я работаю над приложением mvc3, я создал специальное сообщение validationMessage для проверки простого поля.Это пользовательское сообщение validation показывает только div с заголовком и сообщением вместо диапазона по умолчанию, у меня есть это:

@Html.ValidationMessageCustomFor(model => model.FirstName)

Это код моей пользовательской проверки:

public static MvcHtmlString ValidationCustomFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
{
    string propertyName = ExpressionHelper.GetExpressionText(expression);
    string name = helper.AttributeEncode(helper.ViewData.TemplateInfo.GetFullHtmlFieldName(propertyName));

    if (helper.ViewData.ModelState[name] == null ||
        helper.ViewData.ModelState[name].Errors == null ||
        helper.ViewData.ModelState[name].Errors.Count == 0)
    {
        return MvcHtmlString.Empty;
    }

    StringBuilder htmlValidation = new StringBuilder();

    htmlValidation.AppendLine("<div>");
    htmlValidation.AppendLine("<table>");
    htmlValidation.AppendLine("<tr>");
    htmlValidation.AppendLine("<td><img src='/Content/Imgages/Error.jpg'></td>");
    htmlValidation.AppendLine("</tr>");
    htmlValidation.AppendLine("<tr>");
    htmlValidation.AppendFormat("<td>{0}</td>", name);
    htmlValidation.AppendLine("</tr>");
    htmlValidation.AppendLine("<tr>");
    htmlValidation.AppendFormat("<td>{0}</td>", helper.ViewData.ModelState[name].Errors[0].ErrorMessage);
    htmlValidation.AppendLine("</tr>");
    htmlValidation.AppendLine("</table>");
    htmlValidation.AppendLine("</div>");

    return MvcHtmlString.Create(htmlValidation.ToString());

}

Это работаетхорошо, когда я использую проверку на стороне сервера, но когда я активирую проверку на стороне клиента, она не работает.

Значение по умолчанию Html.ValidationMessageFor yes отлично работает с проверкой на стороне клиента, но мой пользовательский Html.ValidationMessageCustomFor не работает.

Не могли бы вы помочь мне, какие-нибудь идеи?

---

Я изменил свой пользовательский помощник, я добавил атрибут "data-valmsg-for" для span, это код:

 public static MvcHtmlString ValidationCustomFor2<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
    {
        string propertyName = ExpressionHelper.GetExpressionText(expression);
        string name = helper.AttributeEncode(helper.ViewData.TemplateInfo.GetFullHtmlFieldName(propertyName));

        if (helper.ViewData.ModelState[name] == null ||
            helper.ViewData.ModelState[name].Errors == null ||
            helper.ViewData.ModelState[name].Errors.Count == 0)
        {
            return MvcHtmlString.Empty;
        }

        TagBuilder tag = new TagBuilder("span");
        tag.Attributes.Add("class", "field-validation-error");
        tag.Attributes.Add("data-valmsg-for", name);
        tag.Attributes.Add("data-valmsg-replace", "true");

        var text = tag.ToString(TagRenderMode.StartTag);
        text += "<b>My custom html</b>";
        text += tag.ToString(TagRenderMode.EndTag);


        return MvcHtmlString.Create(text);

    }

Но это не выглядит, похоже, я должен что-то делать со стороны клиента, но я не знаю, ЧТО?Есть идеи, пожалуйста?

Answer 1

Проверка ASP.NET MVC3 работает как на стороне сервера, так и на стороне клиента.

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

Реализация по умолчанию проверки на стороне клиента MVC3 работает с использованием метода, называемого ненавязчивой проверкой JavaScript, путем добавления некоторых атрибутов data- на страницу изатем поиск и манипулирование отмеченными элементами в JavaScript.

Для понимания ненавязчивой проверки JavaScript попробуйте найти ее, там масса ресурсов.Например:

http://www.codeproject.com/KB/aspnet/CustomClientSideValidatio.aspx

В вашем случае, когда вы хотите указать, где отображать сообщение проверки, вы должны пометить элемент HTML атрибутом data-valmsg-for.Например:

<SPAN data-valmsg-for="id_of_the_input_to_validate"></span>

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

Вот фрагмент кода из фактического сообщения проверкипомощник, включенный в MVC3:

TagBuilder builder = new TagBuilder("span"); 
...
if (htmlHelper.ViewContext.UnobtrusiveJavaScriptEnabled) {
    builder.MergeAttribute("data-valmsg-for", modelName); 
    builder.MergeAttribute("data-valmsg-replace", replaceValidationMessageContents.ToString().ToLowerInvariant());
} 

---

Редактировать: Ответить на ваш отредактированный вопрос:

При первом отображении страницы ваш первый if равен true (нет сообщений об ошибках валидации, поэтому вы возвращаете пустую строку.На вашей странице не будет ни одного атрибута data-.

Вы должны отображать <span data-valmsg-for="..."></span> все время, даже если у вас нет сообщений об ошибках, чтобы библиотека JavaScript знала, гдепоставить ошибку на случай, если это произойдет на стороне клиента.