I'm new to MVC and would like to add a link to something like ~/Destinations/35, where it would refer to the Index view of the Destinations controller, and 35 is the ID of the destination to be displayed.
Neither ActionLink() or RouteLink() appear to allow me to create a link such as this.
Also, I tried something like this:
<table>
#foreach (var d in ViewBag.Results)
{
<tr>
<td>
#Html.ActionLink(
String.Format("<b>{0}</b>", #Html.Encode(d.Title)),
"Details", "Destinations")
</td>
</tr>
}
</table>
But I get the following error on the ActionLink line, which I don't understand.
'System.Web.Mvc.HtmlHelper' has no applicable method named 'ActionLink' but appears to have an extension method by that name. Extension methods cannot be dynamically dispatched. Consider casting the dynamic arguments or calling the extension method without the extension method syntax.
Can someone help me create this link?
The first problem with your code is that you are trying to use HTML in the link text (the <b> tags) which is not possible because by design it always HTML encodes.
So assuming you didn't want HTML in the link you could do this:
#Html.ActionLink(d.Title, "Details", "Destinations", new { id = "35" }, null)
And assuming you need HTML inside the anchor you have a couple of possibilities:
Write a custom ActionLink helper which won't HTML encode the text (recommended) and then use like this:
#Html.MyBoldedActionLink(d.Title, "Details", "Destinations", new { id = "35" }, null)
Something along the lines:
<a href="#Url.Action("Details", "Destinations", new { id = "35" })">
<b>#d.Title</b>
</a>
and since I recommend the first approach here's a sample implementation of the custom helper:
public static class HtmlExtensions
{
public static IHtmlString MyBoldedActionLink(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName,
object routeValues,
object htmlAttributes
)
{
var anchor = new TagBuilder("a");
anchor.InnerHtml = string.Format("<b>{0}</b>", htmlHelper.Encode(linkText));
var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
anchor.Attributes["href"] = urlHelper.Action(actionName, controllerName, routeValues);
anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes));
return new HtmlString(anchor.ToString());
}
}
I have a couple of list items in a shared _layout.cshtm file (master page) in my MVC application.
something like:
<ul>
<li>Home</li>
<li>about</li>
<li>contact</li>
<li>blog</li>
</ul>
when the user is in a homepage, I want home li item to have class selected, like so:
<li class="selected">Home</li>
and so on. What is the best way to do this?
In regular asp.net website, I used to have a method in master page and call that method from child page but in MVC I am not sure what to do.
thanks.
You could write a custom helper method:
public static MvcHtmlString MenuItem(
this HtmlHelper htmlHelper,
string text,
string action,
string controller
)
{
var li = new TagBuilder("li");
var routeData = htmlHelper.ViewContext.RouteData;
var currentAction = routeData.GetRequiredString("action");
var currentController = routeData.GetRequiredString("controller");
if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
{
li.AddCssClass("selected");
}
li.SetInnerText(text);
return MvcHtmlString.Create(li.ToString());
}
and then:
<ul>
#Html.MenuItem("Home", "home", "home")
#Html.MenuItem("About", "about", "home")
#Html.MenuItem("Contact", "contact", "home")
#Html.MenuItem("Blog", "blog", "home")
</ul>
The helper check the current action and controller and if they match the one passed as arguments to the helper it appends the selected CSS class to the li.
Just wanted to share what i do:
I create folder App_Code and add CustomHelpers.cshtml. In it i create something like this:
#helper MainMenu(string SelectedItem) {
<ul class="MainMenu">
<li><a href="/home" #if (SelectedItem == "Home") { <text>class="Active"</text> }>Home</a></li>
<li><a href="/about" #if (SelectedItem == "About") { <text>class="Active"</text> }>About</a></li>
<li><a href="/foo" #if (SelectedItem == "Foo") { <text>class="Active"</text> }>Foo</a></li>
</ul>
}
Than in my MasterPage (_Layout.cshtml) i add this where i want my menu to apear:
#CustomHelpers.MainMenu(ViewBag.SelectedMenu)
And than in my view, just like i change my page title, i change my selected menu:
#{
ViewBag.Title = "Welcome to my homepage";
ViewBag.SelectedMenu = "Home";
}
Got my idea from this tutorial: www.asp.net/mvc/videos/mvc-3/mvc-3-razor-helpers
Here's the code, written to be written in a controller:
CategoryRepository categoryRepo = new CategoryRepository();
var categories = categoryRepo.FindAllCategories();
ViewBag.Categories = categories;
Now I'd like to use this to create a nice list of Categories dynamically.
<div id="leftnavigationbar">
<ul>
#foreach (var category in ViewBag.Categories)
{
//Create li here.
}
<!-- ActionLink goes: Text, ActionName, Controller -->
<li>#Html.ActionLink("Libros", "Index", "Home")</li>
<li>#Html.ActionLink("Peliculas, Musica & Juegos", "Index", "Anuncios")</li>
<li>#Html.ActionLink("Computadoras", "Index", "Usuarios")</li>
<li>#Html.ActionLink("Bienes Raices", "Index", "Ayuda")</li>
<li>#Html.ActionLink("Bolsa de Trabajo", "Index", "Contacto")</li>
<li>#Html.ActionLink("Deportes y Fitness", "Index", "Contacto")</li>
<li>#Html.ActionLink("Electronicos y Celulares", "Index", "Contacto")</li>
</ul>
</div>
Right now I'm writing this code to the _Layout.cshtml file. But I'd like to know where to write this so it runs always, sort of like a MasterPage.
Any suggestions?
Edit:
It appears that my initial intent isn't possible.
#foreach (var category in ViewBag.Categories)
{
<li>#Html.ActionLink(category.Name, "Index", "Home")</li>
}
Any suggestions on how accomplish what I'm trying to do? Just pull a list of categories and render them using a foreach loop. Then have it placed somewhere so it's viewable on all pages.
As always you start by creating a view model:
public class CategoryViewModel
{
public string CategoryName { get; set; }
}
Then in your controller you fill the view model:
public ActionResult Index()
{
var categories = categoryRepo.FindAllCategories();
var model = MapModelToViewModel(categories);
return View(model);
}
And finally your strongly typed view could use a display template. Obviously the view will be strongly typed to IEnumerable
<ul>
#Html.EditorForModel()
<!-- ActionLink goes: Text, ActionName, Controller -->
<li>#Html.ActionLink("Libros", "Index", "Home")</li>
...
</ul>
And your display template (~/Views/Home/DisplayTemplates/CategoryViewModel.cshtml):
#model YourApp.Models.CategoryViewModel
<li>#Model.CategoryName</li>
As you can see with strongly typed views and display templates you don't even need to write loops in your views.
As an alternative to display templates you could use Html.Action or Html.RenderAction helers. Phil Haack wrote a nice blog post about them. I suspect that you were forced to use the ugly untyped ViewBag because this code is situated in your master template and you don't have a view model. No problem, with Html.Action you could have a specific controller that will do this:
public class CategoriesController: Controller
{
public ActionResult Index()
{
var categories = categoryRepo.FindAllCategories();
var model = MapModelToViewModel(categories);
return View(model);
}
}
And then have a corresponding partial view which will take care of rendering the categories (~/Views/Categories/Index.cshtml):
#model IEnumerable<YourApp.Models.CategoryViewModel>
#Html.DisplayForModel()
And finally use the same display template.
Now in your master page you could simply include this child action:
<ul>
#Html.Action("index", "categories")
<!-- ActionLink goes: Text, ActionName, Controller -->
<li>#Html.ActionLink("Libros", "Index", "Home")</li>
...
</ul>
You're looking for something called a 'partial view'.
What would be the best/most suitable way to achieve the following in my MVC web application ?
I have a view called Site.Master (it's my MasterPage view), and across the top of this view, I have 5 links, which act as my main site navigation e.g.
<ul>
<li>Home</li>
<li>Links</li>
<li>Contact Us</li>
...etc
</ul>
What I want is to be able to highlight the appropriate text link, according to which part of the site the user is currently viewing, so if they were using the 'Contact Us' page, the Contact Us link on the master page view would have a different css style applied to it.
In Web Forms, each of my links was a HyperLink control, and I had a property in the code behind of the MasterPage so assign the relevant CssStyle to each HyperLink control.
What would be the best way to achieve the same thing in my MasterPage view, now I'm using MVC?
I would probably write an html helper which will generate those menu links and based on the current controller and action will apply a css class current to the anchor:
public static MvcHtmlString MenuLink(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName
)
{
string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
if (actionName == currentAction && controllerName == currentController)
{
return htmlHelper.ActionLink(
linkText,
actionName,
controllerName,
null,
new {
#class = "current"
});
}
return htmlHelper.ActionLink(linkText, actionName, controllerName);
}
And then use this helper in my view:
<ul>
<li><%= Html.MenuLink("Home", "Index", "Home") %></li>
<li><%= Html.MenuLink("Links", "Links", "Home") %></li>
<li><%= Html.MenuLink("Contact us", "Contact", "Home") %></li>
</ul>
Then all that's left is to define this current class in a CSS file to highlight:
.current {
...
}
In the default asp.net mvc project, in the Site.Master file, there is a menu navigation list:
<div id="menucontainer">
<ul id="menu">
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About Us", "About", "Home")%></li>
</ul>
</div>
This renders in the browser to:
<div id="menucontainer">
<ul id="menu">
<li>Home</li>
<li>About Us</li>
</ul>
</div>
I want to be able to dynamically set the active list item, based on the view that is being called. That is, when the user is looking at the home page, I would want the following HTML to be created:
<div id="menucontainer">
<ul id="menu">
<li class="active">Home</li>
<li>About Us</li>
</ul>
</div>
I would expect that the way to do this would be something like:
<div id="menucontainer">
<ul id="menu">
<li <% if(actionName == "Index"){%> class="active"<%}%>><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li <% if(actionName == "About"){%> class="active"<%}%>><%= Html.ActionLink("About Us", "About", "Home")%></li>
</ul>
</div>
The key bit here is the <% if(actionName == "Index"){%> class="active"<%}%> line. I do not know how to determine what the current actionName is.
Any suggestions on how to do this? Or, if I'm on completely the wrong track, is there a better way to do this?
I made myself a helper method to handle this type of thing. In the code behind of my master page (could be pushed of to an extension method ... probably a better approach), I put the following code.
protected string ActiveActionLinkHelper(string linkText, string actionName, string controlName, string activeClassName)
{
if (ViewContext.RouteData.Values["action"].ToString() == actionName &&
ViewContext.RouteData.Values["controller"].ToString() == controlName)
return Html.ActionLink(linkText, actionName, controlName, new { Class = activeClassName });
return Html.ActionLink(linkText, actionName, controlName);
}
Then, I just call it in my page like so:
<%= ActiveActionLinkHelper("Home", "Index", "Home", "selected")%>
Inside a view, you can get the current action name with:
ViewContext.RouteData.Values["action"].ToString()
You can also try to detect which is the current selected tab from its controller name and view name, then add the class attribute.
public static string MenuActionLink(this HtmlHelper helper, string linkText, string actionName, string controllerName)
{
var htmlAttributes = new RouteValueDictionary();
if (helper.ViewContext.Controller.GetType().Name.Equals(controllerName + "Controller", StringComparison.OrdinalIgnoreCase))
{
htmlAttributes.Add("class", "current");
}
return helper.ActionLink(linkText, actionName, controllerName, new RouteValueDictionary(), htmlAttributes);
}
In MVC 3 Razor View Engine, you can do it as:
#{string ctrName = ViewContext.RouteData.Values["controller"].ToString();}
<div id="menucontainer">
<ul id="menu">
<li #if(ctrName == "Home"){<text> class="active"</text>}># Html.ActionLink("Home", "Index", "Home")</li>
<li #if(ctrName == "About"){<text> class="active"</text>}># Html.ActionLink("About Us", "About", "Home")</li>
</ul>
</div>
My sample worked when I have two pages as: Home/About and its controller has same name Index, so I get controller Name for distinction insteed of action. If you want to get action, just replace with following:
#{string ctrName = ViewContext.RouteData.Values["action"].ToString();}
An old question but hopefully someone might find this very helpful.
Put some thing that you can use to identify your page in the ViewBag, I used ViewgBag.PageName
For example, in index.cshtml, put something like
#{
ViewBag.PageName = "Index";
}
Add a class to each link item with a conditional statement to return active if the page being visited has the required value, or return an empty string otherwise. View below for details:
<li class="#((ViewBag.PageName == "Index") ? "active" : "")">Home</li>
<li class="#((ViewBag.PageName == "About") ? "active" : "")">About</li>
<li class="#((ViewBag.PageName == "Contact") ? "active" : "")">Contact</li>
I didn't just test it, I use this method in my projects
To contribute my own answer (tested in MVC4), I took a few best bits of the other answers, fixed a few issues, and added a helper to work with urls that aren't necessarily resolved via Controller & Action (eg. if you have an embedded CMS dealing with some page links, etc.)
The code is also forkable on github: https://gist.github.com/2851684
///
/// adds the active class if the link's action & controller matches current request
///
public static MvcHtmlString MenuActionLink(this HtmlHelper htmlHelper,
string linkText, string actionName, string controllerName,
object routeValues = null, object htmlAttributes = null,
string activeClassName = "active")
{
IDictionary htmlAttributesDictionary =
HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
if (((string)htmlHelper.ViewContext.RouteData.Values["controller"])
.Equals(controllerName, StringComparison.OrdinalIgnoreCase) &&
((string)htmlHelper.ViewContext.RouteData.Values["action"])
.Equals(actionName, StringComparison.OrdinalIgnoreCase))
{
// careful in case class already exists
htmlAttributesDictionary["class"] += " " + activeClassName;
}
return htmlHelper.ActionLink(linkText, actionName, controllerName,
new RouteValueDictionary(routeValues),
htmlAttributesDictionary);
}
///
/// adds the active class if the link's path matches current request
///
public static MvcHtmlString MenuActionLink(this HtmlHelper htmlHelper,
string linkText, string path, object htmlAttributes = null,
string activeClassName = "active")
{
IDictionary htmlAttributesDictionary =
HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
if (HttpContext.Current.Request.Path
.Equals(path, StringComparison.OrdinalIgnoreCase))
{
// careful in case class already exists
htmlAttributesDictionary["class"] += " " + activeClassName;
}
var tagBuilder = new TagBuilder("a")
{
InnerHtml = !string.IsNullOrEmpty(linkText)
? HttpUtility.HtmlEncode(linkText)
: string.Empty
};
tagBuilder.MergeAttributes(htmlAttributesDictionary);
tagBuilder.MergeAttribute("href", path);
return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.Normal));
}
Using MVC3 with a Razor View offers another option:
_Layout.cshtml:
<li class="#ViewBag.NavClassHome">#Html.ActionLink("Home", "Index", "Home")</li>
<li class="#ViewBag.NavClassAbout">#Html.ActionLink("Disclaimer", "About", "Home")</li>
HomeController:
public ActionResult Index() {
ViewBag.NavClassHome = "active";
return View();
}
public ActionResult About() {
ViewBag.NavClassAbout = "active";
return View();
}
If you want to preserve this for a postback as well, you have to assign the ViewBag value here as well:
[HttpPost]
public ActionResult Index() {
ViewBag.NavClassHome = "active";
return View();
}
[HttpPost]
public ActionResult About() {
ViewBag.NavClassAbout = "active";
return View();
}
Tested and working fine for me, but you will have a css class name in your server side code.
This should work using jQuery on the client side of things, uses Google to serve the latest jQuery library:
<script src="http://www.google.com/jsapi" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1");</script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var str=location.href.toLowerCase();
$('#menucontainer ul#menu li a').each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$(this).attr("class","current"); //hightlight parent tab
}
});
});
</script>
I wanted to have a bit more control over my layout, and this is what I did.
Create a LayoutModel that other models inherit:
public abstract class LayoutModel
{
public CurrentPage CurrentPage { get; set; }
}
Create a LayoutAttribute that inherits from ActionFilterAttribute like so:
public class LayoutAttribute : ActionFilterAttribute
{
private CurrentPage _currentPage { get; set; }
public LayoutAttribute(
CurrentPage CurrentPage
){
_currentPage = CurrentPage;
}
public override void OnActionExecuted(ActionExecutedContext filterContext)
{
var result = filterContext.Result as ViewResultBase;
if (result == null || result.Model == null || !(result.Model is LayoutModel)) return;
((LayoutModel)result.Model).CurrentPage = _currentPage;
}
}
Now on the Action or Controller level I can set the current page (and other stuff if I wanted) like this:
[Layout(CurrentPage.Account)]
public class MyController : Controller
{
}
In my layout view I now have access to the current page, and whatever else I add to the LayoutModel.
The fact that your View has to know about your controller's actions is breaking with the MVC pattern. Perhaps your controller could pass some "control" information to the view to ultimately allow it to accomplish the same thing, the only difference is who is in charge.
Like in your controller's action you could:
public ActionResult Index(){
ViewData["currentAction"] = "Index";
//... other code
return View();
}
Then over in your view you could:
<% if( ((string)ViewData["currentAction"]) == "Index" {%> <!- some links --><% } %>
<% if( ((string)ViewData["currentAction"]) == "SomethingElse" {%> <!- some links --><% } %>
However, the more I think about it the more I question why you are using the same View for multiple actions. Is the view that similar?
If the use case justifies it then go with my above suggestion. But otherwise perhaps you could break things out into multiple views (one for each controller action) and the problem solves itself.
Based on the previous answers, here is what my current solution is for the same issue:
In the master page I give each li an id that corresponds to the controller and the action, since this should be known from the ActionLink. I was previously doing this with the page title but this helps with organization.
Site.Master:
<ul id="menu">
<li id="menuHomeIndex" runat="server"><%= Html.ActionLink("Home", "Index", "Home") %></li>
<li id="menuHomeAbout" runat="server"><%= Html.ActionLink("About Us", "About", "Home") %></li>
</ul>
Site.Master.cs:
// This is called in Page_Load
private void SetActiveLink()
{
string action = "" + ViewContext.RouteData.Values["controller"] + ViewContext.RouteData.Values["action"];
var activeMenu = (HtmlGenericControl)Page.Master.FindControl("menu" + action);
if (activeMenu != null)
{
activeMenu.Attributes.Add("class", "selected");
}
}
It's more work than the inline code but I think it's cleaner and also lets you have actions with the same name in different controllers. So if you add more menu items with different controllers, not all actions named Index will be highlighted in the menu.
If anyone sees issues with this approach please let me know.
Using MVC3 with a Razor View, you can implement this like:
<ul id="menu">
#if (ViewContext.RouteData.Values["action"].ToString() == "Index")
{
<li class="active">#Html.ActionLink("Home", "Index", "Home")</li>
}
else
{
<li>#Html.ActionLink("Home", "Index", "Home")</li>
}
#if (ViewContext.RouteData.Values["action"].ToString() == "About")
{
<li class="active">#Html.ActionLink("About", "About", "Home")</li>
}
else
{
<li>#Html.ActionLink("About", "About", "Home")</li>
}
</ul>
And then applying your style of your ".active" class like:
ul#menu li.active
{
text-decoration:underline;
}
Here is the version compatible with the current version of MVC4.
I have rewritten Adam Carr's code as an extension method.
using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Web.Routing;
namespace MyApp.Web {
public static class HtmlHelpers {
/// <summary>
/// Returns an anchor element (a element) that contains the virtual path of the
/// specified action. If the controller name matches the active controller, the
/// css class 'current' will be applied.
/// </summary>
public static MvcHtmlString MenuActionLink(this HtmlHelper helper, string linkText, string actionName, string controllerName) {
var htmlAttributes = new RouteValueDictionary();
string name = helper.ViewContext.Controller.GetType().Name;
if (name.Equals(controllerName + "Controller", StringComparison.OrdinalIgnoreCase))
htmlAttributes.Add("class", "current");
return helper.ActionLink(linkText, actionName, controllerName, new RouteValueDictionary(), htmlAttributes);
}
}
}
Hope this will help.
<ul>
<li class="#(ViewContext.RouteData.Values["Controller"].ToString() == "Home" ? "active" : "")">
<a asp-area="" asp-controller="Home" asp-action="Index"><i class="icon fa fa-home"></i><span>Home</span>
</a>
</li>
</ul>
Try
Should work fine !!!
EDIT : REMOVED IN BETA1
Removed the ViewName property from the ViewContext class.