0

Can someone explain to me how (if possible) to call multiple actions using one Ajax.BeginForm in an MVC4 view? Let me explain what I'm trying to do. I have a form in my view that provides two parameters to the Controller. In this view I also have four partial views to update when the form is submitted. Each action returns a partial view that updates the 4 sections of the page.

From what I understand, each Ajax.BeginForm can call one and only one action on the Controller. What is the best way to update four partial views on a page at the click of a button in the form?

Here is what my view looks like.

  <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>

I actually have four tabs in a jQuery tab and each tab has the same structure, same partial views. The form has to be submitted and updates the 4 partial views in the current tab.

4

2 回答 2

0

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

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

无论如何，你想要的都可以做到。如果修改管道不是一种选择，您可以这样做：

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

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

2) 用每个部分的 url 装饰每个部分容器：

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

同样，我相信你会更好地驱动所有这些渲染的单个动作。在第一次加载时，您始终可以假设一些默认值，并触发操作，因此您可以获得初始内容。

我希望这有帮助。

于 2013-09-15T05:59:49.127 回答
0

与其告诉您如何压缩 Ajax.BeginForm 中的逻辑，我会指出您检查http://knockoutjs.com/，它与 ASP.NET MVC 配合得非常好。如果您有几个页面元素依赖的一些数据，您将使用 KnockoutJS 更有效地完成工作，因为它允许您的视图元素在底层依赖数据发生变化时更新 - 它会自动为您完成。有很棒的在线教程，需要1-2个小时才能完成，而且非常详细。

于 2013-09-15T07:04:19.597 回答