كيفية تحديث DIV في _Layout.cshtml برسالة بعد إرسال نموذج Ajax؟
-
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;
});