c# - 在 c# MVC3 Html.ActionLink 中渲染 Bootstrap 下拉菜单

Question

因此，我遇到了 MVC ActionLink 和 bootstrap 下拉列表的问题。我通过简单的菜单扩展成功了，我在其中传递了诸如字符串和一个 bool 值之类的参数。 But now I am trying to make my own extension which could generate Bootstrap Dropdown and add selected css class to parent of the dropdown - "ONEofTHEdropdownITEMSselected" - when one of those items in dropdown is selected (when selecting dropdown它路由到不同 Controller 的项目因此可以有几个或多个 Controller ):

<a href="#" class="dropdown-toggle ONEofTHEdropdownITEMSselected" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

和

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="~/area/controller1">Action1</a></li>
        <li><a href="~/area/controller2">Action2</a></li>
    </ul>
</li>

下面是我的 UI/MenuExtensions.cs 我想要实现的目标 - 传递两个可以生成 Bootstrap 下拉列表的参数，我可以在该下拉列表中手动插入新的菜单项。

public static class MenuExtensions
    {
        public static MvcHtmlString MenuItem(
            this HtmlHelper htmlHelper,
            string text,
            string action,
            string controller,
            string cssClass = "item",
            bool isController = false
        )
        {
            var li = new TagBuilder("li");
            var routeData = htmlHelper.ViewContext.RouteData;
            var currentAction = routeData.GetRequiredString("action");
            var currentController = routeData.GetRequiredString("controller");

            if ((string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) || isController) &&
                 string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
                li.AddCssClass("am-selected");

            li.InnerHtml = htmlHelper.ActionLink(text, action, controller, new { Area = "" }, new { @class = cssClass }).ToHtmlString();
            return MvcHtmlString.Create(li.ToString());
        }

      public static MvcHtmlString SelectMenu(
            this HtmlHelper htmlHelper,
            string cssClass,
            SelectMenuItem[] menuItems
        )
        {
            TagBuilder list = new TagBuilder("li")
            {
                InnerHtml = ""
            };
            string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
            string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");

            foreach (SelectMenuItem menuItem in menuItems)
            {
                TagBuilder li = new TagBuilder("li")
                {
                    InnerHtml = htmlHelper.ActionLink(menuItem.Text, menuItem.Action, menuItem.Controller, null, new { }).ToHtmlString()
                };
                ul.InnerHtml += li.ToString();
            }

            return MvcHtmlString.Create(list.ToString());
        }
    }

这里是外部类

 public class SelectMenuItem
    {
        public string Text { get; set; }
        public string Action { get; set; }
        public string Controller { get; set; }
        public bool IsVisible { get; set; }

        public SelectMenuItem()
        {
            IsVisible = true;
        }
    }

之后我的 html 看起来像这样。

 @Html.SelectMenu("dropdown", new []{
                            new SelectMenuItem{ Text = "ViewOne", Controller = "Controller1", Action = "index", IsVisible = SystemUser.Current().IsAdmin},
                            new SelectMenuItem{ Text = "ViewTwo", Controller = "Controller2", Action = "index"}
                        });

问题是 SelectMenu 只呈现这个:

<li></li>

Answer 1

无需重新发明轮子。用TwitterBootstrapMVC使用以下语法实现所需的输出:

@using (var dd = Html.Bootstrap().Begin(new DropDown("Dropdown").SetLinksActiveByControllerAndAction()))
{
    @dd.ActionLink("Action1", "index", "controller1")
    @dd.ActionLink("Action2", "index", "controller2")
}

注意扩展方法 SetLinksActiveByControllerAndAction()。这就是根据当前 Controller /操作使链接处于事件状态的原因。

---

免责声明:我是 TwitterBootstrapMVC 的作者。

如果使用 Bootstrap 3，您需要购买许可证。对于 Bootstrap 2，它是免费的。