Ajax 양식이 제출된 후 메시지로 _Layout.cshtml의 DIV를 업데이트하는 방법은 무엇입니까?

Question

현재 나는 면도기를 가지고 있다 View 이와 같이:

TotalPaymentsByMonthYear.cshtml

@model MyApp.Web.ViewModels.MyViewModel

@using (@Ajax.BeginForm("TotalPaymentsByMonthYear",
        new { reportName = "CreateTotalPaymentsByMonthYearChart" },
        new AjaxOptions { UpdateTargetId = "chartimage"}))
{    
    <div class="report">

    // MyViewModel fields and validation messages...

    <input type="submit" value="Generate" />

    </div>
}

<div id="chartimage">
@Html.Partial("ValidationSummary")
</div>

그런 다음 PartialView 그건 @Html.ValidationSummary() 유효성 검사 오류가 있는 경우.

ReportController.cs

public PartialViewResult TotalPaymentsByMonthYear(MyViewModel model,
       string reportName)
{
    if (!ModelState.IsValid)
    {
        return PartialView("ValidationSummary", model);
    }

    model.ReportName = reportName;

    return PartialView("Chart", model);
}

내가 하고 싶은 것은:이 안에 유효성 검사 오류를 표시하는 대신 PartialView, 저는 이 유효성 검사 오류 메시지를 내가 정의한 DIV 요소에 보내는 방법을 찾고 있습니다. _Layout.cshtml 파일.

_Layout.cshtml

<div id="message">

</div>

@RenderBody()

이 DIV의 콘텐츠를 비동기적으로 채우고 싶습니다.이것이 가능한가?어떻게 해야 합니까?

Answer 1

개인적으로 던지면 좋겠다 Ajax.* 도우미를 멀리하고 다음과 같이 하십시오:

@model MyApp.Web.ViewModels.MyViewModel

<div id="message"></div>

@using (Html.BeginForm("TotalPaymentsByMonthYear", new { reportName = "CreateTotalPaymentsByMonthYearChart" }))
{
    ...
}

<div id="chartimage">
    @Html.Partial("ValidationSummary")
</div>

그런 다음 사용자 지정 HTTP 응답 헤더를 사용하여 오류가 발생했음을 나타냅니다.

public ActionResult TotalPaymentsByMonthYear(
    MyViewModel model,
    string reportName
)
{
    if (!ModelState.IsValid)
    {
        Response.AppendHeader("error", "true");
        return PartialView("ValidationSummary", model);
    }
    model.ReportName = reportName;
    return PartialView("Chart", model);
}

마지막으로 별도의 자바스크립트 파일에서 이 양식을 눈에 띄지 않게 AJAXify하고 이 사용자 정의 HTTP 헤더의 존재를 기반으로 하는 성공 콜백에서 결과를 한 부분 또는 다른 부분에 삽입합니다.

$('form').submit(function () {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result, textStatus, jqXHR) {
            var error = jqXHR.getResponseHeader('error');
            if (error != null) {
                $('#message').html(result);
            } else {
                $('#chartimage').html(result);
            }
        }
    });
    return false;
});