Question

我正在使用ajax来调用控制器操作并在引导面板中的表内加载项。完整的面板组位于局部视图中。我只想返回订单数据，并使用新填充的视图模型填充面板主体，但整个局部视图正在重新加载到选定的面板主体中。

有三个面板，所以我有3个帖子：

 $("#evaluation-panel-heading").click(function() {
    $.ajax({
        url: '@Url.Action("EvaluationOrders","Home")',
        type: 'POST',
        success: function(data) {
          if (data) {
              $("#evaluation-panel-body").html(data);
          }
        }
    });
});
$("#dfc-panel-heading").click(function () {
    $.ajax({
        url: '@Url.Action("DfcOrders","Home")',
        type: 'POST',
        success: function (data) {
            if (data) {
                $("#dfc-panel-body").html(data);
            }
        }
    });
});
$("#wip-panel-heading").click(function () {
    $.ajax({
        url: '@Url.Action("WipOrders","Home")',
        type: 'POST',
        success: function (data) {
            if (data) {
                $("#wip-panel-body").html(data);
            }
        }
    });
});

Controller Action's：

[HttpPost]
    public ActionResult EvaluationOrders()
    {
        using (var entity = new Entities())
        {
            var atp = User.Identity.Name;
            var ordersInEvaluation = entity.uspGetOrdersInEvaluation(atp).ToList();
            var viewModel = new AtpMobileViewModel
            {
                OrdersInEvaluation = ordersInEvaluation
            };

            return PartialView("BucketOrders", viewModel);
        }
    }

    [HttpPost]
    public ActionResult DfcOrders()
    {
        using (var entity = new Entities())
        {
            var atp = User.Identity.Name;
            var ordersInDfc = entity.uspGetOrdersInDFC(atp).ToList();
            var viewModel = new AtpMobileViewModel
            {
                OrdersInDfc = ordersInDfc
            };

            return PartialView("BucketOrders", viewModel);
        }
    }

    [HttpPost]
    public ActionResult WipOrders()
    {
        using (var entity = new Entities())
        {
            var atp = User.Identity.Name;
            var ordersWip = entity.uspGetOrdersWIP(atp).ToList();
            var viewModel = new AtpMobileViewModel
            {
                OrdersWip = ordersWip
            };

            return PartialView("BucketOrders", viewModel);
        }
    }

第一个参考面板主体：

<div id="evaluation-panel-body" class="panel-body">
    @if (Model != null && Model.OrdersInEvaluation != null)
    {
    <table class="footable">
         <thead>
              <tr>
                  <th>Description</th>
                  <th>Client</th>
              </tr>
         </thead>
        @foreach (var order in Model.OrdersInEvaluation)
            {
            <tr>
                <td>@order.OrderDesc</td>
                <td>@order.db_CustID</td>
            </tr>
            }
    </table>
   }
</div>

我只是试图填充表格而不是重新加载所选面板主体中的整个局部视图。我无法弄清楚如何填充视图模型并在div中重新加载表而不返回整个局部视图。任何帮助，将不胜感激。谢谢！

Answer 1

除非我遗漏了什么，否则这很简单。你有一个部分内容，你只想要一些的时间。因此，您需要将其分解为两个部分，例如，您有一个具有面板布局，另一个具有面板内容（布局部分可以加载此部分），或者您只需要在部分中包含面板内容只需在视图中直接使用面板布局。

无论哪种方式，响应您的AJAX请求的端点都需要返回仅包含面板内容的部分，现在不会发生。

Answer 2

您需要为内容创建新的部分视图。如果所有订单都有相同的字段，您可以对所有内容使用一个部分视图，否则，您需要为每个内容创建一个部分。

总结：您需要一个View for the Layout和其他内容（或每个内容一个）。

Ajax POST返回Bootstrap面板主体内的完整局部视图

2 个答案: