Comment mettre à jour DIV dans _Layout.cshtml avec un message après la soumission du formulaire Ajax ?
-
14-11-2019 - |
Question
Actuellement j'ai un rasoir View
comme ça:
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>
J'affiche ensuite un PartialView
qui a un @Html.ValidationSummary()
en cas d'erreurs de validation.
ReportController.cs
public PartialViewResult TotalPaymentsByMonthYear(MyViewModel model,
string reportName)
{
if (!ModelState.IsValid)
{
return PartialView("ValidationSummary", model);
}
model.ReportName = reportName;
return PartialView("Chart", model);
}
Ce que j'aimerais faire, c'est :au lieu d'afficher les erreurs de validation dans ce PartialView
, je cherche un moyen d'envoyer ce message d'erreur de validation à un élément DIV que j'ai défini dans le _Layout.cshtml
déposer.
_Layout.cshtml
<div id="message">
</div>
@RenderBody()
J'aimerais remplir le contenu de ce DIV de manière asynchrone.Est-ce possible?Comment puis je faire ça?
La solution
Personnellement, je jetterais Ajax.*
aides et faites-le comme ceci :
@model MyApp.Web.ViewModels.MyViewModel
<div id="message"></div>
@using (Html.BeginForm("TotalPaymentsByMonthYear", new { reportName = "CreateTotalPaymentsByMonthYearChart" }))
{
...
}
<div id="chartimage">
@Html.Partial("ValidationSummary")
</div>
Ensuite, j'utiliserais un en-tête de réponse HTTP personnalisé pour indiquer qu'une erreur s'est produite :
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);
}
et enfin, dans un fichier javascript séparé, j'AJAXifierais discrètement ce formulaire et dans le rappel de réussite basé sur la présence de cet en-tête HTTP personnalisé, j'injecterais le résultat dans une partie ou une autre :
$('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;
});