代码之家 › 专栏 › 技术社区 › Aleksa Ristic

基于当前页添加类

razor asp.net c#

Aleksa Ristic · 技术社区 · 6 年前

我是新来的,对我来说太困惑了,所以我会问一个愚蠢的问题。

我有这样简单的布局:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - TDMajstor</title>

    <link rel="stylesheet" type="text/css" href="~/css/_Layout.css" />

</head>
<body>
    <div id="MainWrapper">
        <div id="HorizontalMenuWrapper">
            <ul>
                <li><a id="Pocetna" href="@Url.Page("./Index")">Pocetna</a></li>
                <li><a id="Google" href="https://google.com">Google</a></li>
            </ul>
        </div>
    </div>
    @RenderBody()
    <hr />
</body>
</html>

我想要的是添加类 active 到我的一个链接。

因此,在基于当前页面链接加载页面时,如何创建表达式并添加类到链接。

所以代码应该是这样的:

if(CurrentlyOpenedLink == "someLink")
{
    Pocetna.AddClass("active");
}
else if(CurrentlyOpenedLink == "someLink")
{
    Google.AddClass("active");
}

在哪里编写这样的代码(它只是模板化的,我不知道确切的代码)
如何编写它(那么要使用什么函数)

2 回复 | 直到 6 年前

D-Shih 6 年前

我想你想创建自己的剃刀扩展。

@ 在Razor中,表示类型为 HtmlHelper<T>

下面是一个简单的代码

public static class HelpExt
{
    public static MvcHtmlString CustomerLink<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, 
        string url, 
        object htmlAttributes)
    {
        TagBuilder builder = new TagBuilder("a");
        builder.MergeAttribute("src", url);
        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));
        return MvcHtmlString.Create(builder.ToString());
    }
}

此链接包含有关 Build HTML Helpers

编辑

在您的问题中,有一个简单的方法可以让您期望,在标签中添加类标签,并添加一些判断。

使用 @{} 控制你的C冷来判断你的 CurrentlyOpenedLink 价值。

如果要获取当前打开的链接,可以使用 Request.Url.AbsoluteUri 。

<li><a id="Pocetna" href="@Url.Page("./Index")" class='@{CurrentlyOpenedLink == "somelink1" ? "active" : ""}'>Pocetna</a></li>
<li><a id="Google" href="https://google.com" class='@{CurrentlyOpenedLink == "somelink" ? "active" : ""}'>Google</a></li>

如果要在中设置值 当前打开的链接 你可以在剃刀上加这个。

@{
    string CurrentlyOpenedLink = Request.Url.AbsoluteUri;
}

er-sho 6 年前

据我所知, 当您转到相应的页面时,您希望成为突出显示的导航链接

所以对于您来说,可以使用jquery来实现这一点。

if (CurrentlyOpenedLink == "Pocetna") {
    $(document.querySelector('#Pocetna')).addClass('active').siblings('.active').removeClass('active');
  }
  else if (CurrentlyOpenedLink == "Google") {
    $(document.querySelector('#Google')).addClass('active').siblings('.active').removeClass('active');
  }

编辑时间:

如果你必须用MVC的方式来做,那么

1)layout.cshtml看起来像

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - TDMajstor</title>

    <link rel="stylesheet" type="text/css" href="~/css/_Layout.css" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div id="MainWrapper">
        <div id="HorizontalMenuWrapper">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class="@ViewBag.Pocetna">@Html.ActionLink("Pocetna", "Pocetna", "Home")</li>
                            <li class="@ViewBag.Sample">@Html.ActionLink("Sample", "Sample", "Home")</li>
                            <li class="@ViewBag.Google"><a id="Google" href="https://google.com">Google</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @RenderBody()
    <hr />
</body>
</html>

2)您的pocetna.cshtml看起来像

@{

    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Pocetna = "active";
}

<h2>Pocetna</h2>

3)在这里,我为您添加了一个更好的脱衣服页面,例如sample.cshtml。

@{
    ViewBag.Title = "Sample";
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Sample = "active";
}

<h2>Sample</h2>

这里我用过 视窗袋 为了指示导航栏哪个页面当前处于活动状态,我们只将类应用于相应的锂。

试一次,希望能对你有所帮助。