Ajax 양식이 제출된 후 메시지로 _Layout.cshtml의 DIV를 업데이트하는 방법은 무엇입니까?
-
14-11-2019 - |
문제
현재 나는 면도기를 가지고 있다 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의 콘텐츠를 비동기적으로 채우고 싶습니다.이것이 가능한가?어떻게 해야 합니까?
해결책
개인적으로 던지면 좋겠다 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;
});
제휴하지 않습니다 StackOverflow