1

EntityFrameworkを使用してAsp.netMVC3アプリケーションを開発しています。バインディングにはKnockoutjsを使用し、ビューのUI部分にはKendoUIを使用しています。ほとんどのKendoUiウィジェットを実装できましたが、SQLサーバーからデータを取得するKendoUIグリッドコントロールを使用する必要があります。私が理解している限り、グリッドウィジェットはXMLまたはJSONで動作します。

だから私はdbコンテキストを持っています：

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
        });​

しかし、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
                            }

私はプログラミングにかなり慣れていないので、このアプローチが正しいかどうかわかりません。私のサンプルコードに基づいた例を含む提案は大歓迎です。ありがとう！

4

1 に答える 1

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"
                            }
                        ]
            });
        });
于 2012-06-22T12:31:08.360 に答える