编辑<li>的innerhtml以添加带有图标图像的<i>标记</i> </li>

时间:2013-08-27 09:12:11

标签: css asp.net-mvc controller innerhtml

我已经创建了一个自定义帮助程序,用于跟踪我的MVC应用程序中的当前菜单项,现在想要在更改之前替换我正在使用的图标并设置相关的href。以前我的列表项看起来像这样:

<li><a href="@Url.Action("Index", "Admin")"><i class="icon-lock"></i>Admin</a></li>            
<li><a class="active" href="@Url.Action("Index", "Home")"><i class="icon-home"></i>Home</a></li>

我现在使用以下代码创建了通用菜单项:

using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace MetaLearning.Helpers
{
  public static class MenuExtensions
  {
    public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper,
                                         string text, string action,
                                         string controller,
                                         string iconClass,
                                         object routeValues = null,
                                         object htmlAttributes = null)
    {
        var li = new TagBuilder("li");
        var routeData = htmlHelper.ViewContext.RouteData;
        var currentAction = routeData.GetRequiredString("action");
        var currentController = routeData.GetRequiredString("controller");
        li.InnerHtml = @"<a class=""active"" href=""/""><i class=""icon-home""></i>Home</a>";
        if (currentController.Contains(text))
        {
            li.InnerHtml = @"<a class=""active"" href=""/""><i class=""icon-home""></i>"+ text + "</a>";
        }
        else
        {
            li.InnerHtml = @"<a href=""/""><i class=""icon-home""></i>" + text + "</a>";
        }

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

如何将href设置为“/ controller”,将图标的名称设置为iconClass。我尝试过以下方法:

li.InnerHtml = @"<a class=""active"" href=""/""><i class=""icon-home""></i>"+ text + "</a>";

有了这个,我成功地显示了正确的文字,但当我尝试用相关变量替换href或图标类名时,我的字符串形成不正确

1 个答案:

答案 0 :(得分:0)

尝试使用'+'运算符连接字符串这不是一个好的行为here,您可以自己阅读更多内容。

  

如何将href设置为“/ controller”和图标的名称   to iconClass。

 li.InnerHtml = string.Format("<a href=\"{0}\"><i class=\"{2}\" /i>{1}</a>", controller, iconClass, text);