Cómo actualizar el DIV en _Layout.cshtml con mensaje después de Ajax formulario es enviado?

Question

Actualmente tengo una navaja de Afeitar View como este:

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>

Yo, a continuación, mostrar un PartialView que tiene un @Html.ValidationSummary() en caso de errores de validación.

ReportController.cs

public PartialViewResult TotalPaymentsByMonthYear(MyViewModel model,
       string reportName)
{
    if (!ModelState.IsValid)
    {
        return PartialView("ValidationSummary", model);
    }

    model.ReportName = reportName;

    return PartialView("Chart", model);
}

Lo que me gustaría hacer es:en lugar de mostrar los errores de validación en esta PartialView, Estoy buscando una manera de enviar este mensaje de error validación de un elemento DIV que he definido dentro de la _Layout.cshtml archivo.

_Layout.cshtml

<div id="message">

</div>

@RenderBody()

Me gustaría llenar el contenido de este DIV de forma asincrónica.Es esto posible?¿Cómo puedo hacer eso?

Answer 1

Personalmente me gustaría lanzar Ajax.* ayudantes de lejos y hacer algo como esto:

@model MyApp.Web.ViewModels.MyViewModel

<div id="message"></div>

@using (Html.BeginForm("TotalPaymentsByMonthYear", new { reportName = "CreateTotalPaymentsByMonthYearChart" }))
{
    ...
}

<div id="chartimage">
    @Html.Partial("ValidationSummary")
</div>

A continuación, me gustaría usar un encabezado de respuesta HTTP para indicar que ha ocurrido un error:

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

y, finalmente, en un archivo javascript independiente me gustaría discretamente AJAXify este formulario y en el éxito de devolución de llamada basado en la presencia de este encabezado HTTP personalizado me iba a inyectar el resultado en una u otra parte:

$('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;
});