2015-10-06 33 views
0

我使用AJAX調用表內的控制器操作和加載項的引導面板內完全局部視圖。完整面板組在局部視圖內。我只想返回訂單數據,並使用新填充的視圖模型填充面板主體,但整個局部視圖正被重新加載到所選面板主體中。阿賈克斯POST返回引導面板主體

enter image description here

有三個面板,所以我有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中重新加載表格而不返回整個局部視圖。任何幫助,將不勝感激。謝謝!

+0

您每次都會返回相同的BottomOrders局部視圖。我相信你可能需要在控制器中的每個返回的部分視圖。 –

+0

AJAX觸發器「#evaluation-panel-heading」是什麼類型的元素,它在表單中? – Jasen

+0

'#evaluation-panel-heading'不在表格內,它只是打開第一個面板的錨點 – cfly24

回答

1

除非我失去了一些東西,這是非常直接的。你有一個部分內容,你只想要一些的時間。因此,您需要將其分解爲兩個部分,這樣您可以使用一個面板佈局,另一個使用面板內容(部分佈局可以加載該部分),或者只需要將面板內容包含在部分內容中只需在視圖中直接顯示面板佈局即可。

無論哪種方式,迴應您的AJAX請求端點需要返回部分僅包含面板的內容,這是不是現在發生的事情。

0

您需要爲內容創建新的局部視圖。如果所有訂單具有相同的字段,則可以對所有內容使用一個「部分視圖」,如果不是,則需要爲每個內容創建一個部分。

在總結

: 您需要的佈局和內容(或每每一個內容)查看其它。