Angularjs 如何正确格式化JsonResult调用
我使用一个JsonResult操作方法通过一个$http调用将数据传递到我的cshtml视图中。然而,我无法让我的角度代码以应有的方式过滤/排序/显示序列化对象 为了进行测试,我手动将一个可序列化列表作为ActionResult参数直接传递给视图,在视图中的Razer块中使用JsonConvert对其进行序列化,然后将该Json字符串直接传递给angular ng init函数。当我这样做的时候,一切都很好;我可以用ng repeat建立一个表,用ng show过滤东西等等 但是,当我尝试通过Angularjs 如何正确格式化JsonResult调用,angularjs,asp.net-mvc,Angularjs,Asp.net Mvc,我使用一个JsonResult操作方法通过一个$http调用将数据传递到我的cshtml视图中。然而,我无法让我的角度代码以应有的方式过滤/排序/显示序列化对象 为了进行测试,我手动将一个可序列化列表作为ActionResult参数直接传递给视图,在视图中的Razer块中使用JsonConvert对其进行序列化,然后将该Json字符串直接传递给angular ng init函数。当我这样做的时候,一切都很好;我可以用ng repeat建立一个表,用ng show过滤东西等等 但是,当我尝试通过返
返回Json(list,JsonRequestBehavior.AllowGet)传递相同的可序列化对象时代码>所有涉及该数据的操作都会中断,或者什么都不做,或者抛出运行时错误
以下是功能完美的调试解决方案:
控制员:
public ActionResult Dashboard()
{
DashboardViewModel data = ServiceCache.GetData();
return View(data);
}
public JsonResult DataRefresh()
{
DashboardViewModel data = ServiceCache.GetData();
return Json(data.ItemList, JsonRequestBehavior.AllowGet);
}
观点:
@model EngineeringWorkflowBusiness.Models.DashboardViewModel
<main class="container" role="main" ng-controller="processModel">
<div class="jumbotron" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model.ItemList))">
<tr ng-repeat="item in data">
<td>{{item.info}}</td>
</div>
</main>
这是我实际需要使用的方法,但根本不起作用,什么也不显示,表是空的
控制员:
public ActionResult Dashboard()
{
DashboardViewModel data = ServiceCache.GetData();
return View(data);
}
public JsonResult DataRefresh()
{
DashboardViewModel data = ServiceCache.GetData();
return Json(data.ItemList, JsonRequestBehavior.AllowGet);
}
观点:
@model EngineeringWorkflowBusiness.Models.DashboardViewModel
<main class="container" role="main" ng-controller="processModel">
<div class="jumbotron" ng-init="GetData()">
<tr ng-repeat="item in data">
<td>{{item.info}}</td>
</div>
</main>
关于JsonResult是如何工作的,肯定有一些我不理解的地方,因为据我所知,$scope.data
在这两种情况下应该包含完全相同的Json字符串。Angular$http
服务返回一个带有data
属性的promise对象,该属性具有ajax调用响应的响应体。所以用那个
$scope.LoadData = function() {
$http({
method: "GET",
url: '/Home/DataRefresh'
}).then(function success(result) {
$scope.data = result.data;
}, function error(errResponse) {
alert("ERROR!");
});
};
此外,您的HTML标记似乎无效。如果要呈现表格行,则该行应位于表格
中,而不是div
<table class="table" ng-init="GetData()">
<tr ng-repeat="item in data">
<td>{{item.info}}</td>
</tr>
</table>
{{item.info}