Question

有人可以向我解释如何（如果可能）在MVC4视图中使用一个Ajax.BeginForm调用多个动作吗？让我解释一下我要做的事情。我在视图中有一个表单，它为Controller提供了两个参数。在此视图中，我还有四个部分视图，可在提交表单时进行更新。每个操作都会返回一个部分视图，用于更新页面的4个部分。

据我所知，每个Ajax.BeginForm都可以在Controller上调用一个且只能调用一个动作。通过单击表单中的按钮更新页面上的四个部分视图的最佳方法是什么？

以下是我的观点。

  <div id="dayTab" data-metro-container="dashboardForm">
  @using (Ajax.BeginForm("Products", "Dashboard", new AjaxOptions { UpdateTargetId="ProductsDiv", OnComplete = "processDay" }))
  {
    <table>
        <tr>@Html.ValidationSummary()</tr>
        <tr>
            <td>@Strings.LabelDashboardDate :
            </td>
            <td>
                @Html.HiddenFor(model => model.DateRangeFilter)
                @Html.TextBoxFor(model => model.DateRangeCriteria, new { @class = "dateRangeClass" })
            </td>
            <td>
                <input id="btnApply" type="submit" name="btnApply" value="@Strings.LabelApply" title="@Strings.TooltipDashboardApply" />
            </td>
            <td>
                <span class="customNoWrap" data-metro-spinner="spinner" style="display: none;">
                    <img src="@ConfigurationCache.Settings.CSSPath/Content/themes/metro/Images/loading.gif")" alt="" class="metroCenterTag"/>
                </span>
            </td>
        </tr>
    </table>
  }

<div style="float:left;">
    <div id="ProductsDiv">
        @{ Html.RenderAction("Products"); }
    </div>
    <div id="QuantitiesDiv" style="height: 200px;">
        @{ Html.RenderAction("Quantities"); }
    </div>            
</div>

<div style="float: left;">
    <div id="PurchaseOrdersDiv" style="margin-left: 10px;">
      @{ Html.RenderAction("PurchaseOrders"); }
    </div>
    <div id="BoxesDiv" style="margin-left: 10px;">
      @{ Html.RenderAction("Boxes"); }
    </div>
    <div id="PalletsDiv" style="margin-left: 10px;">
      @{ Html.RenderAction("Pallets"); }
    </div>
</div>

<div style="clear: both"></div>

我实际上在jQuery选项卡中有四个选项卡，每个选项卡具有相同的结构，相同的部分视图。必须提交表单并更新当前选项卡中的4个部分视图。

Answer 1

在我看来，你的ajax的唯一目的是在服务器中设置过滤条件，因此其他4个部分视图可以使用它们进行相应的渲染。

为什么不让你使用Ajax调用的操作返回你需要的所有标记，并用它更新容器？如果使用ajax调用操作，则可以渲染部分视图，其中包含此处所需的4个部分视图。那，恕我直言更简单，更清晰。

无论如何，你想做什么都可以。如果不能修改您的管道，那么您可以这样做：

1）在Ajax选项中指定成功的处理程序：

@using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions
            {
                HttpMethod = "Post",
                OnSuccess = "LoadPartialViews()"
            }

2）用每个部分容器装饰每个部分容器：

<div id="ProductsDiv" data-url="@Url.Action("Products")">
    @{ Html.RenderAction("Products"); }
</div>

//and so on for the rest of the partials

3）调用OnSuccess LoadPartialViews（），如下所示：

var LoadPartialViews = function (){
    var productsUrl = $("#ProductsDiv").data("url");
    //this will load the partial view content on the div... 
    $("#ProductsDiv").load(productsUrl, function(){});
};

同样，我确信通过单一动作驱动所有这些渲染会更好。在第一次加载时，您始终可以假设某些默认值，然后触发操作，以便获得初始内容。

我希望这会有所帮助。

Answer 2

我没有告诉你如何在Ajax.BeginForm中挤压逻辑，而是指出你检查http://knockoutjs.com/哪个与ASP.NET MVC相当不错。如果您有一些数据依赖于多个页面元素，那么您将使用KnockoutJS更有效地完成工作，因为它允许您的视图元素在基础依赖数据发生变化时更新 - 并且它会自动为您完成。有很棒的在线教程，需要1-2个小时才能完成，而且非常详细。

ajax.beginform调用许多动作

2 个答案: