Question

我正在学习MVC 4，因此使用剃刀引擎来渲染我的观点。请耐心等待:)）

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

enter image description here

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

<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;

}

Answer 1

如果我理解正确，您实际上想要检测当前页面是否是导航项链接到的那个页面，如果是，则在相应的导航项目上渲染一些额外的标记。为此，您可以使用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"密钥。

Answer 2

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

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

有些注意事项someFunc（）是一个客户端java脚本函数。如果您愿意，此功能可以轻松地进行参数，但这取决于您。每次单击元素时，它将执行1次。 null值代替ActionLink帮助程序的route-values对象，该值可以控制MVC中的特殊路由值，并且非常有用。

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

jQuery("#Link").on("click", function () { callback });

@语句中的@ Html.ActionLink（）

2 个答案: