PDA

View Full Version : نحوه ساختن منو به صورت داینامیک



raha raad
شنبه 16 دی 1396, 10:22 صبح
با سلام و عرض ادب.
برای ساختن منو و مگا منو به صورت داینامیک ممکنه راهنمایی کنید؟ یه کد پیدا کردم که ادعا می کرد میشه تا بینههایت زیر منو اضافه کنه ولی متاسفاهنه کدش ناقص گذاشته شده بود!!!
برای مگا منو هم اصلا کدی پیدا نکردم!!!
ممنون می شم کمکم کنید.

jaykob
دوشنبه 18 دی 1396, 06:36 صبح
سلام

با کدام بخش کار مشکل دارید ؟ طراحی جدول و تحلیل ؟ یا رندر کردن view ؟

raha raad
دوشنبه 18 دی 1396, 12:10 عصر
سلام بارندر ویو مشکل دارم.

jaykob
دوشنبه 18 دی 1396, 12:14 عصر
سلام بارندر ویو مشکل دارم.

کد HTML که می خواهید داینامیک کنید اینجا قرار بدید روی همون توضیح بدم خدمتتون .

ساختار دیتابیس هم به صورت یک فیلد parent هستش دیگه ؟

raha raad
چهارشنبه 20 دی 1396, 09:52 صبح
مجددا سلام عرض می کنم.
کد اکشنی که استفاده کردم:


//[ChildActionOnly]
public ActionResult Categories()
{
ViewData["query"] = db.Categories.Where(category => category.ParentId == null).Include(category => category.Children).ToList();
return View();
}


و همینطور کد پارشیال مربوطه:





@{
Layout = null;
}


<!DOCTYPE html>


<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Menu</title>
<link href="~/Style/style.css" rel="stylesheet" />
<script src="~/Scripts/index.js"></script>
</head>
<body>
@*
درحالت موبایل باز نمی شه
زیر منو نمایش داده نمی شه
*@


<header>
<nav id='cssmenu'>
<div class="logo"><a href="#">Logo </a></div>
<div id="head-mobile"></div>
<div class="button"></div>




@{
List<test_Bootstrap.Models.Category> _menu = ((List<test_Bootstrap.Models.Category>)ViewData["query"]);
}


@ShowTree(_menu)


@helper ShowTree(IEnumerable<test_Bootstrap.Models.Category> categories)
{
<ul>
@{


foreach (var item in categories)
{
<li class="@(item.Children.Any() ? "dropdown-submenu" : "")" >


@Html.ActionLink(item.Name, actionName: "Category", controllerName: "Home", routeValues: null, htmlAttributes: null)
@if (item.Children.Any())
{
<ul class="dropdown-menu">
@ShowTree(item.Children)
</ul>
}
</li>


}
}
</ul>
}






</nav>
</header>

</body>
</html>




مساله اینه که زیر منو ها رو اصلا نشون نمیده!!!!!!!!

raha raad
دوشنبه 25 دی 1396, 11:57 صبح
فکر می کنم مشکل شاید از پرس و جو باشه. خواهش می کنم راهنمایی کنید

ali_md110
دوشنبه 25 دی 1396, 15:46 عصر
نیاز به متد کمکی یا TreeViewHelper خاصی نیست
یه مثال ساده میتونیم این منوی داینامیک رو بسازیم
فرض کنیم مدل برنامه ما به صورت Selef Referencing باشه


public class Menu
{
public int Id { get; set; }
public string Title { get; set; }
[ForeignKey("ParentId")]
public Menu Parent { get; set; }
public int? ParentId { get; set; }
public ICollection<Menu> Childs { get; set; }
}


و این یک لیست از داده هست که درون دیتابیس ریختیم


var m1 = new Menu {Id=1, Title = "منوی اول" ,ParentId=null};
var m2 = new Menu {Id=2, Title = "زیر منوی1", ParentId = 1 };
var m3 = new Menu {Id=3, Title = "زیر منوی 2", ParentId = 1 };
var m11 = new Menu {Id=4, Title = "منوی دوم" , ParentId = null };
var m22 = new Menu {Id=5, Title = "زیر منوی 11", ParentId = 4 };
var m33 = new Menu {Id=6, Title = "زیر منوی 22", ParentId = 4 };





در قسمت کنترلر یک اکشن میسازیم


[ChildActionOnly]
public virtual ActionResult UserHorizontalNavBarItems()
{
var db= new dataContext()
var model=db.Menus.Include(x => x.Parent).ToList();


return PartialView("_HorizontalNavigation", model);
}


در پارشل مورد نظر که در اینجا HorizontalNavigation_ عنوانش هست کافیه یک سری کد بنویسیم



@model IEnumerable<Menu>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">


@foreach (var parent in Model.Where(x => x.ParentId == null))
{

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">@parent.Title
<span class="caret"></span></a>
<ul class="dropdown-menu">
@foreach (var child in Model.Where(x => x.ParentId == parent.Id && x.ParentId != null))
{
<li class="nav-divider"></li>
<li>

<a href="#">در این قسمت اکشن لینک هاتون اضافه کنید

@*<i class="@child.Icon"></i>*@

<span>@child.Title</span>

</a>
</li>
}
</ul>
</li>



}

</ul>

</div>
</nav>





برای نمایش منو هم بدینصورت عمل میکنیم



@Html.Action("UserHorizontalNavBarItems", "Home" })



در صورتیکه نیاز به منوی های تو در توی زیادی باشه از TreeviewHelper هاییکه توی اینترنت فراوونه استفاده کنید

EnKamran
جمعه 29 دی 1396, 17:54 عصر
در منو های تو در تو نامحدود محله ای بهترین راه استفاده از تابع بازگشتیه
یك تابع مینویسید كه منو مرحله اول رو رندر میكنه و به ازای هر آیتم از منو دوباره خودش رو صدا میزنه كه زیرمنوهای همون آیتم رو ندر كنه و این كار تا زمانی كه آیتم زیرمنو داشته باشه ادامه داره

raha raad
شنبه 30 دی 1396, 15:06 عصر
مخاطب: آقای KamranShakh (http://barnamenevis.org/member.php?104157-KamranShakh)
ماهیت این کدی که استفاده کردم هم بازگشتیه ولی با چینین مشکلی مواجه شدم.

raha raad
شنبه 30 دی 1396, 15:07 عصر
سلام. ممنون از پاسخ جامع و کاملتون آقای
ali_md110 (http://barnamenevis.org/member.php?18325-ali_md110)
. حتما بررسی می کنم ایشاا.. که دیگه مشکلم رفع بشه.