如何使用Ajax傳遞模型對象以在Asp.Net MVC中查看

Question

視圖

@model IEnumerable<InfinityWeb.Models.Orders>
<body> 
   foreach(var item in Model)
   {
    <label> item.OrderId </label> <br/>   @* it display all students name *@
   }

 @* Below is just DropDown for making request to controller *@

<div class="dropdown ">
  <button class="btn dropdown-toggle"type="button" id="menu1" data-toggle="dropdown">
        Select Orders
     <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="@Url.Action("MonthOrders", "Admin")">This month orders</a></li>
    <li role="presentation"><a role="menuitem" href="@Url.Action("TodayOrders", "Admin")">Today Orders</a></li>
  </ul>
</div>

控制器 - 將新模型返回到同一視圖以迭代月訂單

 public ActionResult MonthOrders()
    {
        return View("Index", orders.GetMonthOrders());
    }

上面的代碼工作正常，但是我沒有調用加載整個頁面，而是在更改下拉列表並從JsonResult操作方法接收訂單模型時發出Ajax請求，這樣我就可以在foreach循環中使用該模型來迭代Orders如下

public JsonResult MonthlyOrders()
{
   // ??
}

此外，View的模型將如何接收該對象

Answer 1

您可以創建一個部分視圖，該視圖強烈地鍵入Orders類的集合。 將代碼循環遍歷項目並顯示在其中。 然后在主視圖中包含此部分視圖。

現在為您的ajax方法，將返回類型更改為ActionResult並返回部分視圖結果。 您可以構建訂單集合並將該列表傳遞到同一部分視圖。 所以你的ajax調用的響應將是部分視圖呈現的html。

創建一個名為OrderTable.cshtml的部分視圖並擁有此代碼

@model IEnumerable<InfinityWeb.Models.Orders> 
foreach(var item in Model)
{
  <label> item.OrderId </label> <br/>  
}

現在在MonthlyOrders中，返回包含數據的視圖

public ActionResult MonthlyOrders()
{
    var orderList = new List<Orders>();
    // to do : Load data to orderList variable.
    return View("OrderTable.cshtml",orderList)
}

現在在主視圖中，您將在容器div中包含此局部視圖

@model IEnumerable<InfinityWeb.Models.Orders> 
<div id="orders">
 @Html.Partial("OrderTable",Model);
</div>

現在當你的ajax調用從服務器獲取數據時，只需用id“orders”替換div的內容

$.get("/MonthlyOrders",function(data){
   $("#orders").html(data);
});

Answer 2

將自定義標記添加到您的li

<li role="presentation" custometag="Month"><a role="menuitem" href="Month">This month orders</a></li>
<li role="presentation" custometag="Today"><a role="menuitem" href="Today">Today Orders</a></li>

你的ajax電話會是這樣的

$('li').click(function () {

 var param = $(this).attr('custometag');
 $.ajax({
   url: "contact",
   type: "POST",
   data: {result: param },
   dataType: "json",
   success: function (data) {
       // here you can display your return data with your label
   },
   error: function (data) {
       alert('error')
   }
  });
);

和你的控制器看起來像

public JsonResult Contact(string result)
 {
    // here you can get value of Month or Today

    // filter data with your value orders.GetMonthOrders()

    //var data = filtered with result parameter.

    return Json(data, JsonRequestBehavior.AllowGet);
 }

如何使用Ajax傳遞模型對象以在Asp.Net MVC中查看

問題描述

2 個解決方案

解決方案1
2 已采納 2016-10-09 14:31:50

解決方案2
1 2016-10-09 15:33:38

如何使用Ajax傳遞模型對象以在Asp.Net MVC中查看

問題描述

2 個解決方案

解決方案1 2 已采納 2016-10-09 14:31:50

解決方案2 1 2016-10-09 15:33:38

解決方案1
2 已采納 2016-10-09 14:31:50

解決方案2
1 2016-10-09 15:33:38