Доступ к серверным данным ASP.NET MVC при выборе элемента в jsTree - PullRequest
Новая
       23

Доступ к серверным данным ASP.NET MVC при выборе элемента в jsTree

2 голосов
/ 11 февраля 2011

Я использую jsTree для отображения древовидной структуры иерархических данных в моем приложении ASP.NET MVC. Пока я могу получить доступ к данным (через метод контроллера, который возвращает данные JSON) и отобразить дерево. Я также могу выбрать узлы в дереве, и это работает правильно. Вот код jsTree для этого: 

$('#tree').
    bind('select_node.jstree', function(event, data) {
        alert("Node is selected.");
    }).
    jstree({
        "core": {},
        "json_data": {
            "ajax": {
                type: 'POST',
                url: '/Scenario/TreeData',
                data: "id=" +  <%= Model.Scenario.ScenarioID %>,
                success: function(data, textStatus, xhr) {
                    if(data.failed) {
                        window.location.href = data.redirectToUrl;
                    }
                }
            }
        },
        "themes": {
            "theme": "default",
            "dots": true,
            "icons": true
        },
        "ui": {
            "select_limit": 1
        },
        "plugins": ["themes", "ui", "json_data"]
    });

Вот мое действие TreeData: 

[HttpPost]
public ActionResult TreeData(int id)
{
    var tree = new JsTreeModel();

    Scenario scenario = repository.GetScenario(id);
    if (scenario != null)
    {
        tree.data = new JsTreeData();

        // [snip] Do the work to build the tree. [/snip]

        return Json(tree);
    }

    var jsonData = new
    {
        failed = true,
        redirectToUrl = Url.Action("NotFound")
    };
    return Json(jsonData);
}

Когда я застреваю, когда я нажимаю на узел, я не уверен, как извлечь данные для этого конкретного узла из моего приложения (через контроллер), отобразить их (предположительно в частичном представлении - все который я создал в это время - строго типизированные частичные представления), а затем предлагаем возможность отправить это частичное представление обратно на сервер для обновления данных.

Я не совсем уверен, с чего начать. У меня была мысль расширить класс TreeModel (модель C #, которая облегчает построение данных JSON для дерева), чтобы получить больше параметров в значении «data», что может позволить мне узнать, какую модель я пытаюсь получить. Однако это не выглядит так элегантно.

Я что-то упускаю из виду? У кого-нибудь есть другие предложения? Спасибо!

1 Ответ

3 голосов
/ 14 февраля 2011

В итоге я понял это и хотел поделиться, если кто-то еще захочет сделать то же самое.

Сначала я связал событие select_node.jstree с моим деревом, а затем построил дерево (все сделано клиентомсо стороны, конечно). 

$('#tree').
bind('select_node.jstree', function(event, data) {
    var id = 1; // TODO - Get the ID from the current model.
    var url = data.rslt.obj.children("a:eq(0)").attr("href");
    $.ajax({
        type: 'POST',
        url: '/Scenario/' + url,
        data: 'id=' + id,
        success: function(data) {
            $('#ajaxcontent').html(data);
        }
    });
}).jstree({
    "core": {},
    "json_data": {
        "ajax": {
            type: 'POST',
            url: '/Scenario/TreeData',
            data: "id=" + <%= Model.Scenario.ScenarioID % > ,
            success: function(data, textStatus, xhr) {
                if (data.failed) {
                    window.location.href = data.redirectToUrl;
                }
            }
        }
    },
    "ui": {
        "select_limit": 1
    },
    "plugins": ["themes", "ui", "json_data"]
});

Обратите внимание, что я получаю значение URL из узла.Мне пришлось изменить JsTreeModel, чтобы я мог изменить значение href на узле.(Представление данных JSON - data.attr.href) Я устанавливаю это значение при построении сценария.Каждый узел имеет свой собственный URL.(Я передаю параметр ID, чтобы получить правильный серверный сценарий. Это может быть или не быть необходимым в зависимости от ваших потребностей.)

Затем я создаю действие для каждого URL-адреса в моем контроллере.,Я делаю то, что мне нужно, с данными, а затем возвращаю их обратно на страницу (с помощью вызова AJAX, показанного ранее).Это на самом деле довольно простое решение, теперь, когда я знаю, что делаю.Но из-за небольшой нехватки документации сначала было немного сложно разобраться.

Надеюсь, это может помочь кому-то еще!

...