Is there a way to make HTML.ActionLink Invisible by default?

Question

I am trying to hide HTML.ActionLink by default when page first renders and then control it's visiblity based on the page the the user is on. Any suggestions? Thanks!

Answer 1

By default, render the link with the CSS display:none attribute. Then use Javascript to switch display to a value that will display the link when required. More information here.

jQuery provides the show() and hide() effects that allow you to easily toggle the visibility of an element or elements.

Answer 2

you can set any style on the action link by setting it's html attributes.

Html.ActionLink(
    "LinkName", 
    "Action", 
    null,
    new { @style = "display:none" });

Answer 3

create your action link helper with the htmlAttributes overload to give it a class

Html.ActionLink("link","link",null, new { @class=model.mystatus })

You would set the @class value from a property in your model then either apply "display:none;" to the class in CSS or set the element to hidden with jquery --> $('.statusclass').hide();

Answer 4

I guess that you want to control the visibility of the tag generated by the Html.ActionLink helper method, is that right? If yes, you can specify dinamically the class for the tag as below:

<%=Html.ActionLink("link", "MyAction", null, new { @class = ViewData["actionLinkClass"] })%>

In your controller action method you can define the ViewData["actionLinkClass"] value for the visible or hidden style.

Answer 5

The only thing that worked is wrapping the ActionLink in a span, assigning a class, hiding it in CSS, and showing it in JavaScript. For some reason assigning a class name directly to ActionLink would not work.

Thanks for everyone's help!

Answer 6

Here's a technique:

• Add a CSS class to the link
• Add a CSS class to the body tag of every page, use as many unique values as you need
• Edit your CSS file to show/hide the link based on the combination of the body tag class and the class on the link.

Example CSS file:

body.events .myLink,
body.about .myLink {
   display:none;
}
body.programs .myLink {
   display:inline;
}

Then you don't need to do anything funky with the ActionLink. This doesn't address the question of why you're emitting a link that you don't want to show in the first place, but I'll trust you have a good reason for it.

Answer 7

To decide weather to hide or show the link you need to provide this information via Model or ViewData. I suppose you have the link in a master page.

So first step is to provide that information for all views in your site. You can do it by creating base controller and override a method (and of course all your controllers should inherit form the new one):

protected override void OnActionExecuted(ActionExecutedContext filterContext)
{
    if (filterContext.ActionResult is ViewResult) {
     ViewData["Shared-ShowTheLink"] = IsLinkeVisible(filterContext) ? "non-null" : null;
    }  
}

private bool IsLinkeVisible(ActionExecutedContext filterContext) {
 // Show on the home page only, for example
 var controllerName = filterContext.RouteData.Values["controller"];
 var actionName = filterContext.RouteData.Values["action"];

 var isHome = string.Compare(controllerName, "Home", StringComparison.InvariantCultureIgnoreCase) == 0;
 var isIndex = string.Compare(actionName, "Index", StringComparison.InvariantCultureIgnoreCase) == 0;
 return isHome && isIndex;
}

After that you need to to your master page (or view) and do something like this (assuming WebForms view engine):

<% if (ViewData["Shared-ShowTheLink"] != null) { %>
    Html.ActionLink("Link Text", "Action", "Controller");
<% } %>

Now your link should be visible on Home/Index only.
To change this modify IsLinkeVisible method as you need.

Cheers.