در این مقاله آموزش ایجاد یک TreeView والد / فرزند در ASP.NET MVC با استفاده از Bootstrap و jQuery را خواهیم آموخت. این یک روش تمرینی است که در آن یک نمونه خواهیم ساخت که در آن یک شئ والد ایجاد خواهیم کرد.

شئ والد با یک شئ فرزند در ارتباط خواهد بود. توضیحات به همراه کد های سی شارپ و HTML و CSS و JS به صورت کامل برایتان قرار داده شده است .

امیدوارم از مقاله چگونه در ASP.NET MVC یک TreeView بسازیم لذت ببرید .

TreeView

ما دو کلاس ایجاد میکنیم ، یکی AuthorViewModel و دیگری BookViewModel است.

AuthorViewModel کلاس اصلی است که با کلاس BookViewModel در ارتباط است.

به بیان دیگر هر کلاس AuthorViewModel دارای یک لیست از اشیای کلاس BookViewModel خواهد بود.

قطعه کد زیر مربوط به کلاس BookViewModel است.

namespace TreeView.Models    
{   
    public class BookViewModel    
    {   
        public long Id    
        {   
            get;   
            set;   
        }   
        public string Title    
        {   
            get;   
            set;   
        }   
        public bool IsWritten    
        {   
            get;   
            set;   
        }   
    }   
}   
  

و قطعه کد زیر مربوط به کلاس AuthorViewModel است :

 using System.Collections.Generic;   
 namespace TreeView.Models 
  {   
    public class AuthorViewModel    
     {   
    public AuthorViewModel()    
     {   
       BookViewModel = new List  BookViewModel  ();   
 }   
 public int Id    
    {   
       get;   
       set;   
    }   
 public string Name    
   {   
       get;   
       set;   
   }   
 public bool IsAuthor    
   {   
       get;   
       set;   
  }   
 public IList  BookViewModel  BookViewModel    
  {   
       get;   
       set;   
  }   
 }   
}

حال یک کنترلر با نام “HomeController” ایجاد میکنیم که دارای دو متد برای عملیات های GET و POST میباشد.

نام این متد “Index” است. درخواست Get از این متد یک tree view در رابط کاربری برمیگرداند در حالیکه درخواست POST این متد ، داده های پست شده از رابط کاربری را دریافت میکند.

قطعه کد زیر مربوط به کنترلر HomeController است :

using System.Collections.Generic;   
using System.Linq;   
using System.Web.Mvc;   
using TreeView.Models;   
   
namespace TreeView.Controllers   
{   
    public class HomeController : Controller   
    {   
        [HttpGet]   
        public ActionResult Index()   
        {   
            ListAuthorViewModel model = new ListAuthorViewModel();   
   
            AuthorViewModel firstAuthor = new AuthorViewModel   
            {   
                Id = 1,   
                Name = John,   
                BookViewModel = new ListBookViewModel{   
                    new BookViewModel{   
                        Id=1,   
                        Title = JQuery,   
                        IsWritten = false   
                    }, new BookViewModel{   
                        Id=1,   
                        Title = JavaScript,   
                        IsWritten = false   
                    }   
                }   
            };   
   
            AuthorViewModel secondAuthor = new AuthorViewModel   
            {   
                Id = 2,   
                Name = Deo,   
                BookViewModel = new ListBookViewModel{   
                    new BookViewModel{   
                        Id=3,   
                        Title = C#,   
                        IsWritten = false   
                    }, new BookViewModel{   
                        Id=4,   
                        Title = Entity Framework,   
                        IsWritten = false   
                    }   
                }   
            };   
            model.Add(firstAuthor);   
            model.Add(secondAuthor);   
            return View(Index, model);   
        }   
   
        [HttpPost]   
        public ActionResult Index(ListAuthorViewModel model)   
        {   
            ListAuthorViewModel selectedAuthors = model.Where(a = a.IsAuthor).ToList();   
            ListBookViewModel selectedBooks = model.Where(a = a.IsAuthor)   
                                                .SelectMany(a = a.BookViewModel.Where(b = b.IsWritten)).ToList();   
            return View();   
        }   
    }   
}  

کد بالا نشان میدهد که چگونه کتاب ها با نویسنده ها در متد GET در ارتباط است و چگونه میتوان یک tree node انتخاب شده را در درخواست POST دریافت کرد.

Bootstrap CSS نیز به برنامه افزوده شده است ولی ما یک CSS مخصوص برای طراحی tree view مینویسیم. کد زیر مربوط به tree CSS است :

 .tree li
   {   
      margin: 0px 0;     
      list-style-type: none;   
      position: relative;   
      padding: 20px 5px 0px 5px;   
  }   
   
.tree li::before
  {   
     content: '';   
     position: absolute;    
     top: 0;   
     width: 1px;    
     height: 100%;   
     right: auto;    
     left: -20px;   
     border-left: 1px solid #ccc;   
     bottom: 50px;   
  }   
.tree li::after
  {   
     content: '';   
     position: absolute;    
     top: 30px;    
     width: 25px;    
     height: 20px;   
     right: auto;    
     left: -20px;   
     border-top: 1px solid #ccc;   
  }   
.tree li a
  {   
     display: inline-block;   
     border: 1px solid #ccc;   
     padding: 5px 10px;   
     text-decoration: none;   
     color: #666;       
     font-family: 'Open Sans',sans-serif;   
     font-size: 14px;   
     font-weight :600;   
     border-radius: 5px;   
     -webkit-border-radius: 5px;   
     -moz-border-radius: 5px;   
  }   
   
 /*Remove connectors before root*/   
 .tree  ul  li::before, .tree  ul  li::after
  {   
     border: 0;   
  }   
 /*Remove connectors after last child*/   
 .tree li:last-child::before
  {    
      height: 30px;   
  }   
   
 /*Time for some hover effects*/   
 /*We will apply the hover effect the the lineage of the element also*/   
 .tree li a:hover, .tree li a:hover+ul li a 
  {   
    background: #dd4814; color: #ffffff; border: 1px solid #dd4814;   
  }   
 /*Connector styles on hover*/   
 .tree li a:hover+ul li::after,    
 .tree li a:hover+ul li::before,    
 .tree li a:hover+ul::before,    
 .tree li a:hover+ul ul::before
  {   
     border-color:  #dd4814;   
  }   
 .tree-checkbox
  {   
    margin :4px !important;   
  }   
      
 .tree:before
   {   
     border-left:  1px solid #ccc;   
     bottom: 16px;   
     content: ;   
     display: block;   
     left: 0;   
     position: absolute;   
     top: -21px;   
     width: 1px;   
     z-index: 1;   
  }   
   
 .tree ul:after
  {   
     border-top: 1px solid #ccc;   
     content: ;   
     height: 20px;   
     left: -29px;   
     position: absolute;   
     right: auto;   
     top: 37px;   
     width: 34px;   
 }   
 *:before, *:after 
 {   
     box-sizing: border-box;   
 }   
*:before, *:after 
 {   
     box-sizing: border-box;   
 }   
.tree 
 {   
     overflow: auto;   
     padding-left: 0px;   
     position: relative;   
 } 

حال ما یک Index view در مرورگر ایجاد میکنیم که tree view برای کتاب و نویسنده را نشان میدهد. کد زیر نیز مربوط به Index View است :

@model List   
TreeView.Models.AuthorViewModel   
@section head{   
@Styles.Render(~/Content/css/tree.css)   
}   
   
   
    div class=panel panel-primary   
        div class=panel-heading panel-headAuthor Book Tree View/div   
        div id=frm-author class=panel-body   
@using (Html.BeginForm())   
{   
   
            div class=tree   
@for (int i = 0; i  Model.Count(); i++)   
{   
   
                ul   
                    li   
                        a href=#   
@Html.CheckBoxFor(model = model[i].IsAuthor, new { @class = tree-checkbox parent, @id = @Model[i].Id })   
   
                            label for=@i   
                                strongAuthor:/strong   
@Html.DisplayFor(model = model[i].Name)   
   
                            /label   
                        /a   
                        ul   
@for (int j = 0; j  Model[i].BookViewModel.Count(); j++)   
{   
int k = 1 + j;   
@Html.HiddenFor(model = model[i].BookViewModel[j].Id)   
   
                            li   
                                a href=#   
@Html.CheckBoxFor(model = model[i].BookViewModel[j].IsWritten, new { @class = tree-checkbox node-item, @iid = i +  + j })   
   
                                    label for=@i@j   
                                        strongBook @(k):/strong @Html.DisplayFor(model = model[i].BookViewModel[j].Title)   
                                    /label   
                                /a   
                            /li   
   
}   
   
                        /ul   
                    /li   
                /ul   
}   
   
            /div   
            div class=form-group   
                div class=col-lg-9/div   
                div class=col-lg-3   
                    button class=btn btn-success id=btnSubmit type=submit   
Submit   
/button   
                /div   
            /div   
}   
   
        /div   
    /div   
   
@section scripts{   
@Scripts.Render(~/Scripts/tree.js)   
} 


پس از آن ما یک بخش مهمی از این مثال را ایجاد میکنیم. با استفاده از مد زیر فایل javascript با نام tree.js را ایجاد میکنیم :

 (function($)    
{   
function Tree() {   
var $this = this;   
function treeNodeClick()    
{   
$(document).on('click', '.tree li a input[type=checkbox]', function() {   
$(this).closest('li').find('ul input[type=checkbox]').prop('checked', $(this).is(':checked'));   
}).on('click', '.node-item', function() {   
var parentNode = $(this).parents('.tree ul');   
if ($(this).is(':checked')) {   
parentNode.find('li a .parent').prop('checked', true);   
} else {   
var elements = parentNode.find('ul input[type=checkbox]:checked');   
if (elements.length == 0) {   
parentNode.find('li a .parent').prop('checked', false);   
}   
}   
});   
};   
$this.init = function() {   
treeNodeClick();   
}   
}   
$(function() {   
var self = new Tree();   
self.init();   
})   
}(jQuery))

Tree view ای که با استفاده از قطعه کد بالا ساختیم دارای ویژگی های زیر است :

۱ – زمانی که ما یک نویسنده را انتخاب میکنیم آنگاه همه ی کتاب های مربوط به او نیز انتخاب میشود.

۲ – زمانی که یک کتاب انتخاب شود آنگاه نویسنده ی والد آن نیز به طور اتوماتیک انتخاب میشود.

۳ – اگر همه ی کتاب های فرزند مربوط به یک نویسنده ی والد انتخاب شوند ، آنگاه والد انتخاب میشود.

۴ – اگر شاخه ی والد انتخاب نشده باشد ، آنگاه کتاب های فرزند آن نیز به صورت اتوماتیکی انتخاب نشده میشوند.

تصویر اول tree view والد فرزندی را نشان میدهد :

TreeView

امیدوارم از خواندن این مقاله لذت برده باشید !
موفق باشید !

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.