2

Kendo UI Treeview と ASP.Net MVC TO ASP.Net MVC SPA (デュランダル + ブリーズ) を使用して、非常に単純なサンプルを移動しています。剣道 UI + ASP.NET MVC の使用は非常に単純です。これは、クライアント側で次のような構文を使用するだけでよいためです。

  jQuery(function () {
            jQuery("#treeview").kendoTreeView({
                    "dataSource":{
                        "transport":{
                            "prefix": "",
                            "read":{"url": "http://localhost:49729//treeview/operations"}
                        },
                        "schema":{"errors": "Errors"}},
                    "dataTextField": "Name"
                }
            );});

そして、私のコントローラーでは次のようなものを使用します:

public JsonResult Operations(int? id)
    {
        var manager = new OperationUnitManager();

        var objects = from o in manager.GetList()
                      where (id.HasValue ? o.ParentId == id : o.ParentId == null)
                      select new
                      {
                          id = o.Id,
                          Name = o.Name,
                          hasChildren = o.HasChildren
                      };
        return Json(objects, JsonRequestBehavior.AllowGet);
    }

とても簡単です！TreeViewControl は、LoadOnDemand=true を使用してサービスからデータを取得します。これにより、コントロールは選択されたツリー ノードの ID を取得し、すべての子ノードを取得するために Operation メソッドを呼び出します。とても簡単です！

今、mvvm パターンとそよ風 ( https://github.com/jstott/breeze-kendoに基づく)を使用して同じコントロールを使用したい場合、コントロールは機能しません..「読み込み中..」というメッセージが表示されるだけです。ビューモデルに使用しているコードは次のとおりです。

define(['services/logger', 'services/datacontext'], function (logger, datacontext) {
var vm = function () {
    var self = this;
    this.activate = function () {
        logger.log('Organisation View Activated', null, 'Organisation', true);
        return true;
    };

    this.viewAttached = function (view) {
        logger.log('viewAttached', this.title, 'Organisation', true);
        $('#treeView').kendoTreeView(this.treeViewOptions);
    };
    this.datacontext = datacontext;
    this.title = 'Organisation View';
    this.treeViewOptions = {
        dataTextField: 'Description',
        dataSource: new kendo.data.extensions.BreezeDataSource({
            entityManager: self.datacontext.manager,
            endPoint: "TreeObjects"
        })
    };
};
return vm;

});

景色：

<section>
   <h2 class="page-title" data-bind="text: title"></h2>
   <div id="treeView"></div>
</section>

コントローラー (Breeze を使用):

   [HttpGet]
    public String Metadata()
    {
        return _contextProvider.Metadata();
    }

    [HttpGet]
    public IQueryable<TreeNode> TreeObjects()
    {
        var repository = new OrganisationRepository(_contextProvider.Context);
        var username = "AnyUser";
        var treeNodes= repository.GetTreeNodes(username);
        return treeNodes.AsQueryable();
    }

最初の 2 つのコード ブロックを見ると、ツリー内のツリー ノードが展開されるたびにサーバー メソッドが呼び出されます (パラメーターとして id を使用)。しかし、微風の場合、ノードが展開されるたびにクエリをjsコードで作成する必要があります...そして、それを機能させる方法がわかりません。それを解決する方法はありますか？

どんなアドバイスでも大歓迎です！

4

1 に答える 1

1

最後に、breeze を無視して、kendo TreeView js ライブラリのみを使用しました。以下のいくつかのコード：

public JsonResult TreeObjects()
{
    var repository = new OrganisationRepository(MyDataContext);
    var username = "AnyUser";
    var treeNodes= repository.GetTreeNodes(username);
    return Json(treeNodes, JsonRequestBehavior.AllowGet);
}

コントローラは Breeze を使用しないでください

public class OrganizationTreeController :Controller {}

景色：

<section>
  <h2 class="page-title" data-bind="text: title"></h2>
  <div id="treeView"></div>
</section>

ビューモデル:

define(['services/logger'],
 function (logger) {
     var populate = function () {

         logger.log('Organisation Control view loaded', null, 'Organisation', true);
         $('#treeView').kendoTreeView(
             {
                 "dataSource":
                     {
                         "transport":
                             {
                                 "prefix": "",
                                 "read":
                                     {
                                         "url": "http://localhost:51123/OrganizationTree/Operations"
                                     }
                             },
                         "schema":
                             {
                                 model: {
                                     id: "id",
                                     hasChildren: "hasChildren"
                                 },
                                 "errors": "Errors"
                             }
                     },
                 "dataTextField": "Name"
             }
         );                  


     };

それだけです: これで、ホット タオル テンプレート内で Kendo UI TreView を使用できるようになりました :)。お役に立てれば幸いです！

于 2013-05-09T15:35:02.723 に答える