Category Archives: TreeView

TreeView

Getting data of json array

I create an array with javascript that has some ids. I pass them back to my controller like so

$.ajax(
{
url: "/Home/GetChildKeys",
data: { ids: nodeKeys },
dataType: "json",
type: "GET"
}).done(function (result) { });

What I’m not sure on is how I get that data in my c# code to work with it. Here’s my function in my controller

//how do I get the array passed in as an argument
        [HttpGet]
        public JsonResult GetChildKeys(object var)
        {
            //need to figure out how to read id data and then pass back child keys
            return Json("foobar", JsonRequestBehavior.AllowGet);
        }

The param you choose for your ‘data’ option in the ajax-request must match the param of your post-action. 

[HttpGet]
public JsonResult GetChildKeys(someType ids)
{
...

Is nodeKeys a list of objects, or a string?  That will determine the "someType" above

I knew I’d have to get the type, I just wasn’t for sure what type it would be.

nodeKeys is just a javascript string array;

Something like 

var nodeKeys = ["cat_1", "cat_2", "cat_3"];

That’s not json, but anyway, try

string[] ids

or

List<string> ids

Then you could do

[HttpGet]
public JsonResult GetChildKeys(string[] ids)
{
foreach (var id in ids)
{
// process each id here
}

...
}

I was under the impression if I sent the data like this (underlined in bold)

$.ajax(
{
url: "/Home/GetChildKeys",
data: { ids: nodeKeys },
dataType: "json",
type: "GET"
}).done(function (result) { });

that it would convert that to json for me?

The "data" node will be json, but the data you are passing in the "ids" property is just a plain javascript array.

hi,

usually ajax communication more serialized content, while receiving  action method have to serialise as per mention data type, 

client : var array1 = ["A", "B", "C", "D"];
server : public JsonResult AjaxCallTest(List<string> postedModel){ //code…… }

client : var array = [1, 2, 3, 4, 5];
server : public JsonResult AjaxCallTest(List<string> postedModel){ //code….. }

or just pass json string, then in controller action have to parse posted json to respective model object.

Ref : serializing and deserializing json in c#

Thanks,

Jai

So how do I go about passing that array back to my application?

Basically, there’s some code that runs through a treeview and pulls the ids of any checked items and pushes them into the array. So, I need to send that array of ids back to my controller as json data. I don’t really care how they get there, array, list,
etc. but I just need to be able to loop through them. Ideas?

hi,

Client :

var selectedItems = [1, 2, 3, 4, 5]; // try to push your selected item.

$.ajax({
url: "/Account/AjaxCallTest/", //your url
traditional: true,
dataType: "json",
type:’post’,
data: { ids : selectedItems },
success:function(data) { 
},
error: function (errorMsg) {
}
});

Server:

[HttpPost]
public JsonResult AjaxCallTest(List<int> ids )
{
// your logic…
}

Thanks,

Jai.

That’s what I tried after your first post with no luck. This is what I have

var nodeKeys = ["cat_1", "cat_2", "cat_3"];

$.ajax(
{
url: "/Home/GetChildKeys",
data: { ids: nodeKeys },
dataType: "json",
type: "GET"
}).done(function (result) { });

C# 

        //how do I get the array passed in as an argument
        [HttpGet]
        public JsonResult GetChildKeys(List<string> ids)
        {
            //ids is still null
            var foo = ids;

            //need to figure out how to read id data and then pass back child keys
            return Json("foobar", JsonRequestBehavior.AllowGet);
        }

http://forums.asp.net/t/1934215.aspx?Using+jQuery+ajax+to+call+asmx+webservice+methods

either add

contentType:
"application/x-www-form-urlencoded; charset=UTF-8",

to your $.ajax call, or try

data: JSON.stringify({ ids: nodeKeys }),

I’ve tried both of those and ids is still null

nodeKeys = ["cat_1", "cat_2", "cat_3"];
$.ajax(
{
url: "/Home/GetChildKeys",
data: JSON.stringify({ ids: nodeKeys }),
dataType: "json",
type: "GET"
}).done(function (result) { });

and even

nodeString = "cat_1,cat_2,cat_3";
$.ajax(
{
url: "/Home/GetChildKeys",
data: "{keys: ‘" + nodeString + "’}",
dataType: "json",
type: "GET"
}).done(function (result) { });

You have to set the correct contentType too so the service knows how to interpret the data you are sending.  As well as the link I posted with all the examples, look at this to see how you can use the browser’s dev tools to see what is being sent and what
the response is.

http://forums.asp.net/t/1982579.aspx?Using+the+browser+s+dev+tools+to+diagnose+ajax+problems+and+other+things+

Third party theme for MVC 4.0 project

Hi,
 
Please suggest me any third party tool or theme template which is user friendly from the perspective of user as well as developer.
 
Thank you,
 
Regards,
Ashish

Hi Ashish,

Following websites offer free templates for variety of designs. Worth watching through it..

https://wrapbootstrap.com/

http://bootswatch.com/

http://getbootstrap.com/examples/theme/

The above sites were recommended in various events. Hope this helps.

Best Regards

Siva

I mean any third party control like Telerik but better then
Telerik
.

rndondevelopment

I mean any third party control like Telerik but better then
Telerik
.

Do you refer to the suite of controls(grid, dropdown, treeview, chart and many more) such as  Kendo ? 

In that case, by "better" what do you mean? Faster rendering? Easy to use ? Other …?
And , in this case, this can be a holy war … It is not his place here

What you need is https://www.nevron.com/products-open-vision.aspx – not only is it better in tons of aspects, it’s also cross-platform which makes it the best choice after the latest announcement
from Microsoft regarding .NET…

[RESOLVED]What is the purpose of a partial view in MVC 5?

Hello,

What is the purpose of a partial view in MVC 5?

I thought that one of the purposes was to display text/data on a web page that is already displayed.  It would do this without redisplaying the original web page leaving the original page the way it is.  Just display the text/data from the partial view page
at the end of the original page text/data.

I created a new C# Web Application for MVC 5 in Visual Studio Pro to test Partial Views.

I have been trying for days to make a partial view page display as I have explained above.  Yet, all that it does is display the partial page on a new web page.

Am I wrong in my interpretation of the purpose/functionality of a partial view?

I have included all of my code below.

Any help would be gratefully appreciated.

Thanks,
Tony

This my HomeController:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PartialViewTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public PartialViewResult PartialViewTest()
        {
            ViewBag.Message = "Your Partial View page.";

            return PartialView("PVTest");
        }
    }
}

This is my Home.Index page:

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

    @Html.ActionLink("Click Here to do a Partial View Test", "PartialViewTest")

This is my Partial View(PVTest) cshtml page:

<div>
    <h2>
        This is the Partial View Test Page
    </h2>

    What is the purpose of a Partial View in MVC 5?
</div>

 

Hi,

The main function is to reuse the same view other .cshtml. So we do not need to create many of the same code. It’s a reusable purposes, or make a view more simple and manageable.

For example, I make a partial view for treeView, and the one partial view can be used for several different view and on diffrerent controller.

Have fun 

Hello Jannen.

Thanks for your help.

I did understand that as one of the purposes for partial views.

Does that mean a partial view will not do what I am expecting?

Thanks,
Tony

Refer to this:

http://stackoverflow.com/questions/472963/asp-net-mvc-viewresult-vs-partialviewresult

Also, I think what you want to do is just display PVTest as part of your Home Index page? To do this, just change

@Html.ActionLink("Click Here to do a Partial View Test", "PartialViewTest")

to

@Html.Partial("PVTest")

You dont need to have your PartialViewTest() action anymore.

You can certainly use partial views to load the page asynchronously using Ajax and specifying the target like this

 @Ajax.ActionLink("Click Here to do a Partial View Test", "PartialViewTest", new AjaxOptions { UpdateTargetId="partialdiv" })
 <div id="partialdiv"></div>

Just remember to add the unobtrusive ajax nuget package first

Hello Jed.

Thanks for your help.

I tried the @Html.Partial("PVTest") and that did work.  However, it does not give me a link to click.  That is something I need.  I only want to display the partial if the link is clicked.

I will also read your link.

Thanks,
Tony

Hello gunnarrisnes.

Thanks for your help.

This worked for me exactly the way I wanted.

I’m not sure of why the MVC Razor @Html.ActionLink does not work, but as long as this works, I will use it.

Now, I would like to allow the partial view to use the ModelData from the parent view.

Thanks,
Tony

Ajax is in general the tool to use when you want asynchronous loading. @Html.ActionLink is designed to pass in variables to the controller without keeping track of existing pages, and just let the controller decide where to go.

If you are loading the data with the parent view, a better design would maybe be to hide the items within the parent view, however, if you want to pass back an id or any other field to the controller for the partial view you can do that like this

@Ajax.ActionLink("Click Here to do a Partial View Test", "PartialViewTest", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "partialdiv" })

You can also pass back multiple variables separated by a comma { id = Model.Id, name = Model.stringname } The variable name has to be exactly the same as the input name in the controller

TGirgenti

I’m not sure of why the MVC Razor @Html.ActionLink does not work, but as long as this works, I will use it.

Based on one of the comments in the link I gave you, PartialViewResults are also like ViewResults only that it does not have a master page layout. That’s why when you click your link generated by @Html.Actionlink, it goes to a new web page.

[RESOLVED]TreeView expand is not working in windows Azure

Hi,

TreeView in application is working fine in normal web deployment application, the same code I have deployed in Window Azure, now in one of the area have Treeview is not expanding the same code is working fine in normal web deployment application.

can any one please help in this issue?

Thanks

getting any error

Hi,

If Treeview is dependent on DataSource, make sure that Datasource is able to fetch data in Azure.

Hi DivakarGanta,

Thank you post the issue to asp.net forum.

As
raju dasa
 mentioned, TreeView control will bind datasource. We should make sure the datasource is available in the azure

environment.

Besides, you can debug the cloud service in visual studio:

http://msdn.microsoft.com/en-us/library/azure/ee405479.aspx

If you are using the azure website, you can run in debug mode locally in IIS Express or remotely in an Azure Website.

http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-troubleshoot-visual-studio/

Get the reason which caused your issue will help you solve it. Thanks.

Best Regards!

Hi,

Thanks for the reply, I debug the code and data is binding and visible. 

the same code is working fine in normal other deployments, but not in Azure.

-Divakar.

here is my code:

<asp:TreeView ID="tvSkills" style="overflow:auto " EnableViewState="true" Height="300" Width="100%"
Target="_self" SelectedNodeStyle-ForeColor="navy" ExpandImageToolTip="" ExpandDepth="0"
ShowExpandCollapse="true" runat="server" CollapseImageToolTip="" PopulateNodesFromClient="true"
EnableClientScript="true" ShowLines="true" SelectedNodeStyle-Font-Bold="true" ForeColor=black

NodeWrap="true" OnTreeNodePopulate="tvSkills_TreeNodePopulate" >
</asp:TreeView>

C#:

protected void tvSkills_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
e.Node.ChildNodes.Clear();
PopulateChildSkills(Convert.ToInt32(e.Node.Value), e.Node);
}

Kendo ui, MVC Treeview

Hi All,

I would like to create a multi-level treeview using kendo treeviewitemmodel.
When I set the hasChildren = true, the child are not displaying below the parent.

Table structure
—————–
ID   Name   ParentId

1   AAA      null
2   AAA1     1
3   AAA2     2
4   BBB      null
5   CCC      null

Other than treeviewitemmodel, Is there any other way to build the treeview in the controller and bind into the razor page?
Share your experience and suggestions.

Thanks!

Hi mgn_v,

Thanks for your post.

When using the datasource remote binding, you can bind only one level at a time. If you need to bind the complete tree initially, use the

treeview BindTo
or
Items
methods.

Hope this can be helpful.

Best Regards,

Eileen

[RESOLVED]ASP. NET c# and Jquery – value of selected item is gone after maincontent is filled

I have the following problem. When I select an item <li> which references to the ~/About.aspx. Then the value of the selected Item is gone. It is there when I alert the .click function. But it is gone after the document.ready function. Why does it not work
and what do I need to change. I store the value in a hiddenfield. But also this value is being resetted.

Clicking the (about) <li> shows nicely the selected item is 1. But after loading the content into the maincontent the value is gone! What do I need to do. I have searched the entire web but I cannot find a similar problem.

Best regards,
Monty

The code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Monitoring.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server"> 
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder> 
<webopt:BundleReference runat="server" Path="~/Content/css" /> 
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />

</head>
<body>
<form runat="server">
<asp:HiddenField ID="selected_tab" runat="server" />
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework Scripts--%>

<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery"/>
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<asp:ScriptReference path="~/Scripts/jquery-1.8.2.js" />
<%--Site Scripts--%>

</Scripts>
</asp:ScriptManager>

<div id="body">

<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a runat="server" href="~/">your logo here</a>
</p>
</div>
<div class="float-left">
<ul id="menu">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</div>
</div>

<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>

</div>



<script type="text/javascript">
var selected_tab = 1;




$('#menu > li').click(function () {

selected_tab = $(this).index();
$("form").submit(function () {
$("[id$=selected_tab]").val(selected_tab);
});
});

$(document).ready(function () { alert($("[id$=selected_tab]").val()); });

</script>

</form>

</body>
</html>

you are doing a form submit, which replaces the current page with a new one. no javascript variables will survive this. you can use a hidden field, just be sure the server postback code returns it in the response. 

in your case you using an anchor, not a form post, so the hidden field is not included, because there is no postback. just add it to the link :

<ul id="menu">
<li><a runat="server" href="~/?selected_tab=1">Home</a></li>
<li><a runat="server" href="~/About?selected_tab=2">About</a></li>
<li><a runat="server" href="~/Contact?selected_tab=3">Contact</a></li>
</ul>

just be sure to copy the value to the hidden field server side.

[RESOLVED]jQuery jstree

Hi

I’ve got this working beautifully…in my visual studio.

I’m really struggling to show my image…how do the image thing work with the url to upload on this forum?

Anycase, in my iis I don’t see the folder image and all is showing. I want to show the images but I can’t even seem to upload those. Yuck.

Please help.

 

Thanks

Hi sunettew1,

Did you give proper and exact path locations of your image?

Are you getting a frame with the correct tool tip in your rendered image or just a blank?

Hi

Okay, let me try and upload the images:

How do I get the upload working to show what is happening with my jstree?

I tried putting this in the image url: file:///C:/vsjstree.JPG

file:///C:/iisjstree.JPG

Not working…ugg..please help so that I can show my issue I’m having with jstree.

Hi,

Can you share some code and did you try to debug your jquery using F12 button and breakpoints?

I can. It works perfectly in visual studio. Get the same tree in iis but without the nice graphics. Meaning there is no folder icon to click to expand the nodes. Its all open. Thats why I want to upload the pics to show the difference. The formatting is
missing in iis but all the tree structure is there. Just all expanded looking linke hyperlinks.

My Index view:

<td id="TreeView">
               <%=Html.Action("ObjectTree", "tbObject", null)%>
 </td>

My ObjectTree:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<HCCWebTemplate.Models.tbObjectTree>>" %>

    <link href="../../Scripts/jstree/themes/default/style.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jstree/libs/jquery.js" type="text/javascript"></script>
    <script src="../../Scripts/jstree/jstree.js" type="text/javascript"></script>


    <div id="divtree">
  
        <%foreach (var item in Model) %>
<%{ %>
  <ul id="tree">
    <%  if (item != null) %>
    <%   { %>
    <li><a href="#" class="usr">
        <%: item.ObjectName %> 
        <label style="display:none"><%: item.ObjectGuid %></label>
         </a> 
        <% if (item.tbObjectTrees.Count > 0)%>
        <%{ %>
            <%=Html.Action("ObjectTreeChildren", "tbObject", new {myObjectList = item })%>
        <%} %>
    </li>
    <%} %>
</ul>
<%} %>

    
    </div>
    <script type="text/javascript">
        $(function () {
            $("#divtree").jstree();
        });
    </script>

My ObjectTreeChildren:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<HCCWebTemplate.Models.tbObjectTree>" %>

    <%foreach (var item in Model.tbObjectTrees) %>
<%{ %>
<ul>
    <%  if (item != null) %>
    <%   { %>
    <li ><a href="#" class="usr">
        <%: item.ObjectName%>
        <label style="display:none"><%: item.ObjectGuid %></label>
        </a>
        <% if (item.tbObjectTrees.Count > 0)%>
        <%{ %>
            <%=Html.Action("ObjectTreeChildren", "tbObject", new { myObjectList = item })%>
        <%} %>
    </li>
    <%} %>
</ul>
<%} %>

My code in my controller:

  /// <summary>
        /// The object tree selection
        /// </summary>
        /// <returns>Returns the object tree for all objects for selection</returns>
        public ActionResult ObjectTree()
        {
            List<tbObjectTree> objectList = new List<tbObjectTree>();
            List<tbObjectTree> myObjectList = new List<tbObjectTree>();

            objectList = ObjectRepository.GetObjectTree();

            //get distinct list to see how many parent root i.e. projects there are
            var getdistinctProject = objectList.Where(x => x.ParentGuid == null).Distinct();

            var project = objectList.Where(x => x.ParentGuid == null).FirstOrDefault();

            if (getdistinctProject.Count() > 1)
            {
                foreach (var item in getdistinctProject)
                {
                    project = objectList.Where(x => x.ObjectGuid == item.ObjectGuid).SingleOrDefault();
                    SetChildren(project, objectList);
                    myObjectList.Add(project);
                }
            }
            else
            {
                 project = objectList.Where(x => x.ParentGuid == null).SingleOrDefault();
                 SetChildren(project, objectList);
                 myObjectList.Add(project);
            }



            return View(myObjectList);
        }

        /// <summary>
        /// The object tree selection
        /// </summary>
        /// <returns>Returns the object tree for all objects for selection</returns>
        [HttpPost]
        public ActionResult ObjectTree(FormCollection frmValues)
        {
            return View(frmValues);
        }

        /// <summary>
        /// Get the children for the object model
        /// </summary>
        /// <returns>Returns the childrens view for the projects</returns>
        public ActionResult ObjectTreeChildren(tbObjectTree myObjectList)
        {
                return View(myObjectList);
        }

        /// <summary>
        /// Set the children nodes for the tree view
        /// </summary>
        /// <param name="model">Type tbObjectTree</param>
        /// <param name="objectList">the Objectlist of the selected object tree</param>
        private void SetChildren(tbObjectTree model, List<tbObjectTree> objectList)
        {
            var childs = objectList.Where(x => x.ParentGuid == model.ObjectGuid).ToList();

            if (childs.Count > 0)
            {
                foreach (var child in childs)
                {
                    SetChildren(child, objectList);
                    model.tbObjectTrees.Add(child);
                }
            }
        }

Still not getting the images inserted here – the image insert / edit doesn’t work!!! Unless there is a trick to the whole url thing that I don’t know about…

 

 

Hi sunettew1,

Thank you post the issue to our forum.

Based on your description, I see you want to use the jquery plugin "jstree". And the icon of tree nodes not show proper.

For this issue, I think you should make sure the icons exist in your application folder, then the nodes image tag can refer to it

correctly. Check your "jstree" folder or download the complete plugin files again.

Best Regards,

Fuxiang

jQuery jsTree plugin does not display tree

 Hi everybody,

I am new to Javascript and jQuery.  Trying to learn.  So, forgive me if this appears to be a silly mistake.

I have a jsTree component on one of my aspx page. The tree gets its data via an ajax call to a WebService Method.  I can see in the debugger that my WebService method does get called and it returns the data as expected.  But the tree doesn’t display at all.
What am I doing wrong?  I have pasted the relevant parts of the files here.  The server side is in C# code.

Parts from my aspx file:

  <link href="tree_component.css" rel="stylesheet" type="text/css" />
  <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
  <script src="Scripts/tree_component.js" type="text/javascript"></script>
  <script src="Scripts/css.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready(function()
    {
      $("#jsTree").tree({
        data: {
          type: "json",
          method: "POST",
          async_data: function(NODE) { return { parentId : jQuery(NODE).attr("parentId") || 0 } },
          url: "JSTreeService.asmx/GetJSCategories",
          async: true
        }
      });
    });
  </script>

<body>
    <form id="form1" runat="server">
    <div id="jsTree">
    </div>
    </form>
</body>

My WebService Method "JSTreeService.asmx/GetJSCategories":

  [WebMethod]
  [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  public List<JSTreeNode> GetJSCategories(int parentId)
  {
    TaxonomiesDataContext catDC = new TaxonomiesDataContext();
    IEnumerable<Category> cats;
    List<JSTreeNode> nodes = new List<JSTreeNode>();
    if (parentId == 0)
      cats = catDC.Categories.AsEnumerable()
            .Where(t => (t.PKId == t.ParentId) && (t.PKId > 0));
    else
      cats = catDC.Categories.AsEnumerable()
            .Where(t => (parentId == t.ParentId) && (t.PKId != t.ParentId));
    foreach (Category eCat in cats)
    {
      JSTreeNode node = new JSTreeNode();
      node.attributes = new Attributes();
      node.attributes.id = "Cat" + eCat.PKId.ToString();
      node.attributes.parentId = parentId.ToString();
      node.hasChildren = eCat.Categories.Count() > 1;
      node.attributes.rel = node.hasChildren ? "folder" : "";
      node.data = new Data();
      node.data.title = eCat.Name;
      node.state = "open";
      node.attributes.mdata = "{draggable : true}";
      nodes.Add(node);
    }
    return nodes;
  }

And the relevant classes that make up the "JSTreeNode":

  [Serializable]
  public class Attributes
  {
    string _id;
    public string id
    { get { return _id; } set { _id = value; } }

    string _parentId;
    public string parentId
    { get { return _parentId; } set { _parentId = value; } }

    string _rel;
    public string rel { get { return _rel; } set { _rel = value; } }

    string _mdata;
    public string mdata { get { return _mdata; } set { _mdata = value; } }
  }

  [Serializable]
  public class Data
  {
    string _title;
    public string title { get { return _title; } set { _title = value; } }

    string _icon;
    public string icon { get { return _icon; } set { _icon = value; } }
  }

  [Serializable]
  public class JSTreeNode
  {
    public JSTreeNode()
    {
    }
    Attributes _attributes;
    public Attributes attributes {get{return _attributes;}set{_attributes = value;}}

    Data _data;
    public Data data { get { return _data; } set { _data = value; } }

    string _state;
    public string state { get { return _state; } set { _state = value; } }

    bool _hasChildren = false;
    public bool hasChildren { get { return _hasChildren; } set { _hasChildren = value; } }

    List<JSTreeNode> _children;
    public List<JSTreeNode> children { get { return _children; } set { _children = value; } }
  }

I know this is an old thread but in case this helps anyone there is a good example of how to do this at

http://code.zyky.com/jsTreeView/Default.aspx
and

http://asp-net-elephant.blogspot.com/2012/01/how-to-use-jstree-in-aspnet-web-forms.html 

[RESOLVED]css for treeview

Hi,,

Please provide some attractive css for TreeView control,,use like menu,,

pls help

shahas_sss

Please provide some attractive css for TreeView control,,use like menu,,

These forums are not for asking for complete code (or homework solutions) etc…

Please do the steps needed based on your requirement above, and if you then find yourself stuck or do not understand a concept, then post to the forums with a specific question about that specific concept.  We can explain to you various code concepts and
help you to understand how to do something, but ultimately you need to be writing that code.

shahas_sss

Please provide some attractive css for TreeView control,,use like menu,,

Hello,

If you are creative, you can comeup with your own ideas and you can build them while learning CSS. If not, hire someone.