C# – Lazy-loading TreeView with JsTree in Asp.Net MVC

asp.net-mvccdynamicjstree

I am using JsTree on my project. I want to do like that:

I want to show just root nodes when tree loaded first time after I want to show sub-nodes when I clicked root node (+) or of sub-node. I mean, I want to get from database and add to the sub-nodes when I clicked every node.

How can I do that in Asp.Net MVC? I looked almost every JsTree Ajax sample. But I couldn't do that. What should I return from action? How should I do my action Please help!

JsTree: https://www.jstree.com/

Samples:

Best Answer

Finally, I found the problem!

I created a Model:

public class JsTreeModel
{
    public string id { get; set; }
    public string parent { get; set; } 
    public string text { get; set; }
    public bool children { get; set; } // if node has sub-nodes set true or not set false
}

I created a controller like following:

public class TreeviewController : Controller
{
    public JsonResult GetRoot()
    {
        List<JsTreeModel> items = GetTree();

        return new JsonResult { Data = items, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    public JsonResult GetChildren(string id)
    {
        List<JsTreeModel> items = GetTree(id);

        return new JsonResult { Data = items, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    static List<JsTreeModel> GetTree()
    {
        var items = new List<JsTreeModel>();

        // set items in here

        return items;
    }

    static List<JsTreeModel> GetTree(string id)
    {
        var items = new List<JsTreeModel>();

        // set items in here

        return items;
    }

}

Html:

<div id='treeview'></div>

Script:

$('#treeview').jstree({
    "plugins": ["search", "wholerow"],
    'core': {
        'data': {
            'url': function (node) {
                return node.id === '#' ? "/Treeview/GetRoot" : "/Treeview/GetChildren/" + node.id;

            },
            'data': function (node) {
                return { 'id': node.id };
            }
        }
    }
});

$('#treeview').on('changed.jstree', function (e, data) {
    console.log("=> selected node: " + data.node.id);
});

For MVC v5.1 use Html.EnumDropDownListFor

@Html.EnumDropDownListFor(
    x => x.YourEnumField,
    "Select My Type", 
    new { @class = "form-control" })

For MVC v5 use EnumHelper

@Html.DropDownList("MyType", 
   EnumHelper.GetSelectList(typeof(MyType)) , 
   "Select My Type", 
   new { @class = "form-control" })

For MVC 5 and lower

I rolled Rune's answer into an extension method:

namespace MyApp.Common
{
    public static class MyExtensions{
        public static SelectList ToSelectList<TEnum>(this TEnum enumObj)
            where TEnum : struct, IComparable, IFormattable, IConvertible
        {
            var values = from TEnum e in Enum.GetValues(typeof(TEnum))
                select new { Id = e, Name = e.ToString() };
            return new SelectList(values, "Id", "Name", enumObj);
        }
    }
}

This allows you to write:

ViewData["taskStatus"] = task.Status.ToSelectList();

by using MyApp.Common

C# – How to handle multiple submit buttons in ASP.NET MVC Framework

Here is a mostly clean attribute-based solution to the multiple submit button issue based heavily on the post and comments from Maarten Balliauw.

[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public class MultipleButtonAttribute : ActionNameSelectorAttribute
{
    public string Name { get; set; }
    public string Argument { get; set; }

    public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
    {
        var isValidName = false;
        var keyValue = string.Format("{0}:{1}", Name, Argument);
        var value = controllerContext.Controller.ValueProvider.GetValue(keyValue);

        if (value != null)
        {
            controllerContext.Controller.ControllerContext.RouteData.Values[Name] = Argument;
            isValidName = true;
        }

        return isValidName;
    }
}

razor:

<form action="" method="post">
 <input type="submit" value="Save" name="action:Save" />
 <input type="submit" value="Cancel" name="action:Cancel" />
</form>

and controller:

[HttpPost]
[MultipleButton(Name = "action", Argument = "Save")]
public ActionResult Save(MessageModel mm) { ... }

[HttpPost]
[MultipleButton(Name = "action", Argument = "Cancel")]
public ActionResult Cancel(MessageModel mm) { ... }

Update: Razor pages looks to provide the same functionality out of the box. For new development, it may be preferable.

Best Answer

Related Solutions

C# – How to create a dropdownlist from an enum in ASP.NET MVC

For MVC v5.1 use Html.EnumDropDownListFor

For MVC v5 use EnumHelper

For MVC 5 and lower

C# – How to handle multiple submit buttons in ASP.NET MVC Framework

Related Topic