2016-10-09 26 views
1

查看如何传递模型对象查看Asp.Net MVC使用Ajax

@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()); 
    } 

上面的代码工作正常,而不是进行调用来加载整个页面我想在创建Ajax请求的同时更改下拉列表并从JsonResult操作方法接收订单模型,以便我可以在我的foreach循环中使用该模型来遍历Orders,例如

public JsonResult MonthlyOrders() 
{ 
    // ?? 
} 

,以及如何将搜索的模式将接收对象

回答

2

您可以创建一个强类型你Orders类的集合的局部视图。把代码循环遍历项目并在其中显示。然后在您的主视图中包含此部分视图。

现在为您的ajax方法,将返回类型更改为ActionResult并返回部分视图结果。您可以构建Orders集合并将该列表传递给相同的分部视图。所以你的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) 
} 

现在,在你的主视图,您将包括这里面的局部视图一个容器格

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

现在当你的ajax调用g从服务器ETS数据,只需更换ID的div内容的 “订单”

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

他们有什么方法通过Ajax更新视图模型? –

+0

和Json结果无法返回ViewResut –

+0

使用ajax时,无法更新主视图的模型数据,因为它会在服务器中执行,并且稍后您的ajax调用将在客户端发生。使用局部视图方法,您正在更新局部视图的模型数据。而对于方法返回类型,是的,它应该是'ActionResult'我现在修复它。 – Shyju

1

添加自定义标签,就可以

<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); 
} 
相关问题