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

Posted 2023-04-01

【中文标题】Ajax POST 返回 Bootstrap 面板主体内的完整部分视图

【英文标题】：Ajax POST returns full partial view inside Bootstrap panel body

【发布时间】：2016-01-03 19:49:05

【问题描述】：

我正在使用 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);
            
        
    );
);

控制器动作：

[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 中的表。任何帮助，将不胜感激。谢谢！

【问题讨论】：

您每次都返回相同的BucketOrders 部分视图。我相信您可能需要对控制器中的每个返回进行局部视图。

AJAX 触发器#evaluation-panel-heading 是什么元素，它在表单中吗？

#evaluation-panel-heading 不在表单内，它只是打开第一个面板的锚

那么你需要阻止默认链接动作。

为什么会这样？默认链接操作只是打开面板

【参考方案1】：

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

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

【参考方案2】：

您需要为内容创建一个新的局部视图。如果所有订单都有相同的字段，您可以为所有内容使用一个 Partial View，如果没有，您将需要为每个内容创建一个 partial。

总结： 您需要一个用于布局的视图和另一个用于内容的视图（或每个内容一个）。