How can I create reusable navigation menu in ASP MVC3?

Question

I have the following navigation html/code now duplicated across several Views:

<ul class="topNav">
    <li class="selected">@Html.ActionLink("Dashboard", "Dashboard", new { id = ViewContext.RouteData.GetRequiredString("id") })</li>
    <li>@Html.ActionLink("Stats", "Stats", new { id = ViewContext.RouteData.GetRequiredString("id") })</li>
    <li>@Html.ActionLink("Questions", "Questions", new { id = ViewContext.RouteData.GetRequiredString("id") })</li>
    <li>@Html.ActionLink("Answers", "Answers", new { id = ViewContext.RouteData.GetRequiredString("id") })</li>
    <li>@Html.ActionLink("Contacts", "Contacts", new { id = ViewContext.RouteData.GetRequiredString("id") })</li>
</ul>

Of course in each View the class="selected" of the li is changed. Is there an easy way to place this block of code in a Partial View or Layout View?

Also, must I really use ViewContext.RouteData.GetRequiredString("id") to get to the id parameter of the controller or is there a simpler way?

dknaack · Accepted Answer · 2011-11-29 17:31:28Z

1

Here are two ways to handle that.

If you want a really reusable (Application independ solution) you should create a HtmlHelper Method Creating Custom HTML Helpers

If you need it just in your Application consider doing something like that.

public static class ControllerHelper
{
/// <summary>
/// Checks the current action via RouteData
/// </summary>
/// <param name="helper">The HtmlHelper object to extend</param>
/// <param name="actionName">The Action</param>
/// <param name="controllerName">The Controller</param>
/// <returns>Boolean</returns>
public static bool IsCurrentAction(this HtmlHelper helper, string actionName, string controllerName)
{
    string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
    string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

    if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
        return true;

    return false;

}
}


<ul class="topNav">
  <li @if(Html.IsCurrentAction("DashBoard", "DashBoard")) { <text>class="selected"</text> }>@Html.ActionLink("Dashboard", "Dashboard", new { id = ViewContext.RouteData.GetRequiredString("id") })</li>
  <li>@if(Html.IsCurrentAction("Stats", "Stats")) { <text>class="selected"</text> }>@Html.ActionLink("Stats", "Stats", new { id = ViewContext.RouteData.GetRequiredString("id") })</li>

// ....
</ul>

Please tell me if you want to implement the first approach, i will provide more help

hope this helps

answered Nov 29, 2011 at 17:31

dknaack

60.7k28 gold badges166 silver badges211 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

parleer Over a year ago

I read through the link you provided or Creating Custom HTML Helpers. Isn't that actually what you are doing in #2? After all, #2 it is an Extension Method to HtmlHelper. So what's different about #1? Do you mean that #1 could be something like @Html.Menu() and it would generate the full menu?

dknaack Over a year ago

#1 means that it is like @Html.Menu() right. Your list items could be passed in to this method. The method generates the html and give it back to your view.

MoXplod · Accepted Answer · 2011-11-29 19:48:08Z

0

You could create a static helper method in your App_code folder. Look at the section for Reusing @helpers across multiple views

And you can take in a parameter for defining which LI should have the selected class.

answered Nov 29, 2011 at 19:48

MoXplod

3,8726 gold badges40 silver badges47 bronze badges

Collectives™ on Stack Overflow

How can I create reusable navigation menu in ASP MVC3?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related