@Html.ActionLink() 在 if 语句中答案

【问题标题】：@Html.ActionLink() in an if statement@Html.ActionLink() 在 if 语句中
【发布时间】：2013-04-29 21:23:47
【问题描述】：

我正在学习 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;

}

【问题讨论】：

有点绕，你用if语句干什么？您是否正在尝试查找是否有人点击、悬停、链接是否存在？
正确！我想弄清楚是否有人点击了菜单。
好的，这可以使用链接的 onclick 属性来完成。您可以设置一个函数在用户单击链接时调用，例如展开某些内容或隐藏另一个面板。
基本上，链接已经存在。所以，当有人点击任一菜单时，我想显示一张图片：
使用 onclick 属性是唯一可用的解决方案吗？谢谢

标签： asp.net-mvc razor

【解决方案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" 键。

【讨论】：

这正是我想要做的，因为我只希望在点击后显示图像。我刚刚实施了您的解决方案，但图像未显示。你知道是什么原因造成的吗？
可能是因为我大写了“Controller”——我认为它实际上应该都是小写的。如果这不起作用，请尝试检查 HTML 以确保标记实际上不存在。如果没有，请尝试在视图中的某处粘贴 @Html.Raw(ViewContext.RouteData.Values["controller"]) 以仔细检查那里确实有一个值（应该写在放置 Razor 语句的标记中）。
插入 @Html.Raw(ViewContext.RouteData.Values["controller"]) 后，我能够看到 Business_Intelligence 显示。这是个好兆头吧？但是，我仍然看不到箭头。
是的，这是一个好兆头。这意味着价值在那里。仔细检查 if 语句中的大小写是否正确（根据我的编辑，“控制器”而不是“控制器”）。如果这是正确的并且您仍然看不到箭头，请在页面加载时直接检查页面的标记，因为这听起来可能是标记/样式本身而不是 Razor 模板的问题。
我以前从未这样做过——加载时如何检查页面的标记？

【解决方案2】：

您可以使用此 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 });

【讨论】：

谢谢，我正在调查中
我只是想说声谢谢。我正在追求另一种解决方案，因为它正是我正在寻找的。再次感谢
没问题，看来我只是误会了你想要的好运。
那是我的错！我需要提高我的沟通技巧:)