Question

我对此很陌生，这让我感到困惑，所以我会问一个愚蠢的问题。

我的布局很简单：

<!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");
}

在哪里编写这样的代码（只是模板化，我不知道确切的代码）
如何编写（使用什么功能）

Answer 1

我认为您想创建自己的剃须刀扩展名。

剃须刀中的

@表示类型为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>

如果要在CurrentlyOpenedLink字符串中设置值，可以在剃须刀顶部添加此值。

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

Answer 2

据我了解，您想成为导航链接，当您转到相应页面时会突出显示

因此，您可以使用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>

在这里，我使用了 ViewBag 来指示导航栏，该页面当前处于活动状态，并且取决于我们只是将类应用于相应的 li 。

尝试一次可能对您有帮助。

根据当前页面添加课程

2 个答案: