Tuesday 8 May 2018

Selecting the active link in MVC



Based on selection or opening of the controller action the link will select in MVC like below.




There should you need to provide the css dynamically which is based on the action. You need to create the CSS style.
.activelink {
    color: #ffffff;
    background-color: #de0301;
    border-radius: 10px;
    margin-left: 4px;
}
If you see the below code there we are checking the (ViewContext.RouteData.Values["Controller"].ToString() == "Home"


Now based on the condition either it will assign the blank style or activelink
Home Is the name of the controller which we are working and want the link should redirect.

<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="@(ViewContext.RouteData.Values["Controller"].ToString() == "Home" ? "activelink" : "")">@Html.ActionLink("Home ", "Index", "Home", new { Area = "" },new { })</li>
                    <li class="@(ViewContext.RouteData.Values["Controller"].ToString() == "About" ? "activelink" : "")">@Html.ActionLink("About", "Index", "About",new { Area = "ChhattisgarhRathoreSamaj" },new { })</li>
                    <li class="@(ViewContext.RouteData.Values["Controller"].ToString() == "RathoreSamajDetail" ? "activelink" : "")">@Html.ActionLink("Rathore Details", "Index", "RathoreSamajDetail", new { Area = "ChhattisgarhRathoreSamaj" }, new { })</li>
                    <li class="@(ViewContext.RouteData.Values["Controller"].ToString() == "RathoreSamajNews" ? "activelink" : "")">@Html.ActionLink("News", "Index", "RathoreSamajNews", new { Area = "ChhattisgarhRathoreSamaj" }, new { })</li>
                  
                </ul>
            </div>

Now the output will lokk alike



No comments:

Post a Comment