Como atualizar DIV em _Layout.cshtml com a mensagem depois de Ajax formulário é enviado?

Question

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?

Answer 1

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;
});