Como atualizar DIV em _Layout.cshtml com a mensagem depois de Ajax formulário é enviado?
-
14-11-2019 - |
Pergunta
Atualmente tenho uma máquina de Barbear View
como esta:
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>
Eu, em seguida, apresentar um PartialView
que tem um @Html.ValidationSummary()
em caso de erros de validação.
ReportController.cs
public PartialViewResult TotalPaymentsByMonthYear(MyViewModel model,
string reportName)
{
if (!ModelState.IsValid)
{
return PartialView("ValidationSummary", model);
}
model.ReportName = reportName;
return PartialView("Chart", model);
}
O que eu gostaria de fazer é:em vez de exibir erros de validação dentro deste PartialView
, Eu estou procurando uma forma de enviar essa mensagem de erro de validação para um elemento DIV que eu tenho definido no _Layout.cshtml
arquivo.
_Layout.cshtml
<div id="message">
</div>
@RenderBody()
Gostaria de preencher o conteúdo do DIV de forma assíncrona.Isso é possível?Como posso fazer isso?
Solução
Pessoalmente eu gostaria de jogar Ajax.*
ajudantes de distância e fazê-lo assim:
@model MyApp.Web.ViewModels.MyViewModel
<div id="message"></div>
@using (Html.BeginForm("TotalPaymentsByMonthYear", new { reportName = "CreateTotalPaymentsByMonthYearChart" }))
{
...
}
<div id="chartimage">
@Html.Partial("ValidationSummary")
</div>
Então eu gostaria de usar um cabeçalho de resposta HTTP personalizado para indicar que ocorreu um erro:
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);
}
e, finalmente, em um arquivo javascript separado eu iria discretamente AJAXify este formulário e o sucesso de chamada de retorno com base na presença deste cabeçalho de HTTP personalizado eu iria injetar o resultado de uma parte ou de outra:
$('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;
});