Mvc动态菜单填充纯文本 [英] Mvc Dynamic Menu Populating plain text
问题描述
我创建了创建菜单的第N级动态菜单递归方法.
I have created the N'th level Dynamic Menu recursive method which creates a menu.
如上图所示，内容返回到名为"_Menu.cshtml"的ParialView，并且此Partial View文件为空.
As seen in above picture the content is returned to ParialView named "_Menu.cshtml" and this Partial View file is empty.
，然后有一个_LayoutPage.Cshtml
and then there is a _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>
它成功地将结果放入浏览器中，但正如我上面提到的那样，以纯文本形式出现在下面，可以看到.
it successfully puts the result into the browser but as a plain text as i mentioned above and can be seen below.
我怎样才能使它们表现得像链接，而不是纯文本?帮助将不胜感激.谢谢:)
How can i make these act like links, not like a plaintext? Help will be appreciated. Thanks :)
推荐答案
对此，我的观点略有介入.
I took a slightly more involved view on this one.
在布局中，我放了...
In the layout I put ...
@if (Model != null && Model is Core.Objects.Entities.CMS.Page)
{
@Html.Action("Menu", new MenuOptions { IsRootMenu = true, ForPageId = Model.Id, Depth = 3 })
}
我首先检查用户是否已登录，并因此在托管页面上"，这仅在模型具有特定类型"Core.Objects.Entities.CMS.Page"的情况下才会发生.
I first check if the user is logged in and thus "on a managed page" which only happens if the model is of a specific type "Core.Objects.Entities.CMS.Page".
然后我调用@ Html.Action，它在控制器上调用以下子操作，然后构造菜单选项...
I then call @Html.Action which calls the following child action on my controller, and I construct my menu options ...
[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 });
}
就我而言，这方面需要一些工作，我可能应该用一些更聪明的循环代码来代替该case语句来构建查询.
In my case this area needs a little work and I should probably replace that case statement with some smarter looping code that builds the query.
简而言之，尽管所有这些只是将OData API上的Page对象层次结构拉到由菜单传入的选项决定的深度(随着菜单的变化而变化)，有些是单级选项，另一些则是多级，但我想使用可重复使用的菜单系统.
In short though all this does is pull a hierarchy of Page objects off my OData API to the depth determined by my options passed in as menus tend to vary, some are single level options others go multiple levels but I wanted a reusable menuing system.
完成后，我可以获取OData结果并为菜单视图建立一个像这样的模型...
Having done that I can take the OData result and build out a model for a menu view which looks like this ...
@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>
}
菜单视图为根目录设置了一个列表，并为每个子页面渲染了一个子页面，我计划在某个时候在此视图上进行扩展，例如吐出父页面，这可能在我拉入控制器的OData结果中
Menu views setup a list for the root and render a child for each child page, I plan to expand on this view at some point for things like spitting out the parent page which could be in the OData result I pulled in the controller.
难题的最后一部分是菜单项视图，该菜单项用于处理每个单独的菜单项...
And the final piece of the puzzle is the menu item view that deals with rendering each individual menu item ...
@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;
}
}
完成所有这些操作后，我最终得到了一组嵌套的列表，然后使用CSS来处理诸如弹出窗口或动态扩展等之类的事情.
Having done all this I end up with essentially a nested set of lists I then use CSS to handle things like popups or dynamic expands ect.
此功能不是很完整，我需要确保使用类或类似的东西来处理标记当前项目"，以便可以进行不同的样式设置，还有一些其他的菜单场景我想添加，但是我已经考虑过以某种方式为树视图重用此html结构，但是从长远来看，树可能会涉及更多点，但是如果将其放置在菜单项旁边，则将其放置在菜单项旁边似乎是一个不错的逻辑改进，如果它是可配置的:)
This functionality is not quite complete, I need to make sure I handle "marking the current item" with a class or something so I can style it differently and there are a few other menuing scenarios I would like to add, but also I have considered reusing this html structure in some way for tree views but trees may be a bit more involved in the longer term but doing things like putting an image next to menu items seems like a nice logical improvement if its configurable :)
我忘了输入的最后一件事是控制器中Menu动作上使用的菜单选项模型...
One last thing I forgot to put in before is the menu options model used on the Menu action in the controller ...
public class MenuOptions
{
public bool IsRootMenu { get; set; }
public int ForPageId { get; set; }
public int Depth { get; set; }
}
这篇关于Mvc动态菜单填充纯文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
