Связывание данных KendoUI с Sql с инфраструктурой Entity

Question

Я разрабатываю приложение Asp.net MVC3 с Entity Framework. Я использую Knockoutjs для привязок и KendoUI для части пользовательского интерфейса. Я смог реализовать большинство виджетов KendoUi, но теперь мне нужно использовать элемент управления сетью KendoUI, который берет свои данные с SQL-сервера. Насколько я понял, виджет сетки работает с XML или JSON.

Так у меня есть контекст ДБ:

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

Я сохраненный некоторые данные в таблицах в локальном сервере Sql и извлечь его из контроллера и сериализовать его 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 
     });​ 

Но когда я попытался привязать его к контроллеру Index возвращающегося 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" 
          } 
         ] 
      }); 
     });