but the design is ugly. in general, we can add css to cover the default style, but it is not free and hard to custom its UI. now we have found a grate way to implement it.
The default managed navigation UI:
Managed Metadata Service:
The result of the custom Managed Naviagtion:
Menu 1:
Menu 2:
Menu 3:
Implement in detail
1. Create http handle service to provide the term store data for client
success to get the data, but failed to general its struct since client object model execute in async, it is discouraged.
I have to create a service to retrieve the term store in server and return the json object, then call the service to get the json data in client, finally, generate the navigation struct, it is a workaround way.
a. Retrieve the term store using Server API, at the moment, it would improve the performance using Http context cache
public static class CacheNavigation
{
const string AudienceGroupListCacheKey = "CacheKey";
const string SessionNavigationKey = "navigationKey_";
const int CacheExpritaionTimeInSeconds = 60; // 10 minutes
const string LogFeatureName = "CacheNavigation";
public class NavigationItem
{
public string Title { get; set; }
public string Url { get; set; }
public string Description { get; set; }
public string ParentNode { get; set; }
public Boolean HasChildNodes { get; set; }
public NavigationItem(string title, string url, string description, string parentNode, Boolean hasChildNodes)
{
Url = url;
Title = title;
Description = description;
ParentNode = parentNode;
HasChildNodes = hasChildNodes;
}
}
public static List<NavigationItem> GetTerms()
{
List<NavigationItem> groups = new List<NavigationItem>();
groups = HttpContext.Current.Cache[AudienceGroupListCacheKey] as List<NavigationItem>;
if (groups == null) {
groups = new List<NavigationItem>();
SiteMapNode rootNode = SiteMap.Providers["GlobalNavigationTaxonomyProvider"].RootNode;
if (rootNode != null)
{
foreach (SiteMapNode term in rootNode.GetAllNodes())
{
groups.Add(new NavigationItem(term.Title, term.Url, term.Description, term.ParentNode.Title, term.HasChildNodes));
}
}
HttpContext.Current.Cache.Insert(AudienceGroupListCacheKey, groups, null, DateTime.Now.AddSeconds(CacheExpritaionTimeInSeconds), TimeSpan.Zero);
}
return groups;
}
}
b. Create a handle
public class GetNavigation : IHttpHandler
{
public bool IsReusable
{
get { return true; }
}
/// <summary>
/// Return json-serialized Dictionary url --> ToHide
/// </summary> to
/// <param name="context"></param>
public void ProcessRequest(HttpContext context)
{
if (context == null || context.Response == null)
{
throw new ArgumentNullException("context", "context can not be null");
}
JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
context.Response.ContentType = "application/json";
var jsonResult = new JsonResult();
var currentuserNavigation = CacheNavigation.GetTerms();
jsonResult.Data.Add(currentuserNavigation);
context.Response.Write(jsonSerializer.Serialize(jsonResult));
}
}
2. Call the hande to get the navigation data and general html layout