asp.net mvc सादा पाठ जनरेट करने वाले एमवीसी डायनेमिक मेनू




asp.net-mvc asp.net-mvc-4 (2)

मैंने एक एनएस्ट लेवल डायनैमिक मेनू रिकर्सिव मेथड बनाया है जो एक मेन्यू बनाता है।

जैसा कि उपरोक्त चित्र में देखा गया है, सामग्री को "_Menu.cshtml" नामक परियलव्यू पर लौटा दिया गया है और यह आंशिक दृश्य फ़ाइल खाली है।

और फिर एक _LayoutPage.Cshtml है

    <!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        <div>
            <input type="text" id="txtSearch" />
            <button id="btnSearch">Search</button>
         </div>
        <div id="Menu">
            @{Html.RenderAction("_Menu", "Home"); }
            @Html.Partial("_Menu")
        </div>
        <div>
            @RenderBody()
        </div>
    </div>
</body>
</html>

यह सफलतापूर्वक परिणाम को ब्राउज़र में डालता है, लेकिन जैसा मैंने ऊपर उल्लेख किया है और नीचे देखा जा सकता है, एक सादा पाठ के रूप में।

मैं इन कार्यों को लिंक जैसा कैसे बना सकता हूं, एक सादा पाठ की तरह नहीं? सहायता की सराहना की जाएगी धन्यवाद :)


हालांकि युद्ध ने मेरी क्वेरी को ऊपर से हल किया लेकिन मैं अभी भी उन लोगों के लिए जवाब देना चाहता हूं जिनके लिए उपर्युक्त उत्तर जटिल लगते हैं। डाटाबेस से डायनामिक नेविगेशन मेनू को पॉप्युलेट करने के लिए एमवीसी में सबसे आसानतम संभव तरीके से

नियंत्रक में:

    public ActionResult Index()
{
    Menu menu_ = new Menu();
    ViewBag.Menu = menu_.getMenuList();
    return View();
}

_layoutpage.Cshtml में

        <div id="Menu">
       @{ List<WebApplicationMVC.Core.Models.menu> All = ViewBag.Menu;}
        <ul>
            @foreach (var One in All.Where(m => m.ParentId == 0))
            {
                List<WebApplicationMVC.Core.Models.menu> Child = All.Where(m => One.id == m.ParentId).ToList();
                if (Child.Count > 0)
                {
                    if(One.ActionLink == "Yes")
                    {
                        <li>
                            @Html.ActionLink(One.Name, One.Action, One.Controller)
                            @SubMenu(One, All)
                        </li>
                    }
                    else
                    {
                        <li>
                            @One.Name;
                            @SubMenu(One, All)
                        </li>
                    }
                }
                else
                {
                    <li>@Html.ActionLink(One.Name, One.Action, One.Controller)</li>
                }
            }
        </ul>

        @helper SubMenu(WebApplicationMVC.Core.Models.menu Object, List<WebApplicationMVC.Core.Models.menu> List)
        {
        List<WebApplicationMVC.Core.Models.menu> subChilds = (from a in List where Object.id == a.ParentId select a).ToList();
        <ul>
            @foreach (var subOne in subChilds)
            {
                List<WebApplicationMVC.Core.Models.menu> InnerChilds = (from a in List where subOne.id == a.ParentId select a).ToList();
                if (InnerChilds.Count > 0)
                {
                    if (subOne.ActionLink == "Yes")
                    {
                        <li>
                            @Html.ActionLink(subOne.Name, subOne.Action, subOne.Controller)
                            @SubMenu(subOne, List)
                        </li>
                    }
                    else
                    {
                        <li>
                            @subOne.Name
                            @SubMenu(subOne, List)
                        </li>
                    }
                }
                else
                {
                    <li>@Html.ActionLink(subOne.Name, subOne.Action, subOne.Controller)</li>
                }
            }
        </ul>
        }
    </div>

मैं इस एक पर एक थोड़ा अधिक शामिल दृश्य लिया

लेआउट में मैं ...

 @if (Model != null && Model is Core.Objects.Entities.CMS.Page)
 {
                @Html.Action("Menu", new MenuOptions { IsRootMenu = true, ForPageId = Model.Id, Depth = 3 })
 }

मैं पहली बार जांच करता हूं कि उपयोगकर्ता लॉगिन हुआ है और इस प्रकार "एक प्रबंधित पृष्ठ पर" जो केवल तभी होता है यदि मॉडल विशिष्ट प्रकार "कोर। ऑब्जेक्ट्स एंटिटी। सीएमएस.पेज" का है

मैं फिर एचटीएमएल @ एक्शन पर कॉल करता हूं जो मेरे नियंत्रक पर निम्नलिखित बाल कार्रवाई करता है, और मैं अपने मेनू विकल्प का निर्माण करता हूं ...

[HttpGet]
[ChildActionOnly]
[Route("~/Menu")]
public ActionResult Menu(MenuOptions options)
{
    //TODO: consider other complex menuing scenarios like a popup / tree based structures
    //      New api calls may be needed to support more complex menuing scenarios

    // TODO: figure out how to build these, perhaps with a string builder
    var expand = string.Empty;
    if (options.Depth > 0)
    {
        switch (options.Depth)
        {
            case 1: expand = "?$expand=PageInfo,Pages($expand=PageInfo)"; break;
            case 2: expand = "?$expand=PageInfo,Pages($expand=PageInfo,Pages($expand=PageInfo))"; break;
            case 3: expand = "?$expand=PageInfo,Pages($expand=PageInfo,Pages($expand=PageInfo,Pages($expand=PageInfo)))"; break;
            case 4: expand = "?$expand=PageInfo,Pages($expand=PageInfo,Pages($expand=PageInfo,Pages($expand=Pages($expand=PageInfo))))"; break;
            case 5: expand = "?$expand=PageInfo,Pages($expand=PageInfo,Pages($expand=PageInfo,Pages($expand=PageInfo,Pages($expand=PageInfo,Pages($expand=PageInfo)))))"; break;
        }
    }

    var query = options.IsRootMenu
        ? "Core/Page/MainMenuFor(id=" + options.ForPageId + ")" + expand
        : "Core/Page/ChildrenOf(id=" + options.ForPageId + ")" + expand;

    var items = Task.Run(() => Api.GetODataCollection<Page>(query)).Result;

    return PartialView(new MenuViewModel { Origin = options.ForPageId, Pages = items });
}

मेरे मामले में इस क्षेत्र को थोड़ी सी काम की जरूरत है और शायद मुझे उस केस स्टेटमेंट को कुछ चालाक लूपिंग कोड के साथ बदलना चाहिए जो क्वेरी को बनाता है।

संक्षेप में, हालांकि यह सब मेरे ऑडाटा एपीआई से पेज ऑब्जेक्ट्स के पदानुक्रम को खींचता है, जो मेरे विकल्प के अनुसार निर्धारित होता है, क्योंकि मेन्यूज़ अलग-अलग होते हैं, कुछ एक सिंगल लेवल ऑप्शंस हैं जो कई स्तरों पर जाते हैं लेकिन मैं एक पुन: प्रयोज्य मेनूिंग सिस्टम चाहता हूं।

ऐसा करने के बाद मैं ओडेटा परिणाम ले सकता हूं और एक मेनू दृश्य के लिए एक मॉडल तैयार कर सकता हूं जो इस तरह दिखता है ...

@model MenuViewModel
@if (Model.Pages != null)
{
    <ul class="menu">
        @foreach (var p in Model.Pages)
        {
            Html.RenderPartial("MenuItem", new MenuItemViewModel { Page = p, Origin = Model.Origin });
        }
    </ul>
}

मेनू दृश्यों को रूट के लिए एक सूची सेट करते हैं और प्रत्येक बच्चे के पृष्ठ के लिए एक बच्चे को प्रस्तुत करते हैं, मैं कुछ बिंदु पर इस दृश्य को विस्तारित करने की योजना बना रहा हूं जैसे कि माता पिता के पृष्ठ को बाहर निकलना जो ओडाटा परिणाम में हो सकता है, मैं नियंत्रक में खींच लिया।

और पहेली का अंतिम टुकड़ा मेनू आइटम दृश्य है जो प्रत्येक व्यक्तिगत मेनू वस्तु को प्रस्तुति देता है ...

@model MenuItemViewModel
<li>
    <a href="@Html.Raw("/" + Model.Page.Path)" @CurrentItem(Model.Page)>@Html.PageInfo(Model.Page).Title</a>
    @if (Model.Page.Pages != null && Model.Page.Pages.Any())
    {
        <ul class="submenu">
        @foreach (var p in Model.Page.Pages)
        {
            Html.RenderPartial("MenuItem", new MenuItemViewModel { Page = p, Origin = Model.Origin });
        }
        </ul>
    }
</li>

@functions{
    MvcHtmlString CurrentItem(Core.Objects.Entities.CMS.Page p)
    {
        if (Model.Origin == p.Id) return new MvcHtmlString("class='selected'");
        return null;
    }
}

यह सब करने के बाद मैं अनिवार्य रूप से सूचियों के एक नेस्टेड सेट के साथ समाप्त होता हूं, तब मैं सीएसएस का उपयोग पॉपअप या गतिशील विस्तार जैसे ect को बढ़ाता है।

यह कार्यक्षमता पूरी तरह से पूर्ण नहीं है, मुझे यह सुनिश्चित करने की आवश्यकता है कि मैं "वर्तमान वस्तु को चिह्नित करना" वर्ग या कुछ चीज़ों के साथ संभालता हूं ताकि मैं इसे अलग तरीके से शैली में कर सकूं और कुछ अन्य मेनूिंग परिदृश्य जिन्हें मैं जोड़ना चाहूंगा, लेकिन मैंने भी विचार किया है पेड़ के दृश्यों के लिए किसी तरह से इस html संरचना का पुन: उपयोग किया जा रहा है लेकिन पेड़ अधिक लंबी अवधि में शामिल हो सकते हैं लेकिन मेनू आइटम के बगल में एक छवि डालने की तरह काम करना एक अच्छा तार्किक सुधार की तरह लगता है अगर इसकी विन्यास योग्य है :)

एक आखिरी बात मैं पहले से ही भूल गया था कि नियंत्रक में मेनू क्रिया में उपयोग किए जाने वाले मेनू विकल्प मॉडल हैं ...

public class MenuOptions
{
    public bool IsRootMenu { get; set; }
    public int ForPageId { get; set; }
    public int Depth { get; set; }
}




plaintext