Create link in deepest node with jsTree to controller?

Question

Iam using http://www.jstree.com/ in asp.net mvc.

I want a tree structure where the user can click on the deepest node and navigate on my site. The tree structure works but I can't create any links (url) in them.

I have this code in a view

<script>
    var j = jQuery.noConflict();
    j(function () {
        j("#jstree_demo_div").jstree({
            "plugins": ["search"]
        });

        var to = false;
        j('#plugins4_q').keyup(function () {
            if (to) { clearTimeout(to); }
            to = setTimeout(function () {
                var v = j('#plugins4_q').val();
                j('#jstree_demo_div').jstree(true).search(v);
            }, 250);
        });

    });
</script>

<div id="jstree_demo_div">
    <ul id="tree">
        <li>
            @if (Model != null) { 
            <a href="#">@Model.CategoryName</a>
            @Html.Partial("_CategoryChildren", Model)
            }
        </li>
    </ul>
</div>

and partial view CategoryChildren

@foreach (var item in Model.Children)
{
    <ul>
        @if (item != null)
        {
            <li id="@item.CategoryID">

                <a href="#" class="cat">@item.CategoryName</a>
                @if (item.Children.Count > 0)
                {
                    @Html.Partial("_CategoryChildren", item)
                }
            </li>
        }
    </ul>
}

I have tried to edit the a href="#" in partal view to eg www.google.com but nothing happens when I click on the node.

My final goal is that when a user clicks in the deepest node, I want to send the @Model.ParentCategoryID to a controller and filter out all values with that @Model.ParentCategoryIDto a view.

Answer 1

jstree select_node prevent to nevigate. try this

partial view CategoryChildren

@foreach (var item in Model.Children)
{
    <ul>
        @if (item != null)
        {
            <li id="@item.CategoryID">

                <a href="@Url.Action("Details", "Category", new { id=item.CategoryID })" class="cat">@item.CategoryName</a>
                @if (item.Children.Count > 0)
                {
                    @Html.Partial("_CategoryChildren", item)
                }
            </li>
        }
    </ul>
}

into script

    $('body').on('click','a',function(){
window.location=$(this).attr('href');
});

or

    $('#tree').on('click','a',function(){
window.location=$(this).attr('href');
});

Answer 2

Use the select_node.jstree handler:

j("#jstree_demo_div").on('select_node.jstree', function (e, data) {
    console.log(data.node.a_attr.href); // do whatever you need with this value
});