Добавление пользовательских эффектов JavaScript/jQuery к проверке формы MVC 3

Question

Я строю большой сайт, используя MVC3 asp.net. На странице входа я использую встроенные функции для ненавязчивой проверки JavaScript. Все хорошо и хорошо, но я хотел бы добавить некоторые эффекты, КАК появляются сообщения проверки. (Я хочу, чтобы красная коробка скользила вниз под ошибкой).

Как мне это сделать? Я пытался выяснить, как работает jquery.validate.unobtrusive.js, но для меня это все чёрная магия, и я не могу найти код, который фактически добавляет сообщение на экран.

Буду очень признателен за любую помощь! Я довольно зеленый в этом.

Спасибо,

Nieszka

Answer 1

ValidationSummary это то, что добавляет ошибки на страницу, которые будут видны после ошибки на стороне сервера. ValidationFor элементы обеспечивают ошибки на стороне клиента.

Оба являются помощниками HTML. Вам нужно будет реализовать свою собственную форму возврата ошибок обратно в представление или их переопределения и отображения пользовательских элементов интерфейса.

Посмотрите на jQueryUI для начинающих.

Правда в том, что каждый из нас, скорее всего, даст вам совершенно другой сценарий для реализации. Но ключевым элементом во всем этом будет jQuery/Ajax/JSON

Например, для меня я включаю ссылку на javascript в каждый из моих просмотров, которые публикуются для создания или обновления.

<script src="@Url.Content("~/Scripts/AjaxFormSubmission.js")" type="text/javascript"></script>

Этот скрипт выглядит так:

/// <reference path="jquery-1.7.2.js" />

$("document").ready(function () {

    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                dataType: "json",
                cache: false,
                type: 'POST',
                data: $(this).serialize(),
                beforeSubmit: showProgressStarted(),
                success: function (result) {
                    showSuccessError(result);                             
                }
            });
        }
        return false;
    });
});

При отправке формы появляется небольшое сообщение "Пожалуйста, подождите, пока ваш запрос обрабатывается...", и я показываю скрытое div по завершении, которое имеет мой успех JSON или сообщение об ошибке.

JQueryUI Dialog поможет вам достичь этой цели.

Вот пример одного из моих действий, который вышеприведенный скрипт публикует в

public JsonResult UpdateRequestStatus(RequestViewModel model) {
    try {
        AttemptUpdateRequestStatus(model);
        return Json(new { Success = true, ResultMessage = "Successfully saved" }, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex) {

        ModelState.AddModelError("", ModelStateErrorUtility.WrapResultMessageForList(ex.Message));
    }
    // this custom function evaluates my ModelState and strips out all the error messages so that I can send them all back as part of my JSON response
    return Json(new { Success = false, ResultMessage = ModelStateErrorUtility.GetModelStateErrors(ModelState) }, JsonRequestBehavior.AllowGet);
}

Это мой код javascript/jQuery, который показывает мои ошибки

function showSuccessError(result) {
    $('#resultSpan').html('');
    var headerText;
    if (result.Success) {
        headerText = "Action was successful!";
        $('#resultSpan').append($("<ul id='successMsg' style='list-style: none;' />").append(result.ResultMessage));
    }
    else {
        headerText = "Ooops! There is an Error";
        $('#resultSpan').append($("<ul id='errorMsg' style='list-style: none;' />").append(result.ResultMessage)).addClass("AjaxErrorText").removeClass("AjaxSuccessText");
    }
    showProgressComplete(headerText);
}

Это изменит текст "Please wait......" на фактический успех или сообщение об ошибке.

function showProgressComplete(headerText) {
    $('#ajaxResultPopUpHeaderText').html(headerText);
}

Как я уже сказал, это всего лишь пример одного человека. Все здесь, скорее всего, будут реализовывать это по-своему. Это действительно предпочтение.