Lorsque vous créez un nouveau projet MVC, il crée un site.Master avec le balisage suivant:
<li><%: Html.ActionLink("Products", "Index", "Products")%></li>
9 Réponses :
Découvrez Ce blog post
Il montre comment créer une extension HTML que vous appelez à la place de l'habituel Vous pouvez ensuite mettre la mise en forme / en surbrillance que vous souhaitez dans votre CSS Il suffit d'ajouter du code à plutôt que simplement d'un lien. Vous devez définir votre html.actionLink L'extension puis appends Classe = "Sélectionné" à l'élément de liste actuellement actif. sélectionné Classe dans votre CSS puis dans vos vues Ajoutez un à l'aide de instruction en haut. @ ébullitionNAMESPACE.HTMLHELPERS Et utilisez le Menulink au lieu de actionlink @ html.menulink ("Votre élément de menu", "action", "contrôleur")
Remarque: ActionLink est en fait une méthode d'extension elle-même, assurez-vous d'inclure à l'aide de System.Web.MVC.html; Dans votre fichier de code, sinon Visual Studio ne pourra pas le trouver.
Utilisez jetbrains.Annotations Nuget Package pour obtenir un contrôleur et une action en surbrillance dans la vue Razor. [aspmvccontroller] et [aspmvcaction] .
J'ai utilisé cette approche avec un HTMLhelper pour le problème: et pour la vue
Vous aimerez peut-être consulter ma série de commandes de navigation MVC, qui inclut la possibilité de mettre en évidence automatiquement le lien actuel:
Vous pouvez le faire en utilisant des attributs "Données" pour identifier le (s) conteneur (s), puis à l'aide de la classe JQuery Change CSS du lien, comme les suivantes:
<div class="..." data-navigation="true">
<ul class="...">
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
<script>
$(function () {
$("div[data-navigation='true']").find("li").children("a").each(function () {
if ($(this).attr("href") === window.location.pathname) {
$(this).parent().addClass("active");
}
});
});
</script>
Que diriez-vous de DropdownList dans NAVBAR, semble ne pas fonctionner pour cela
Voici un moyen de mettre en œuvre cela comme une assistante MVC:
@NavigationLink("Home", "index", "home")
@NavigationLink("About Us", "about", "home")
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Products", "Index", "Products")</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Archivo<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>@Html.ActionLink("Document Type", "Index", "DocumentTypes")</li>
<li>@Html.ActionLink("Employee", "Index", "Employees")</li>
<li>@Html.ActionLink("Suppliers", "Index", "Suppliers")</li>
</ul>
</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
Merci à @codingbadger pour la solution.
Je devais obtenir mes liens NAV surligné sur plusieurs actions, j'ai donc décidé d'ajouter quelques paramètres de plus contenant les paires d'action du contrôleur et il mettra en surbrillance le lien si L'une de ces combinaisons est également accessible. Et, dans mon cas, la classe de surbrillance devait être appliquée à un élément Je pose mon code ici en espérant que cela aidera quelqu'un à l'avenir: p> Voici la méthode de l'assistance: P>
et, voici un exemple de la façon de l'utiliser: P> LI>
ul> p>
<ul>
@Html.NavLink("Check your eligibility", "CheckEligibility", "Eligibility", "li", "current-page", new Tuple<string, string>[]
{
new Tuple<string, string>("Index", "Eligibility"),
new Tuple<string, string>("RecheckEligibility", "Eligibility")
})
@Html.NavLink("Apply for my loan", "Apply", "Loan", "li", "current-page")
</ul>
/// <summary>
/// The link will be highlighted when it is used to redirect and also be highlighted when any action-controller pair is used specified in the otherActions parameter.
/// </summary>
/// <param name="selectedClass">The CSS class that will be applied to the selected link</param>
/// <param name="otherActions">A list of tuples containing pairs of Action Name and Controller Name respectively</param>
public static MvcHtmlString NavLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string parentElement, string selectedClass, IEnumerable<Tuple<string, string>> otherActions)
{
string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
if ((actionName == currentAction && controllerName == currentController) ||
(otherActions != null && otherActions.Any(pair => pair.Item1 == currentAction && pair.Item2 == currentController)))
{
return new MvcHtmlString($"<{parentElement} class=\"{selectedClass}\">{htmlHelper.ActionLink(linkText, actionName, controllerName)}</{parentElement}>");
}
return new MvcHtmlString($"<{parentElement}>{htmlHelper.ActionLink(linkText, actionName, controllerName)}</{parentElement}>");
}
Première crée une méthode de classe d'assistance et HTML
<a class="nav-link active" href="@Url.Action("Index","Dashboard")">
public ActionResult SignIn(User user)
{
User u = db.Users.Where(p=>p.Email == user.Email & p.Password == user.Password).FirstOrDefault();
if (u == null)
{
return View();
}
var id = u.Id;
Session["id_user"] = id;
return RedirectToAction("Index", "Home");
}