使用实体框架将KendoUI绑定到Sql数据

Question

我正在开发一个带Entity Framework的Asp.net MVC3应用程序。我使用Knockoutjs进行绑定，并使用KendoUI进行视图的UI部分。我能够实现大部分的KendoUi小部件，但现在我需要使用KendoUI网格控件从SQL服务器获取数据。据我了解，网格小部件可以使用XML或JSON。

所以我有一个分贝背景：

public DbSet<FranchiseInfoDto> Franchises { get; set; } 

我在本地SQL Server保存在表中的一些数据，并从控制器获取，并将其序列化到JSON，所以我可以以某种方式将其绑定到在图栅格widjet：

private OmegaDB db = new OmegaDB(); 

     // 
     // GET: /Franchise/ 

     public JsonNetResult Index() 
     { 
      JsonNetResult jsonNetResult = new JsonNetResult { Formatting = Formatting.Indented }; 
      var franchises = db.Franchises.ToList(); 
      jsonNetResult.Data = franchises; 
      return jsonNetResult; 
     } 

序列化JSON数据的格式如下：

[{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}]; 

我看了一下KendoUI网格文件，并能够将其绑定到一些像这样的本地数据：

var menus = [{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}]; 

var dataSource = new kendo.data.DataSource({ 
      data: menus, 
      schema: { 
       model: { 
        fields: { 
         ParentId: { editable: true }, 
         Title: { editable: true }, 
         Type: { editable: true }, 
         Link: { editable: true } 
        } 
       } 
      } 
     }); 

     $("#grid").kendoGrid({ 
      toolbar: ["create", "save", "cancel"], 
      columns: [ 
       { 
        field: "ParentId", 
        title: "Id", 
        width: 50 
       }, 
       { 
        field: "Title", 
        title: "Label", 
        width: 100 
       }, 
       { 
        field: "Type", 
        title: "Type", 
        width: 100 
       }, 
       { 
        field: "Link", 
        title: "Link" 

       } 
       ], 
      dataSource: dataSource, 
      editable: true, 
      groupable: true, 
      scrollable: true, 
      sortable: true, 
      pageable: true 
     });​ 

但是，当我试图把它绑定到指数返回控制器的Json我没有成功。我试过这样的事情：

dataSource: { 
          type: "odata", 
          transport: { 
           read: "Franchise/Index" // this is my controller action //where I serialize the data coming from the local sql server to json 
          } 

我对编程颇为陌生，我不确定这种方法是否正确。任何建议与示例基于我的示例代码将不胜感激。谢谢！

Answer 1

我设法填充网格与序列化的数据从数据库json。这里是控制器代码返回JSON数据：

public ActionResult SampleData() 
     { 
      JsonNetResult jsonNetResult = new JsonNetResult { Formatting = Formatting.Indented }; 
      var f1 = new FranchiseInfoSampleData(); 
      f1.ParentId = 0; 
      f1.Title = "Deposit"; 
      f1.Type = "functionality"; 
      f1.Link = "http://www.abv.bg"; 

      var f2 = new FranchiseInfoSampleData(); 
      f2.ParentId = 1; 
      f2.Title = "Cash Out"; 
      f2.Type = "link"; 
      f2.Link = "www.abv.bg"; 

      List<FranchiseInfoSampleData> sampleData = new List<FranchiseInfoSampleData>(); 
      sampleData.Add(f1); 
      sampleData.Add(f2); 

      jsonNetResult.Data = sampleData; 
      return jsonNetResult; 
     } 

这里是剑道网格代码：

$(document).ready(function() { 
      $("#grid").kendoGrid({ 
       dataSource: { 
        transport: { 
         read: { 
          url: "Home/SampleData", 
          dataType: "json" 
         } 
        }, 
        schema: { 
         model: { 
          fields: { 
           ParentId: { editable: true }, 
           Title: { type: "string", editable: true }, 
           Type: { type: "string", editable: true }, 
           Link: { type: "string", editable: true } 
          } 
         } 
        }, 
        pageSize: 10, 
        serverPaging: true, 
        serverFiltering: true, 
        serverSorting: true 
       }, 
       height: 250, 
       filterable: true, 
       sortable: true, 
       pageable: true, 
       columns: [{ 
        field: "ParentId", 
        filterable: false 
       }, 
          { 
           field: "Title", 
           width: 100 
          }, { 
           field: "Type", 
           width: 200 
          }, { 
           field: "Link" 
          } 
         ] 
      }); 
     });