数据正在使用角度js

时间:2015-06-15 08:33:06

标签: asp.net-mvc angularjs kendo-ui

我能够从数据库中获取数据,但不能在gridview中填充。 这是我的代码:



<div ng-app="app" ng-controller="MyCtrl">
    <div kendo-grid k-options="gridOptions" k-rebind="gridOptions" k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }'></div>
</div>
<script>
    angular.module("app", ["kendo.directives"]).controller("MyCtrl", function ($scope, $http) {
        $scope.gridOptions = {
            columns: [{ field: "EmployeeKey" }, { field: "FirstName" }],
            dataSource: {
                //schema: {
                //    data: "d"
                //},
                type: "jsonp",
                transport: {
                   
                    read: function (e) {
                        
                        $http({ method: 'GET', url: '/Employee/Employee_Read' }).
                        success(function (data, status, headers, config) {
                           // alert('Sucess')
                            //debugger;
                          
                           e.success(data)
                        }).
                        error(function (data, status, headers, config) {
                            alert('something went wrong')
                            console.log(status);
                        });
                    }
                },
                //pageSize: 5
            }
        }
    });
</script>
&#13;
&#13;
&#13;

这是我获取数据的控制器页面

&#13;
&#13;
public ActionResult Employee_Read ([DataSourceRequest] DataSourceRequest request )
        {
            //IQueryable<IEmployeeRepositary> employeeRep = employeeRepositary.Employees;
            return Json(employeeRepositary.Employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
&#13;
&#13;
&#13;

所以在运行我的应用程序后,我正在通过调试器检查这一行 &#34; e.success(数据)&#34;所以在鼠标hove我得到从数据库中提取的总记录。但是没有在gridview中填充它仍然显示为空白。 请从这里帮助我。

1 个答案:

答案 0 :(得分:0)

因为您正在返回使用DataSourceResult方法包装的集合。

return Json(employeeRepositary.Employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

而不仅仅是它的集合

return Json(employeeRepositary.Employees, JsonRequestBehavior.AllowGet);

您需要定义数据源schema,请尝试此架构设置

schema: {
     data: "Data",
     errors: "Errors",
     total: "Total",
     model: {
         id: "Id",
         fields: {
             Id: { editable: false, defaultValue: 0 },
             //the rest field definition
         }
     }
}

您可以将您的传输read更改为此类

read: {
    type: "POST",
    url: "/Employee/Employee_Read",
    dataType: "json",
    contentType: "application/json"
}

你的最终代码应该是这样的

$scope.gridOptions = {
    columns: [{ field: "EmployeeKey" }, { field: "FirstName" }],
    dataSource: {
        transport: {
            read: {
                type: "POST",
                url: "/Employee/Employee_Read",
                dataType: "json",
                contentType: "application/json"
            },
            parameterMap: function(options, operation) {
                return JSON.stringify(options);
            }
        },
        pageSize: 5,
        schema: {
            data: "Data",
            errors: "Errors",
            total: "Total",
            model: {
                id: "EmployeeKey",
                fields: {
                    EmployeeKey: { editable: false, defaultValue: 0 },
                    FirstName: {type: "string", validation: { required: true }}
                }
            }
        }
    }
}

和您的控制器一样

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult Employee_Read ([DataSourceRequest] DataSourceRequest request )
{
    var employees = employeeRepositary.Employees;

    return Json(employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}