Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

How to Use Free ASP.NET MVC Tree Helper

0.00/5 (No votes)
16 Nov 2015 2  
I'm going to show how to get, install and start using the free ASP .NET MVC helper.

Introduction

SharkTree is an HTML helper extension simple for an integration. As an input parameter, helper accepts a heap of data in a well known structure (class Node - ID, Text, ParentId). Helper is responsible for sorting and producing a tree structure on HTML page. Every node can be expanded by clicking on the plus sign. If you click on the text, client side function is triggered. By typing in a text field (min 3 characters), server side function (AJAX) is called. Server side method returns JSON array. After selecting item in drop down list - automatic scrolling to the item is triggered. Alternatively, SharkTree can be configured to serialize all data on a page - therefore, you don't need to implement server side method.

Background

For ASP.NET MVC, I didn't find any HTML helper to build tree view with some advanced options even you need to pay for it. So, I decided to build free ASP.NET MVC HTML helper, with autocomplete and other useful features.

Using the Code

First of all, you have to install plugin via Nuget package manager https://www.nuget.org/packages/SharkTree/.

All required code can be demonstrated as below:

@using SharkDev.MVC
@using SharkDev.Web.Controls.TreeView.Model
@{
    ViewBag.Title = "SharkTree - Home Page";
}

<link href="~/Content/SharkDev.TreeView.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/SharkDev.treeView.js"></script>

@Html.SharkDev().TreeView(settings =>   {
    settings.Id = "treeViewContainer";
    settings.Header.Text = "Tree root - Animal";
    settings.Header.Visible = true;
    settings.Header.Expanded = true;
    settings.ClientHandlers.ContentSelect = "function (e) { console.log(e); }";
    settings.AutoCompleteHandler = Url.Content("~/Home/GetBySample");
    settings.Height = 300;
    settings.Width = 270;
    settings.DataOnClient = true;
}).GetContent(ViewBag.HeaderTree)

Tree view in browser looks like in the image below:

To see more details, please visit the project site link - http://sharktree.azurewebsites.net/.

Points of Interest

I just want to help someone who really needs it.

History

  • Nov 2015: Initial version

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here