Home > DeveloperSection > Forums > Highlighting the menu item.
Munikumar G

Total Post:9

Points:63
Posted on    November-01-2011 11:40 PM

 ASP.NET MVC ASP.NET MVC 
Ratings:


 6 Reply(s)
 2176  View(s)
Rate this:

Hi,

I am using Menu controls like this.how can i highlighting the menu item here.

<%

 

@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%

if (Request.IsAuthenticated) {

%>

Welcome

<b><%: Page.User.Identity.Name %></b>!

[ <%

: Html.ActionLink("Log Off", "LogOff", "Account") %> ]

<%

}

else {

%>

<ul id="top-navigation">

<li><span><span><%: Html.ActionLink("Dashboard", "Index", "AppHome")%></span></span></li>

<li><span><span><%: Html.ActionLink("Index", "Index", "AppHome")%></span></span></li>

  

<li><span><span><%: Html.ActionLink("About", "About", "AppHome")%></span></span></li>

</ul>

<%

}

%>

 

In site.master using like this.

<% Html.RenderPartial(

"LogOnUserControl"); %></div>

Thanks

Munikumar



Chris Anderson
Chris Anderson

Total Post:65

Points:455
Posted on    November-02-2011 12:29 AM

Hi,

You can highlight menu item by using CSS.
For eg.

<html>
<head runat="server">
    <title>Index</title>
    <style type="text/css">
        .required
        {
            text-decoration:none;
        }
        .required:hover
        {
            background-color:Blue;
            color:White;
        }
        li
        {
            list-style-type:none;
            display:inline;
            margin-left:10px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <% foreach (var hobby in ViewBag.Hobbies) { %>
            <li>
                <font color="blue"><%: Html.ActionLink((string)hobby, "Index", "Home", new { @class = "required" })%></font>
            </li>
            <% } %>
        </ul>
    </div>
</body>
</html>

Munikumar G

Total Post:9

Points:63
Posted on    November-02-2011 1:05 AM

Hi,

 Thanks Rohit.

  But selected menu item how to create.

 

   Thanks

Munikumar


Chris Anderson
Chris Anderson

Total Post:65

Points:455
Posted on    November-02-2011 1:49 AM

Hi Muni,

First you have to create class in css, as given below:

    <style type="text/css">
        .required
        {
            text-decoration:none;
        }
        .required:hover
        {
            background-color:Blue;
            color:White;
        }
    </style>

After creating css, apply css class in ActionLink control:

<%: Html.ActionLink("Home", "Index", "Home", new { @class = "required" })%>

Munikumar G

Total Post:9

Points:63
Posted on    November-02-2011 10:56 PM


Chris Anderson
Chris Anderson

Total Post:65

Points:455
Posted on    November-03-2011 1:12 AM

hi,

You can modify the look of menus with the help of css that how menu look initially and react after selecting.
have you got your answer?

Modified On Nov-03-2011 01:22:38 AM

Munikumar G

Total Post:9

Points:63
Posted on    December-26-2011 3:35 AM

Hi,

I am using this code for MenuItem highlighting.It's working..........

1.Site.Mater

       <% Html.RenderPartial("MenuControl"); %>

2.MenuControl.ascx

       <ul id="top-navigation">
 <li><%: Html.ActionMenu("Campaigns", "Index", " Home ")%></li>
  <li><%: Html.ActionMenu(" Campaigns", "Index", "Home")%></li>
  <li><%: Html.ActionMenu("Mails", "Index", "Home")%></li>
<li><%: Html.ActionMenu("My Reports", "Index", " Home ")%></li>
</ul>

3.Then create new folder in app. Name like Html

         namespace EMM360.Html
{
public class Extention
{
public static Dictionary<Menu, Menu> GetDictionary()
{
Dictionary<Menu, Menu> urls = new Dictionary<Menu, Menu>();
urls.Add(new Menu { Controller = "AppHome", Action = "Index" }, new Menu { Controller = "AppHome", Action = "Index" });
urls.Add(new Menu { Controller = "Email", Action = "Index" }, new Menu { Controller = "Email", Action = "Index" });

return urls;
}
}
public static class HtmlExtensions
{
public static MvcHtmlString ActionMenu(this HtmlHelper helper,String linkText,string actionName,String controllerName)
{
var tag= new TagBuilder("li");
if(helper.ViewContext.RequestContext.IsCurrentRoute(null,controllerName,actionName)||
helper.ViewContext.RequestContext.IsParentRoute(controllerName,actionName))
{
tag.AddCssClass("active");
}
else
{
tag.AddCssClass("inactive");
}
tag.InnerHtml = helper.ActionLink(linkText, actionName, controllerName).ToString();
return MvcHtmlString.Create(tag.ToString());
}
}
public static class RequestExtentions
{
public static bool IsCurrentRoute(this RequestContext context, String areaName)
{
return context.IsCurrentRoute(areaName, null, null);
}
public static bool IsCurrentRoute(this RequestContext context, String areaName, String controllerName)
{
return context.IsCurrentRoute(areaName, controllerName, null);
}
public static bool IsCurrentRoute(this RequestContext context, String areaName, String controllerName, params String[] actionNames)
{
var routeData = context.RouteData;
var routeArea = routeData.DataTokens["area"] as String;
var current = false;

if (((String.IsNullOrEmpty(routeArea) && String.IsNullOrEmpty(areaName)) || (routeArea == areaName)) &&
((String.IsNullOrEmpty(controllerName)) || (routeData.GetRequiredString("controller") == controllerName)) &&
((actionNames == null) || actionNames.Contains(routeData.GetRequiredString("action"))))
{
current = true;
}
return current;
}
public static bool IsParentRoute(this RequestContext context, String controller, String action)
{
var routeData = context.RouteData;
Menu returnUrl = null;
Menu requestUrl = new Menu { Action = routeData.GetRequiredString("action"), Controller = routeData.GetRequiredString("controller") };
Menu linkUrl = new Menu { Action = action, Controller = controller };

var urls = Extention.GetDictionary();
urls.TryGetValue(requestUrl, out returnUrl);

if (returnUrl != null && returnUrl.Equals(linkUrl))
return true;
else
return false; ;
}
}
}



4. Create Menu Model

public string Text { get; set; }
public string Action { get; set; }
public string Controller { get; set; }

public override bool Equals(object obj)
{
return base.Equals(obj as Menu);
}
public bool Equal(Menu obj)
{
return obj != null && obj.Action == this.Action && obj.Controller == this.Controller;
}
public override int GetHashCode()
{
return (Action + Controller).GetHashCode();
}


   

    Thanks

G Munikumar


Don't want to miss updates? Please click the below button!

Follow MindStick