Skip to main content
 首页 » 编程设计

c#之如何使用 Ajax 传递模型对象以在 Asp.Net MVC 中查看

2024年04月17日37rubylouvre

查看

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

Controller - 将新模型返回到相同的 View 以迭代月度订单

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

上面的代码工作正常,但我不想调用加载整个页面,而是想在更改下拉列表时发出 Ajax 请求,并从 JsonResult 操作方法接收订单模型,这样我就可以在我的 foreach 循环遍历 Orders 如下所示

public JsonResult MonthlyOrders() 
{ 
   // ?? 
} 

还有 View 的模型将如何接收该对象

请您参考如下方法:

您可以创建一个分部 View ,它是您的 Orders 类集合的强类型。放置循环遍历项目并在其中显示的代码。然后将此部分 View 包含在您的主视图中。

现在对于您的 ajax 方法,将返回类型更改为 ActionResult 并返回部分 View 结果。您可以构建订单集合并将该列表传递给相同的部分 View 。因此,您的 ajax 调用的响应将是局部 View 呈现的 html。

创建一个名为 OrderTable.cshtml 的分部 View 并拥有此代码

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

现在在您的 MonthlyOrders 中,返回带有数据的 View

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

现在在您的主视图中,您将把这个部分 View 包含在一个容器 div 中

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

现在,当您的 ajax 调用从服务器获取数据时,只需将 div 的内容替换为 id “orders”

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