Dynatree с ASP.NET MVC

Question

Кто-нибудь есть примеры использования плагина Dynatree с MVC?Я боролся с этим без особого прогресса.У меня есть метод действия, который возвращает JsonResult (но выбирает все столбцы в базовой таблице, не уверен, что это проблема), и в моем вызове initajax все, что я делаю, - это вызов этого метода.

Если проблем не так много, я ищу примеры методов действий View и Controller.

Заранее спасибо за любую помощь

Answer 1

Вам необходимо создать объект для сериализации узлов, например.

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:". И чтение Ajax настраивается в части «onLazyRead:».

Мой Ajax-вызов:

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

Функция GetTreeData () возвращает Json (ITreeItem);

Я бы порекомендовал вам использовать Firefox / Firebug и его функцию "NET", чтобы увидеть, что происходит и возвращается.

Надеюсь, это поможет.

Answer 2

Я только что нашел Dynatree и использую его в своем проекте MVC. Вот пример того, как я это сделал. Я решил просто поместить данные непосредственно в представление, как базовый пример .

Мои данные - это список городов в Калифорнии, сгруппированных по округам.

Мой контроллер просто передает модель представления моему представлению, и модель представления имеет свойство CitiesAvailable:

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

Мой список объектов City извлекается из базы данных (EF4), а фактический объект City выглядит следующим образом:

В моем View я создаю ul, содержащий список округов и их городов (я использую Razor, но веб-формы должны быть достаточно простыми для понимания):

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

Отлично работает! Вот пример выходных данных с несколькими проверенными элементами:

Дайте мне знать, если что-то не имеет смысла.

Обратите внимание, я использую data = "icon: 'false'" в своих элементах li, потому что мне не нужны значки.

Answer 3

Вы можете просто преобразовать объект в строку 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
    });

});