如何在提交Ajax表单后使用消息更新_Layout.cshtml中的DIV？

Question

目前，我有一个剃刀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() 

我想填补这一内容异步股利。这可能吗？我怎样才能做到这一点？

Answer 1

个人而言，我会抛出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; 
});