如果服務器端驗證失敗，則MVC AJAX返回視圖

Question

我有一個搜索表單，它將執行一些客戶端驗證，調用服務器操作，執行一些服務器端驗證，然后返回原始視圖（帶有modelstate錯誤）或搜索結果。

為了使這種方法起作用，我需要將視圖渲染為字符串，然后返回Json結果。 我可能可以使用以下問題的答案之一來做到這一點： 將視圖渲染為字符串

但是，如果我必須實現自己的'RenderView'類型的函數，這真的是最好的方法嗎？ 還是有更好的設計決策來實現這種功能？ 任何幫助將不勝感激。

下面列出了該代碼的摘要，以供參考；

控制器：

public ActionResult Index()
{
    return View(new SearchModel());
}

public ActionResult Search(SearchModel criteria)
{
    if (!ModelState.IsValid)
        return Json(new { HasErrors = true, Result = RenderViewToString("Index", criteria) });

    var results = {Do Search...};
    return PartialView("SearchResults", results);
}

視圖：

@using(Html.BeginForm(...))
{
    {form fields...}
    {submit button...}
}
<div id="search-results"></div>

<script type="text/javascript">
    $(document).on("submit", "form", function(e) {
        if (!$(this).valid()) return false;

        e.preventDefault(); // Submit the form with ajax instead.
        $.ajax({
            url: this.action,
            type: this.method
            data: $(this).serialize(),
            success: function(data) {
                if (data.HasErrors) {
                    $(document).html(data.Result);
                }
                else {
                    $("#search-results").html(data);
                }
            }
        });
     });
</script>

Answer 1

首先，您需要此jquery函數在驗證摘要中添加錯誤

$.fn.addNewErrorMessage = function (message) {
    $(this).find('.validation-summary-valid').removeClass('validation-summary-valid')
        .addClass('validation-summary-errors');
    $(this).find(".validation-summary-errors ul").append("<li>" + message + "</li>");
}

然后，您需要列出一個錯誤列表，並將其作為JSON格式返回，例如運行中的代碼。

if (!modelState.IsValid)
{
    var errors = ModelState.ToDictionary(kvp => kvp.Key,
           kvp => kvp.Value.Errors
                      .Select(e => e.ErrorMessage).ToArray())
                      .Where(m => m.Value.Count() > 0);
     return Json(new {HasErrors = true,Errors = errors});
}

之后，在ajax中的成功函數中，使用addNewErrorMessage函數顯示錯誤消息

$.ajax({
        url: this.action,
        type: this.method
        data: $(this).serialize(),
        success: function(data) {
            if (data.HasErrors) {
                for(int i; i<data.Errors.length)
                {
                    $('form').addNewErrorMessage(data.Errors[i].Value);
                }
            }
            else {
                $("#search-results").html(data);
            }
        }

Answer 2

我將Kiyarash的答案標記為正確，因為它使我走上了正確的軌道。 這是我實際使用的：（請注意，這只會顯示每個字段的最后一個錯誤-我將在其中添加一些邏輯，以便它顯示多個錯誤消息）。

if (!ModelState.IsValid)
{
    return Json(new
    {
        HasErrors = true,
        Errors = ModelState.ToDictionary(
            ms => ms.Key,
            ms => ms.Value.Errors.Select(e => e.ErrorMessage).ToArray()
        ).Where(ms => ms.Value.Count() > 0)
    }, JsonRequestBehavior.AllowGet);
}

$.ajax({
    ...
    success: function(data) {
        if (data.HasErrors) {
            showErrorMessages(data.Errors, $("form"));
        }
        else {
            $("#search-results").html(data);
        }
    }
});

function showErrorMessages(errors, context) {
    $.each(errors, function (i, error) {
        $("[data-valmsg-for='" + error.Key + "']", context).text(error.Value)
            .removeClass("field-validation-valid")
            .addClass("field-validation-error");
    });
}