Как мне обработать ошибку проверки на стороне сервера, если у меня есть форма, работающая в диалоговом окне jQuery UI?

Question

У меня есть следующий код в моем контроллере после того, как пользователь отправляет форму, но если проверка не удалась (_applicationValidator.Validate), я обычно перезагружаю представление «Редактировать», но в этом случае я хочу оставить диалог открытым и просто показать эти ошибки внутри диалога.

Код контроллера:

  [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Update(ApplicationUpdater applicationUpdater_)
    {
        if (_applicationValidator.Validate(applicationUpdater_, ModelState, ValueProvider))
        {
            _repo.UpdateApplication(applicationUpdater_);
            ApplicationsViewModel vm = new ApplicationsViewModel();
            vm.Applications = _repo.GetApplications();
            return View("Index", vm);
        }
        else
        {
            ApplicationViewModel vm = GetApplicationVM();
            return View("Edit", vm);
        }
    }

Просмотр кода ( jQuery )

 $(".showEditPopup").click(function() {
            $.post("Applications/ShowEdit",
                { recnum: $(this).parents('tr:first').attr("recnum") },
                function(htmlResult) {
                    $("#EditUserControlDiv").remove();
                    $("#container").append(htmlResult);
                    $("#container select[multiple]").asmSelect();
                    $("#EditUserControlDiv").dialog(
                    {
                        height: 675,
                        width: 650,
                        modal: true
                    }
                    );
                }
           );
        });

Answer 1

Как сказал

Но в этом случае я хочу оставить Dialop Open и просто показать эти ошибки в диалоге

Ok.

После открытия диалога вы должны

• скрыть предыдущее сообщение об ошибке

...

open: function(event, ui) {
    $(".error").css("display", "none");
}

После нажатия диалоговой кнопки, вы должны

• отключить JQuery UI
• Показать изображение "loading ..."
• Отправить анкету

...

$("#loading").css("display", "block");

panel.dialog("disable");

panel.dialog("option", "disabled", true);

После загрузки ответа (Вы можете использовать JSON в качестве ответа), вам нужно

• Проверьте, нет ли ошибок.

...

// var response plays the role of JSON response

var response = {
    "errors":[
        {
            "property-name":"name",
            "error":"Name is required"
        },
        {
            "property-name":"age",
            "error":""
        }
    ]
};

var hasErrors = false;

for(var i = 0; i < response.errors.length; i++) {
    if(response.errors[i].error != "") {
         hasErrors = true;

         $("#" + response.errors[i]["property-name"] + "-error")
           .text(response.errors[i]["error"])
           .css("display", "block");
    }
}

if(!hasErrors) {
    panel.dialog("close");

    alert("success form!");
} else {
    panel.dialog("enable");

    panel.dialog("option", "disabled", false);
}

Здесь вы можете увидеть в действии

Обратите внимание, что у вас есть поведение по умолчанию. Так что вы можете поместить его во внешнюю функцию

Answer 2

Самое удобное:

• Отключить все элементы ввода
• Сделать сообщение Ajax для функции Update
• Обработайте ответ сервера в вашем пользовательском интерфейсе. Например. закрытие формы пользовательского интерфейса jQuery или отображение ошибок валидации.

---

Измените вашу Update функцию, чтобы она возвращала некоторый объект-оболочку, например:

return new { Succeeded = false, ValidationMessages = new [] { "Incorrect username" } };

$.post(/* postdata */, function(resp) {
     if(resp.Succeeded) //close jQuery UI dialog
     else {
         for(var i = 0; i < resp.ValidationMessages; i++) alert(resp.ValidationMessages[i]));
     }
});

Вы можете создавать свои постданные, запрашивая все элементы input / textarea и т. Д. И сохраняя их в массив, что-то вроде (не проверено):

var data = [];    
$('input').each(function() {
    data.push([ $(this).id, $(this).val() ]);
});

Answer 3

Вы можете использовать плагин jQuery form для создания Ajax-версии формы редактирования:

$(".showEditPopup").click(function() {
            function popDialog(htmlResult) {
                $("#EditUserControlDiv").remove();
                $("#container").append(htmlResult);
                $("#container form").ajaxForm(function(result) {
                  // There may be an easier way (like testing for a 
                  // certain string in the result)
                  // to detect the need to "repop"
                  if ($(result).find('form').length) {
                    popDialog(result);
                  } else {
                    $("#EditUserControlDiv").dialog('close'); // or remove
                  }
                });
                $("#container select[multiple]").asmSelect();
                $("#EditUserControlDiv").dialog(
                {
                    height: 675,
                    width: 650,
                    modal: true
                }
                );
            }

        $.post("Applications/ShowEdit",
            { recnum: $(this).parents('tr:first').attr("recnum") },
            function(result) { popDialog(result); }
       );
    });