Как обновить DIV в _Layout.cshtml сообщением после отправки формы Ajax? - PullRequest
Новая
       24

Как обновить DIV в _Layout.cshtml сообщением после отправки формы Ajax?

2 голосов
/ 18 мая 2011

В настоящее время у меня есть бритва 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 асинхронно.Это возможно?Как я могу это сделать?

1 Ответ

3 голосов
/ 18 мая 2011

Лично я бы выбросил 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);
}

и, наконец, в отдельном файле javascript, я бы ненавязчиво 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;
});
...