3

我正在学习 MVC 4，因此使用 razor 引擎来呈现我的视图。请多多包涵 ：）

我有一个如下所示的导航菜单：

在此处输入图像描述

当用户单击其中一个导航菜单时，我希望有一个向下指向其内容的箭头。这是代码：

<li>
     @Html.ActionLink("Business Intelligence", "Index", "Business_Intelligence")
     @if ()
     {
         <span id="triangle">
             <img src="~/Images/nav_arrow.png" />
          </span>
      }
 </li>
 <li>@Html.ActionLink("Marketing Services", "MarketingServices", "Marketing")</li>

现在，我想知道在 if 语句中写什么。我知道我需要将我的箭头链接到一个动作链接 - 像这样：

@if (@Html.ActionLink("Business Intelligence", "Index", "Business_Intelligence"))
{
  <span id="triangle">                      
     <img src="~/Images/nav_arrow.png" />
  </span>
 }

任何帮助，将不胜感激。谢谢你的时间。

PS：我的问题有意义吗？

这是我的看法：

     <!DOCTYPE html>


<head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
</head>

<body>  
    <div class="WebContent"> 
    <nav>
        <ul id="menu">
           <li>
                <a href="@Url.Action("Index", "Business_Intelligence")">
                    <img src="~/Images/myImage-Logo.png" />
                </a>

                @if (ViewContext.RouteData.Values["controller"] == "Business_Intelligence")
                {
                    <span class="triangle">
                        <img src="~/Images/nav_arrow.png" />
                    </span>
                }

            </li>                            
            <li>
                @Html.ActionLink("Business Intelligence", "Index", "Business_Intelligence")

                @if (ViewContext.RouteData.Values["controller"] == "Business_Intelligence")
                {
                    <span class="triangle">
                        <img src="~/Images/nav_arrow.png" />
                    </span>
                }

            </li>
            <li>@Html.ActionLink("Marketing Services", "MarketingServices", "Marketing")</li>
        </ul>

    </nav>

        @RenderSection("featured", required: false)
        @RenderBody()
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)

    <footer>
            <p>Footer</p>
    </footer>

    </div>

</body>

和我的 CSS：

 /* Images

-------------------------------------------------- ---------*/

.triangle{
display:block; 
text-align: center;

}

4

2 回答 2

2

如果我理解正确，您实际上想要检测当前页面是否是导航项链接的页面，如果是，则在相应的导航项上呈现一些额外的标记。为此，您可以使用ViewContext：

<li>
     @Html.ActionLink("Business Intelligence", "Index", "Business_Intelligence")
     @if (ViewContext.RouteData.Values["controller"] == "Business_Intelligence")
     {
         <span id="triangle">
             <img src="~/Images/nav_arrow.png" />
          </span>
      }
 </li>

这将检查Business_Intelligence控制器是否正在执行当前操作，如果是，则在操作链接下方呈现您的附加标记。

请注意，这只会在首次加载视图时呈现箭头，即如果单击“商业智能”加载新页面，那么此解决方案适合您。如果您需要能够动态地执行此操作（例如，单击“商业智能”实际上只是通过 jQuery 呈现更多内容而没有实际刷新页面），那么 Nomad101 的解决方案更合适。

如果您需要比这更精细的粒度，该集合还包括一个"action"键。

于 2013-04-29T21:53:21.383 回答
1

您可以使用此 html 帮助程序来添加您希望在用户单击它时执行的 onclick 方法的 html 属性。

@Html.ActionLink("Business Intelligence", "Index", "Business_Intelligence", null, new { onclick:"someFunc()" })

关于此的一些注释 someFunc() 是一个客户端 java-script 函数。如果你愿意，这个函数可以很容易地接受一个参数，但这取决于你。每次单击元素时都会执行 1 次。null 值代替了 ActionLink 助手的 route-values 对象，这个值可以控制 MVC 中的特殊路由值，非常有用。

另一种方法是为元素设置一个 ID 并使用 jquery 来处理事件。像这样的东西会起作用：

jQuery("#Link").on("click", function () { callback });
于 2013-04-29T21:50:01.710 回答