asp.net-mvc - ASP.NET MVC を使用したダイナツリー

Question

Dynatree プラグインを MVC で使用した例はありますか? 私はあまり進歩せずにそれに取り組んできました。JsonResult を返すアクションメソッドがあり (ただし、基になるテーブルのすべての列を選択しますが、これが問題かどうかはわかりません)、 initajax call で、このメソッドを呼び出すだけです。

面倒でなければ、View と Controller のアクションメソッドのサンプルを探しています。

助けてくれてありがとう

score 6 · Accepted Answer

ノードをシリアル化するには、オブジェクトを作成する必要があります。

public interface ITreeItem
{
}


    /// <summary>
    /// Tree Item Leaf.
    /// </summary>
    public class TreeItemLeaf :ITreeItem
    {
        /// <summary>
        /// Gets the Title.
        /// </summary>
        public string title;

        /// <summary>
        /// Gets the Tooltip.
        /// </summary>
        public string tooltip;

        /// <summary>
        /// Gets the key.
        /// </summary>
        public string key;

        /// <summary>
        /// Gets the Data.
        /// </summary>
        public string addClass;

        /// <summary>
        /// Gets the Children.
        /// </summary>
        public IList<ITreeItem> children;

        /// <summary>
        /// Gets the rel attr.
        /// </summary>
        public string rel;

        /// <summary>
        /// Gets the State.
        /// </summary>
        public bool isFolder;

        /// <summary>
        /// Gets the State.
        /// </summary>
        public bool isLazy;

        /// <summary>
        /// Initializes a new instance of the <see cref="TreeItemLeaf"/> class.
        /// </summary>
        public TreeItemLeaf()
        {
            children = new List<ITreeItem>();
        }
    /// <summary>
    /// Initializes a new instance of the <see cref="TreeItemLeaf"/> class.
    /// </summary>
    /// <param name="type">The type of node.</param>
    /// <param name="id">The Id of the node.</param>
    /// <param name="title">The Title of the node.</param>
    /// <param name="tooltip">The Tooltip of the node.</param>
    public TreeItemLeaf(String type, Guid id, String title, String tooltip)
    {
        key = id.ToString();
        this.title = title;
        isFolder = false;
        isLazy = false;
        this.tooltip = tooltip;
        children = new List<ITreeItem>();
}

}


   /// <summary>
    /// Tree Item.
    /// </summary>
    public class TreeItem : TreeItemLeaf
    {
        /// <summary>
        /// Gets the State.
        /// </summary>
        public new bool isFolder;

        /// <summary>
        /// Initializes a new instance of the <see cref="TreeItem"/> class.
        /// </summary>
        public TreeItem() : base()
        {
        }

        /// <summary>
        /// Initializes a new instance of the <see cref="TreeItem"/> class.
        /// </summary>
        /// <param name="type">The type of node.</param>
        /// <param name="id">The Id of the node.</param>
        /// <param name="title">The Title of the node.</param>
        /// <param name="tooltip">The tooltip of the node.</param>
        public TreeItem(String type, Guid id, String title, String tooltip) : base(type, id, title, tooltip)
        {
            isFolder = true;
            isLazy = true;
        }

    }

Json(IList<ITreeItem>)これを取得したら、結果から構築する必要があるを返すことができます。

Dynatee のデモhttp://wwwendt.de/tech/dynatree/doc/samples.htmlにアクセスすると、Firefox/Firebug を使用して HTTP リクエストを調査し、何が渡されて何が返されるかを正確に確認できます。

ビュー内の私のツリーは次のとおりです。

        // --- Initialize first Dynatree -------------------------------------------
        $("#tree").dynatree({
            fx: { height: "toggle", duration: 500 },
            selectMode: 1,
            clickFolderMode: 1,
            children : @Html.Raw(String.Format("{0}", ViewData["tree"]).Replace("\"children\":[],", "")),
            onLazyRead: function (node) {
                node.appendAjax({ 
                    url: "@Url.Action("treedata", "tree")",
                    type: "GET",
                    data: { "id": node.data.key, // Optional url arguments
                        "mode": "all"
                    },
                     error: function(node, XMLHttpRequest, textStatus, errorThrown) {

                               }
                     }
                });
            }, //.... cut short for brevity

「children:」の部分にツリーの初期状態を埋め込んでいます。そして「onLazyRead:」の部分にAjaxの読み込みが設定されています。

私のAjax呼び出しは次のとおりです。

    public JsonResult TreeData(FormCollection form)
    {
        return GetTreeData(Request.QueryString["id"], Request.QueryString["uitype"]);
    }

GetTreeData() 関数は Json(ITreeItem) を返します。

Firefox/Firebug とその「NET」機能を使用して、何が起きて何が戻ってくるかを確認することをお勧めします。

それが役立つことを願っています。

score 2 · Accepted Answer

Dynatree を見つけたばかりで、MVC プロジェクトで使用しています。これが私がそれをした方法の例です。基本的な例のように、データをビューに直接配置することにしました。

私のデータは、郡ごとにグループ化されたカリフォルニア州内の都市のリストです。

コントローラーはビューモデルをビューに渡すだけで、ビューモデルには CitiesAvailable プロパティがあります。

public IEnumerable<City> CitiesAvailable { get; set; }

City オブジェクトのリストはデータベース (EF4) から取得され、実際の City オブジェクトは次のとおりです。

CityObject

私のビューでは、郡とその都市のリストを含むulを作成します（私はRazorを使用していますが、Webフォームは簡単に理解できるはずです）：

<div id="tree">
    <ul id="treedata" style="display: none;">
        @foreach (var county in Model.CitiesAvailable.Select(c => c.County).Distinct().OrderBy(c => c))
        {
            <li data="icon: 'false'">@county
                <ul>
                    @foreach (var city in Model.CitiesAvailable.Where(c => c.County == county).OrderBy(c => c.Name))
                    {
                        <li data="icon: 'false'" id="@city.Id">@city.Name</li>
                    }
                </ul>
            </li>
        }
    </ul>
</div>

次に、JavaScript で次のコードを使用します。

$("#tree").dynatree({
    checkbox: true,
    selectMode: 3,
    fx: { height: "toggle", duration: 200 }
});

それはうまくいきます！いくつかの項目をチェックした出力のサンプルを次に示します。

Dynatree の結果のスクリーンショット

何か意味がない場合はお知らせください。

アイコンが必要ないため、li 要素で data="icon: 'false'" を使用することに注意してください。

score 1 · Accepted Answer

オブジェクトをjson文字列に変換し、テキストとしてサーバーに送信するだけです

これはjsコードです：

 var dict = $("#tree").dynatree("getTree").toDict();
 var postData = JSON.stringify(dict["children"]);
 $.ajax({ type: "POST",
                    url: "/UpdateServer/SaveUserTree",
                    data: {tree:postData},
                    dataType: "html"
                });

そして、これはコントローラーコードです：

 [HttpPost]
    public void SaveUserTree(string tree = "")
    {

        HttpContext.Application["UserTree"] = tree;

    }

この文字列データをクライアントに送り返すことができます

   if (HttpContext.Application["UserTree"] != null)
            ViewBag.TreeData = new     HtmlString(HttpContext.Application["UserTree"].ToString());

そして最後に、このデータを使用してビューでツリーを初期化できます。

 var treeData= @(ViewBag.TreeData)

$(function(){

    // --- Initialize sample trees
    $("#tree").dynatree({
        children: treeData
    });

});

asp.net-mvc - ASP.NET MVC を使用したダイナツリー

3 に答える 3

Related

Reference