kendoGrid 获取后台返回的json数据并展示在页面上

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012571917/article/details/77907806

url是请求的controller名称，还有该控制器里边的Action名称，id是我写死的11，因为这是只是测试。请根据实际需求，把id传入对应的变量。

@{
    ViewBag.Title = "科研项目汇总";
    Layout = "~/Views/Shared/_LayoutMetronicMain.cshtml";
}

<!-- BEGIN PAGE HEADER-->
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
        <h3 class="page-title">
            科研项目管理 <small></small>
        </h3>
        <ul class="page-breadcrumb breadcrumb">
            <li>
                <i class="fa fa-home"></i>
                <a href="/">
                    MedRIS
                </a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="javascript:void(0)">
                    科研项目汇总
                </a>
            </li>
        </ul>
        <!-- END PAGE TITLE & BREADCRUMB-->
    </div>
</div>
<div class="portlet">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-shopping-cart"></i>科研项目汇总
        </div>
    </div>
    <div class="portlet-body">
        <div id="grid"></div>
    </div>
</div>
<style>
    .k-header {
        text-align:center !important ;
    }
    .k-pager-sizes {
        display:none !important;
    }

</style>
        <script type="text/javascript">


    $(function () {
        $("#grid").kendoGrid({
            dataSource: {
                transport:
                {
                    read: {
                    url: "@Url.Action("GetData/11", new {  controller = "ProjectSupervisionUnit" })",
                    dataType: "json"
                    }
                },
                pageSize: 10
            },
            attributes: { "class": "grid-algin-center" },
            pageable: {
                refresh: false,
                pageSizes: true,
                messages: {
                    display: "{0} - {1} 共 {2} 条数据",
                    empty: "没有数据",
                    page: "页",
                    of: "/ {0}",
                    itemsPerPage: "条每页",
                    first: "第一页",
                    previous: "前一页",
                    next: "下一页",
                    last: "最后一页",
                    refresh: "刷新"
                }
            },
            columns: [{
                field: "Name",
                title: "项目名称",
                width: 200
            }, {
                field: "OwnerUserCode",
                title: "负责人"
            }, {
                field: "Patient_IdSUMS",
                title: "病例数"
            }, {
                field: "CRFForm_IdSUMS",
                title: "表单数"
            }, {
                field: "CreateDate",
                title: "开始日期"
            }]
        });
    });
        </script>