简体   繁体   English

Kendo网格不显示数据MVVM

[英]Kendo grid not displaying data MVVM

I am not sure what I am doing wrong 我不确定自己在做什么错

My HTML 我的HTML

    <head>
    <title></title>

    <script src="include/libraries/jquery/jquery-2.2.2.min.js"></script>
    <script src="include/libraries/jquery/jquery-2.2.2.intellisense.js"></script>
    <script src="include/libraries/jquery/jquery-2.2.2.js"></script>

    <link href="include/libraries/kendo/css/kendo.bootstrap.min.css" rel="stylesheet" />
    <link href="include/libraries/kendo/css/kendo.common-bootstrap.min.css" rel="stylesheet" />

    <script src="include/libraries/kendo/js/kendo.all.js"></script>
    <script src="include/libraries/kendo/js/kendo.all.min.js"></script>
    <script src="include/libraries/kendo/js/kendo.aspnetmvc.min.js"></script>
    <script src="include/libraries/kendo/js/kendo.custom.min.js"></script>
    <script src="include/libraries/kendo/js/kendo.timezones.min.js"></script>


    <meta charset="utf-8" />
</head>
<body>
    <div id="grid">
        <div class="demo-section k-content wide">
            <div>
                <h4>Add or update a record</h4>
                <div data-role="grid"
                     data-editable="true"
                     data-toolbar="['create', 'save']"
                     data-columns="[
                                 { 'field': 'CourseID' },
                                 { 'field': 'CourseName' },
                                 { 'field': 'IsActive' },
                              ]"
                     data-bind="source: courses,
                            visible: isVisible,
                            events: {
                              save: onSave
                            }"
                     style="height: 200px"></div>
            </div>
        </div>

        <script>

            var viewModel = kendo.observable( {          


                    isVisible: true,
                    onSave: function(e) {
                        kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
                    },

                    courses: new kendo.data.DataSource({
                        schema: {
                            model: {
                                id: "CourseID",
                                fields: {
                                    CourseID: { type: "number" },
                                    CourseName: { type: "string" },
                                    IsActive:{type:"boolean"}
                                }
                            }
                        },
                        batch: true,
                        transport: {
                            read: {
                                type:"GET",
                                url: "http://localhost:51447/api/Courses",
                                dataType: "jsonp"
                            },

                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        }
                    })
                });
                kendo.bind($("#grid"), viewModel);
            </script>
        </div>

    </body>

My Controller Code // GET: api/Courses 我的控制器代码 // GET:API /课程

    public IQueryable<object> GetCourses()
    {
        return db.Courses.Select(
           o => new
           {
               CourseID = o.CourseID,
               CourseName = o.CourseName,
              IsActive = o.IsActive
           });

    //}).Where(l => l.IsActive == false);
    }

My JSON [{"CourseID":1,"CourseName":"Beauty Therapy","IsActive":true},{"CourseID":2,"CourseName":"Software Development","IsActive":true},{"CourseID":3,"CourseName":"Bookkeeping and Accounting","IsActive":true}] 我的JSON [{“ CourseID”:1,“ CourseName”:“ Beauty Therapy”,“ IsActive”:true},{“ CourseID”:2,“ CourseName”:“ Software Development”,“ IsActive”:true},{ “ CourseID”:3,“ CourseName”:“簿记和会计”,“ IsActive”:true}]

I finally got this fixed. 我终于解决了这个问题。 The structure of my solution is such that it has a WebAPI and a Web app. 我的解决方案的结构使得它具有WebAPI和Web应用程序。 So in the WebApiConfig.cs file I added the line config.EnableCors(); 因此,在WebApiConfig.cs文件中,我添加了config.EnableCors(); and it worked. 而且有效。

public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            config.EnableCors();

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );


        }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM