MVC TreeView and view model

[celfyn]

Hello,
I am trying to create a TreeView with checkbox support within ASP.NET MVC2. I have successfully created the Tree, and as can be seen from below (code simplified for posting here), each item has a checkbox.

TreeController

        [HttpGet]
        public ActionResult Index()
        {
            var viewModel = new TreeViewModel
            {
                rhestrNode = TreeHelper.CreateTree()
            };

            return View(viewModel);
        }
        [HttpPost]
        public ActionResult Index(TreeViewModel viewModel)
        {
            if (ModelState.IsValid)
            {
                return View(viewModel);
            }
            else
            {
                return View();
            }
        }

TreeHelper.cs

        public static List<TreeViewItem> CreateTree()
        {
            List<TreeViewItem> treeList = new List<TreeViewItem>();

            TreeViewItem tvn1 = new TreeViewItem();
            tvn1.Checked = false;
            tvn1.Value = "Item One";
            tvn1.ID = 1;
            tvn1.Nodes = new List<TreeViewItem>();

            TreeViewItem tvn2 = new TreeViewItem();
            tvn2.Checked = true;
            tvn2.Value = "Item Two";
            tvn2.ID = 2;
            tvn2.Nodes = null;

            tvn1.Nodes.Add(tvn2);

            treeList.Add(tvn1);

            return treeList;

        }

TreeViewItem.cs (Model)

    public class TreeViewItem
    {
        public int ID { get; set; }
        public string Value { get; set; }
        public bool Checked { get; set; }
        public IList<TreeViewItem> Nodes { get; set; }
    }

Index.aspx

Inherits="System.Web.Mvc.ViewPage<Prawf.ViewModels.TreeViewModel>"
    <% Html.RenderPartial("TreePartial", Model); %>
    <input type="submit" value="add" />

TreePartial.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Prawf.ViewModels.TreeViewModel>" %>
<%@ Import Namespace="Prawf.Models" %>
<ul>
<%
    for (int i = 0; i < Model.rhestrNode.Count; i++)
    {
        Response.Write("<li>");
        Response.Write(Html.CheckBoxFor(model => model.rhestrNode[i].Checked));
        Response.Write(Html.DisplayTextFor(model => model.rhestrNode[i].Value));

        if (Model.rhestrNode[i].Nodes != null && Model.rhestrNode[i].Nodes.Count > 0)
        {
            this.Model.nodeList = Model.rhestrNode[i].Nodes.ToList();

            Html.RenderPartial("TreePartial", this.Model);
        }
        Response.Write("</li>");
    }    
     %>
</ul>

TreeViewModel.cs

    public class TreeViewModel
    {
        public List<TreeViewItem> nodeList { get; set; }
    }

The problem I am having is with the HttpPost back to the Controller. For some reason (I think it's the way I use recursive partial views to create the tree, but not sure), the view model on the HttpPost back doesn't contain all the items in the TreeView. It only contains the first element (Item One). Any suggestions are appreciated.
Thanks!

 

[celfyn]

Sorry, forgot to translate a few things...

Tree Controller

[HttpGet]
        public ActionResult Index()
        {
            var viewModel = new TreeViewModel
            {
                nodeList = TreeHelper.CreateTree()
            };

            return View(viewModel);
        }
        [HttpPost]
        public ActionResult Index(TreeViewModel viewModel)
        {
            if (ModelState.IsValid)
            {
                return View(viewModel);
            }
            else
            {
                return View();
            }
        }

TreePartial.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Prawf.ViewModels.TreeViewModel>" %>
<%@ Import Namespace="Prawf.Models" %>
<ul>
<%
    for (int i = 0; i < Model.nodeList.Count; i++)
    {
        Response.Write("<li>");
        Response.Write(Html.CheckBoxFor(model => model.nodeList[i].Checked));
        Response.Write(Html.DisplayTextFor(model => model.nodeList[i].Value));

        if (Model.nodeList[i].Nodes != null && Model.nodeList[i].Nodes.Count > 0)
        {
            this.Model.nodeList = Model.nodeList[i].Nodes.ToList();

            Html.RenderPartial("TreePartial", this.Model);
        }
        Response.Write("</li>");
    }    
     %>
</ul>

 

[jmeckley]

public class TreeViewModel
{
   public TreeViewModel()
   {
      //ensure node list is never null
      nodeList = new List<TreeViewItem>();
   }

   public List<TreeViewItem> nodeList { get; set; }
}

Inherits="System.Web.Mvc.ViewPage<Prawf.ViewModels.TreeViewModel>"
<% Html.RenderPartial("TreePartial", Model.nodeList); %>
<input type="submit" value="add" />

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<TreeViewItem>>" %>
<%@ Import Namespace="Prawf.Models" %>
<%if(Model.Count >0){%>
<ul>
<% foreach (var node in Model) { %>
   <li>
      <% Html.CheckBoxFor(model => node.Checked)%>
      <% Html.DisplayTextFor(model => node.Value)%>
      <% Html.RenderPartial("TreePartial", node.nodeList)%>
   </li>
<% }%>
</ul>
<% }%>

should do the trick

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[celfyn]

Thanks for your reply.

I have changed the code as you kindly provided, but unfortunately the viewModel from the HttpPost still doesn't contain the List of TreeViewItems. Have you got any other suggestion, or do you want me to provide more code?

Thanks.

 

[jmeckley]

the concept works, the syntax or binding may be incorrect though. basically you need to create a recursive partial.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[celfyn]

Yeah, the tree displays correctly, but the nodeList in the HttpPost is null. Any idea how I can overcome this? Thanks for your time!

 

[jmeckley]

[tt]TreeHelper.CreateTree();[/tt] Do not set nodes = null. set nodes = new List<TreeViewItem>();

Jason Meckley
Programmer

faq855-7190
faq732-7259