خانه \\ MVC 5 & 6 \\ پیاده سازی TreeView در ASP.NET MVC 5

  • پیاده سازی TreeView در ASP.NET MVC 5
پیاده سازی TreeView در ASP.NET MVC 5
1395/09/12 - 18:59:33 // MVC 5 & 6 // 0 نظر // 5949 بازدید

در این مقاله طریقه ایجاد یک TreeView را در ASP.NET MVC مورد بررسی قرار خواهیم داد. برای Generate کردن یک TreeView از دیتابیس، قاعدتا به دیتابیس در درجه اول نیاز دارم. بافت دیتابیس به شکل زیر خواهد بود.

بسمه تعالی

پیاده سازی TreeView در ASP.NET MVC 5

در این مقاله طریقه ایجاد یک TreeView را در ASP.NET MVC مورد بررسی قرار خواهیم داد. برای Generate کردن یک TreeView از دیتابیس، قاعدتا به دیتابیس در درجه اول نیاز دارم. بافت دیتابیس به شکل زیر خواهد بود.

جدول SiteMenu دارای فیلدهای زیر خواهد بود.

MenuID

MenuName

NavURL

ParentMenuID

به دلیل Parent/Child بودن TreeView به یک ParentID جهت مشخص شدن پدر هر آیتم نیاز داریم. وضعیت Controller و ActionMethod مورد نیاز هم بسیار ساده و بدیهی خواهد بود.

  1. public ActionResult Simple()  
  2.        {  
  3.            List<SiteMenu> all = new List<SiteMenu>();  
  4.            using (MyDatabaseEntities dc = new MyDatabaseEntities())  
  5.            {  
  6.                all = dc.SiteMenus.OrderBy(a => a.ParentMenuID).ToList();  
  7.            }  
  8.            return View(all);  
  9.        }  
 

حال به سراغ View خواهیم رفت.

بخشی از View که CSS است که نه امکان آموزش در آن وجود دارد و نه شما در پروژه های خود نیاز به ایجاد وضعیت مشابه خواهید داشت و همه چیز به طراحی شما بستگی دارد. برای ایجاد وضعیت Click به یک Event در JQuery نیاز داریم که مشابه زیر خواهد بود.

 
  1. @* Here We need some Jquery code for make this treeview collapsible *@  
  2. @section Scripts{  
  3.     <script>  
  4.         $(document).ready(function () {  
  5.             $(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul  
  6.             $(".collapsible").click(function (e) {  
  7.                 e.preventDefault();  
  8.                 $(this).toggleClass("collapse expand");  
  9.                 $(this).closest('li').children('ul').slideToggle();  
  10.             });  
  11.         });  
  12.     </script>  
  13. }  
 

نکته اصلی ایجاد یک Inline HtmlHelper آن هم به صورت Recursive و استفاده از آن در View مورد نظر میباشد. طریقه استفاده از این Helper به شکل زیر خواهد بود.

 
  1. <div style="border:solid 1px black; padding:10px; background-color:#FAFAFA">  
  2.     <div class="treeview">  
  3.         @if (Model != null && Model.Count() >0)  
  4.         {  
  5.             <ul>  
  6.                 @Treeview.GetTreeView(Model, Model.FirstOrDefault().ParentMenuID)  
  7.             </ul>  
  8.         }  
  9.     </div>  
  10. </div>  

حال وقت ایجاد آن Inline Html Helper است که باید در فولدر App_Code به شکل زیر ایجاد گردد.

  1. @helper GetTreeView(List<MVCTreeview.SiteMenu> siteMenu, int parentID){  
  2.     foreach (var i in siteMenu.Where(a=>a.ParentMenuID.Equals(parentID)))  
  3.     {  
  4.         <li>  
  5.             @{var submenu = siteMenu.Where(a => a.ParentMenuID.Equals(i.MenuID)).Count();}  
  6.             @if (submenu > 0)  
  7.             {  
  8.                 <span class="collapse collapsible"> </span>  
  9.             }  
  10.             else  
  11.             {  
  12.                 <span style="width:15px; display:inline-block"> </span>  
  13.             }  
  14.             <span>  
  15.                 <a href="@i.NavURL">@i.MenuName</a>  
  16.             </span>  
  17.             @if (submenu > 0)  
  18.             {  
  19.                 <ul>  
  20.                     @Treeview.GetTreeView(siteMenu,i.MenuID)   
  21.                     @* Recursive  Call for Populate Sub items here*@  
  22.                 </ul>  
  23.             }  
  24.         </li>  
  25.     }  
  26. }  

در همین وب سایت Inline Html Helper ها توضیح داده شده است. حال که متد ما آماده شده، اگر به درستی به دیتابیس متصل شده باشید، یک TreeView با Performance خوب و مبتنی بر JQuery خواهید داشت.

 

لینک دانلود پروژه :  لینک دانلود پروژه

 
علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
مطالب مرتبط
نظرات کاربران
ارسال نظر