Tree list on ASP.NET MVC 4

Good day! On Habré there is an article that tells how to make a tree list. However, in this version the Razor engine, Entity Framework, etc. will be used, as well as list operations are implemented. This option is simple and fast implementation. This article is intended for those who are already familiar with ASP .NET MVC.

Opportunities:

• List display
• Adding items
• Moving items
• Deleting items

Used technologies:

• Microsoft ASP. NET MVC 4
• Entity Framework
• Linq to Entity
• Microsoft SQL Server (Local DB)

Database

Since all records will be stored in the database, it is necessary to create the following table:

public class News { public int Id {get;set;} //  public int? ParentId {get;set;} //   public string Title {get;set;} //  public bool IsDeleted {get;set;} //  } 

Models

Next, create models for work:
1. Usually, models do not directly use records from the database, so we will create a model similar to a table.

 public class NewsModel { public int Id {get;set;} //  public int? ParentId {get;set;} //   public string Title {get;set;} //  } 

2. List of news.

 public NewsListModel { public int? Seed {get;set;} //  public IEnumerable<NewsModel> News {get;set;} //  } 

Controller

Below is a controller that can select, delete, add and move news.

 public class NewsController : Controller { public ActionResult Index() { using (NewsContext context = new NewsContext()) { NewsListModel model = new NewsListModel() { News = context.News.Where(x => !x.IsDeleted).ToArray().Select(x => new NewsModel(x)) }; return View(model); } } [HttpPost] [ValidateAntiForgeryToken] public ActionResult Add(int? parentId, string title) { using (NewsContext context = new NewsContext()) { var newNews = new News() { ParentId = parentId, Title = title }; context.News.Add(newNews); context.SaveChanges(); } return RedirectToAction("Index"); } [ValidateAntiForgeryToken] [HttpPost] public ActionResult Move(int nodeId, int? newParentId) { if (nodeId == newParentId) { return RedirectToAction("Index"); } using (NewsContext context = new NewsContext()) { if (newParentId.HasValue && ContainsChilds(context, nodeId, newParentId.Value)) { return RedirectToAction("Index"); } var node = context.News.Where(x => x.Id == nodeId).Single(); node.ParentId = newParentId; context.SaveChanges(); } return RedirectToAction("Index"); } private bool ContainsChilds(NewsContext context, int parentId, int id) { bool result = false; var inner = context.News.Where(x => x.ParentId == parentId && !x.IsDeleted).ToArray(); foreach (var node in inner) { if (node.Id == id && node.ParentId == parentId) { return true; } result = ContainsChilds(context, node.Id, id); } return result; } [HttpPost] public ActionResult Delete(int id) { using (NewsContext context = new NewsContext()) { DeleteNodes(context, id); context.SaveChanges(); } return RedirectToAction("Index"); } private void DeleteNodes(NewsContext context, int id) { var inner = context.News.Where(x => x.ParentId == id && !x.IsDeleted).ToArray(); foreach (var node in inner) { node.IsDeleted = true; DeleteNodes(context, node.Id); } var deleted = context.News.Where(x => x.Id == id && !x.IsDeleted).Single(); deleted.IsDeleted = true; } } 

Representation

As can be seen from the code, most of the methods are executed recursively. Recursion allows you to quite concisely implement the operation. Recursion is also used when displayed on a page. Consider displaying a tree view.
')
_TreeList.cshtml

 @model MySLOTree.Models.NewsListModel @if (Model.News.Where(x => x.ParentId == Model.Seed).Any()) { <ul> @foreach (var node in Model.News) { if (node.ParentId == Model.Seed) { <a>@node.Title</a> MySLOTree.Models.NewsListModel inner = new MySLOTree.Models.NewsListModel { Seed = node.Id, News = Model.News }; @Html.Partial("_TreeList", inner) } } </ul> } 

Result

Blank list

Adding items

List display

Collapse \ Expand List

Moving items

Conclusion

To move elements in the tree, use drag and drop. Adding and deleting elements is done by clicking on the corresponding icons. The article omitted some points. All details can be seen in the source code.
Full source code is available on github .

PS I will be happy to answer questions and share experiences.