🗨️ 👱🏿 🤜🏼 ASP.NET MVC 4 RAZOR डायनामिक मल्टी-लेवल मेनू डेटाबेस से 😙 🛌🏿 💢

जैसा कि पिछले DropDownList पोस्ट में वादा किया गया था , MVC 4 में डिफ़ॉल्ट विकल्प के लिए "मान" सेट करें , आज मैं अनंत एनस्टिंग के साथ एक गतिशील बहु-स्तरीय मेनू बनाने के बारे में बात करूंगा, जिसे MsSQL डेटाबेस में संग्रहीत किया गया है। मुझे याद है कि एक समय पीसीपी पर यह एक-दो दिनों के लिए एक कार्य भी था। लेकिन RAZOR इंजन के साथ MVC 4 के लिए, मैंने मुश्किल से इसका पता लगाया, हालांकि अंत में, हमेशा की तरह, कुछ भी जटिल या अलौकिक नहीं था। लेख उन लोगों के लिए है जो नहीं जानते कि कैसे। यदि आप जानते हैं कि बेहतर कैसे करें - इसे साझा करें। चलिए शुरू करते हैं।

यह मैनुअल मानता है कि आप पहले से ही इन लेखों को पढ़ने से प्राप्त ज्ञान पर काम कर रहे हैं: एक ASP.NET MVC अनुप्रयोग में एंटिटी फ्रेमवर्क । या ये: ASP.NET MVC 4 ट्यूटोरियल

1) सबसे पहले आपको डेटाबेस की संरचना को समझना होगा। यह मुख्य बात है। सिद्धांत आलेखीय डेटाबेस में पदानुक्रमित डेटा संरचनाओं में पाया जा सकता है। हम सबसे सरल संरचना का उपयोग करेंगे, जिसे "पूर्वज के संदर्भ में संरचना" कहा जाता है।

SQL कोड कुछ इस तरह दिखता है:

CREATE TABLE "CATALOG" ( "ID" INTEGER NOT NULL PRIMARY KEY, "NAME" VARCHAR(200) CHARACTER SET WIN1251 NOT NULL, "PARENT_ID" INTEGER );

2012 में VS मॉडल बनाएं:

 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace zf2.Models { public class NewsM { public int NewsMID { get; set; } public int ParentID { get; set; } public string Title { get; set; } public string AddTitle { get; set; } public string Description { get; set; } public string Content { get; set; } public DateTime ModDate { get; set; } } }

सामान्य तौर पर, केवल पहले तीन क्षेत्र बुनियादी हैं। लेकिन स्पष्टता के लिए, मैं अपनी साइट पर उपयोग किया गया एक कार्यशील संस्करण लाया।

2) नियंत्रक।

  public ActionResult NewsA(int id = 1) //id     { ViewBag.Menu = db.NewsMs.ToList(); // ,     . ViewBag.Id = id; return View(); }

3) आंशिक दृश्य
यदि आपने अभी तक उनका सामना नहीं किया है - यह ठीक है। वे साधारण लिपियों से केवल इस मायने में भिन्न होते हैं कि उन्हें स्वचालित रूप से नहीं कहा जाता है। यह बोलने के लिए विचारों के लिए एक दृश्य है।

फ़ोल्डर दृश्य-साझा-राइट-क्लिक-ऐड-व्यू पर जाएं: बॉक्स "एक आंशिक दृश्य के रूप में बनाएं" देखें। "_Menu" नाम दर्ज करें। अंडरस्कोर का उपयोग क्यों किया जाता है? हां, सिर्फ नाम की सुविधा के लिए और खत्म करने के लिए। चूँकि आंशिक लिपियों को साझा प्रकार की सभी निर्देशिकाओं और विभिन्न एक्सटेंशन के साथ संबंधित नियंत्रक में खोजा जाता है। यदि आप गलत स्क्रिप्ट नाम सेट करते हैं तो यहां क्या है:

      "_gMenu"         .     : ~/Views/Home/_gMenu.aspx ~/Views/Home/_gMenu.ascx ~/Views/Shared/_gMenu.aspx ~/Views/Shared/_gMenu.ascx ~/Views/Home/_gMenu.cshtml ~/Views/Home/_gMenu.vbhtml ~/Views/Shared/_gMenu.cshtml ~/Views/Shared/_gMenu.vbhtml

मुझे लगता है कि यह स्पष्ट है।
आगे बढ़ो।
"_Menu.cshtml" में निम्न कोड की प्रतिलिपि बनाएँ:

 @{ List<zf2.Models.NewsM> menuList = ViewBag.Menu; } <ul class="menu"> @foreach (var mp in menuList.Where(p => p.ParentID == 0)){ <li> @Html.ActionLink(mp.Title, ViewContext.RouteData.GetRequiredString("action"), new { id=mp.NewsMID }) @if( menuList.Count(p=>p.ParentID == mp.NewsMID ) > 0){ @:<ul> } @RenderMenuItem(menuList,mp) @if( menuList.Count(p=>p.ParentID == mp.NewsMID ) > 0){ @:</ul> } </li> } </ul> @helper RenderMenuItem(List<zf2.Models.NewsM> menuList, zf2.Models.NewsM mi) { foreach (var cp in menuList.Where(p => p.ParentID == mi.NewsMID)) { @:<li> @Html.ActionLink(cp.Title, ViewContext.RouteData.GetRequiredString("action"), new { id=cp.NewsMID }) if(menuList.Count(p=>p.ParentID == cp.NewsMID) > 0) { @:<ul> } @RenderMenuItem(menuList,cp) if(menuList.Count(p=>p.ParentID == cp.NewsMID) > 0) { @:</ul> } else { @:</li> } } }

यहाँ सब जादू है।

@foreach (var mp in menuList.Where(p => p.ParentID == 0)) - parses और ParentID = 0 के साथ नाम प्रदर्शित करता है।

@RenderMenuItem(menuList,mp) - व्यू हेल्पर को कॉल करें, जो पहले से ही प्रत्येक "रूट" आइटम के लिए सभी नेस्टिंग को पूरा करता है।

@helper RenderMenuItem(List<zf2.Models.NewsM> menuList, zf2.Models.NewsM mi) - यह स्वयं सहायक है, जिसके अंदर पुनरावृत्ति का आयोजन किया गया है।

@Html.ActionLink(mp.Title, ViewContext.RouteData.GetRequiredString("action"), new { id=mp.NewsMID }) - लिंक बनाएं। मैं मानक रूटिंग का उपयोग करता हूं। नियंत्रक नाम को स्वचालित रूप से प्रतिस्थापित किया जाता है। कार्रवाई का नाम और पैरामीटर आईडी - "मैन्युअल रूप से" निर्दिष्ट करें।
ViewContext.RouteData.GetRequiredString("action") - हमें एक्शन का नाम मिलता है। इसी तरह, आप नियंत्रक का नाम प्राप्त कर सकते हैं।
new { id=mp.NewsMID } - आईडी पैरामीटर सेट करें।
mp.Title - लिंक नाम

अगला, "_Content" नामक एक और आंशिक दृश्य स्क्रिप्ट बनाएं।
हम प्रेषित आईडी पर चयनित लेख की सामग्री प्रदर्शित करेंगे।
कोड है:

 @{ List<zf2.Models.NewsM> menuList = ViewBag.Menu; } @ViewBag.Id @foreach (var mp in menuList.Where(p => p.NewsMID == ViewBag.Id)) { @mp.Content @mp.AddTitle @mp.Description }

4) मुख्य दृश्य स्क्रिप्ट। मैंने इसे कंट्रोलर में एक्शन नाम की तरह बुलाया है - NewsA.cshtml
इसमें, हम केवल अपनी आंशिक दृश्य स्क्रिप्ट्स को कॉल करते हैं और हेडर प्रदर्शित करते हैं।

 @{ ViewBag.Title = "NewsA"; } @{ List<zf2.Models.NewsM> menuList = ViewBag.Menu; } <div class="row"> <div class="span3"style="background-color: #e6e6e6;"> @Html.Partial("_Menu") </div> <div class="span6" style="background-color: #e6e6e6;"> @Html.Partial("_Content") </div> </div>

, - Bootstrap - CSS . :

. . :


:
.

Entity Framework
.
, .
:
using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Web; using zf2.Models; namespace zf2.DAL { public class ZfInitializer : DropCreateDatabaseIfModelChanges<ZfContext> { protected override void Seed(ZfContext context) { var newsMs = new List<NewsM> { new NewsM { NewsMID = 1, ParentID = 0, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 2, ParentID = 0, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 3, ParentID = 1, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 4, ParentID = 1, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 5, ParentID = 2, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 6, ParentID = 3, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 7, ParentID = 2, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, }; newsMs.ForEach(s => context.NewsMs.Add(s)); context.SaveChanges(); } } }

...

  , -   Bootstrap -   CSS .     : 
 
 . .      : 
  
 
 : 
        . 
    
    Entity Framework 
    . 
        ,      . 
    : 
 using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Web; using zf2.Models; namespace zf2.DAL { public class ZfInitializer : DropCreateDatabaseIfModelChanges<ZfContext> { protected override void Seed(ZfContext context) { var newsMs = new List<NewsM> { new NewsM { NewsMID = 1, ParentID = 0, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 2, ParentID = 0, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 3, ParentID = 1, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 4, ParentID = 1, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 5, ParentID = 2, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 6, ParentID = 3, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 7, ParentID = 2, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, }; newsMs.ForEach(s => context.NewsMs.Add(s)); context.SaveChanges(); } } } 
 
    ...

, - Bootstrap - CSS . :

. . :


:
.

Entity Framework
.
, .
:
using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Web; using zf2.Models; namespace zf2.DAL { public class ZfInitializer : DropCreateDatabaseIfModelChanges<ZfContext> { protected override void Seed(ZfContext context) { var newsMs = new List<NewsM> { new NewsM { NewsMID = 1, ParentID = 0, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 2, ParentID = 0, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 3, ParentID = 1, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 4, ParentID = 1, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 5, ParentID = 2, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 6, ParentID = 3, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, new NewsM { NewsMID = 7, ParentID = 2, Title = "Carson", AddTitle = "Carson", Description = "Carson", Content = "Carson" , ModDate = DateTime.Parse("2005-09-01") }, }; newsMs.ForEach(s => context.NewsMs.Add(s)); context.SaveChanges(); } } }

...

ASP.NET MVC 4 RAZOR डायनामिक मल्टी-लेवल मेनू डेटाबेस से

More articles: