CODEWITHSUNDEEP
asp.net-mvcrazor
Oliver
Oliver

Reputation: 193

@Html.ActionLink() in an if statement

I'm learning MVC 4, and therefore using the razor engine to render my views. Please bear with me :)

I have a navigation menu that looks like this:

enter image description here

And I want to have an arrow that points downs towards its content when the user clicks one of the navigation menu. Here is the code: 

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

Now, I'm wondering what to write in the if statement. I know I need to link my arrow to an actionlink - something like this:

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

Any help would be appreciated. Thanks for your time.

PS: Does my question make sense?

Here is my view:

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

and my CSS:

 /* Images

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

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

}

Upvotes: 3

Views: 3454

Answers (2)

Ant P
Ant P

Reputation: 25221

If I understand you correctly, you effectively want to detect whether the current page is the one linked to by the nav item and, if so, render some additional markup on the corresponding nav item. For this, you can use 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>

What this will do is check whether the current action is being executed by the Business_Intelligence controller and - if it is - render your additional markup below the action link.

Note that this will only render the arrow when the view is first loaded, i.e. if clicking on "Business Intelligence" loads a new page, then this solution is for you. If you need to be able to do this dynamically (e.g. clicking on "Business Intelligence" actually just renders more content via jQuery without actually refreshing the page), then Nomad101's solution is more appropriate.

If you need finer granularity than this, the collection also includes an "action" key.

Upvotes: 2

Nomad101
Nomad101

Reputation: 1698

You could use this html helper to add an html attribute of the onclick method that you want to execute when a users clicks on it. 

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

Some notes on this the someFunc() is a client-side java-script function. This function can easily take an argument if you would like but that is up to you. It will be executed 1 time every time the element is clicked. the null value is in place of the route-values object of the ActionLink helper, this value can control special routing values in MVC and can be very useful.

Another way would be to set the element an ID and use jquery to handle the events. something like this would work:

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

Upvotes: 1

Related Questions