How to Apply a CSS Class to HTML.Actionlink in ASP.NET MVC

How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?

It is:

<%=Html.ActionLink("Home", "Index", MyRouteValObj, new with {.class = "tab" })%>

In VB.net you set an anonymous type using

new with {.class = "tab" }

and, as other point out, your third parameter should be an object (could be an anonymous type, also).

How do I add a class to an @Html.ActionLink?

You have to use the @ character, since class is a keyword in C#. Here's a link to the MSDN documentation: http://msdn.microsoft.com/en-us/library/dd492124(v=vs.108).aspx

@Html.ActionLink("Link Text", "ActionName", 
         new { controller = "MyController", id = 1 }, 
         new { @class = "my-class" })

How to add css class to Action link in MVC

You can add class to ActionLink like this

@Html.ActionLink("Edit", "Edit", new { id = item.ClientId }, new { @class = "fa fa-edit" }) 
@Html.ActionLink("Delete", "Delete", new { id = item.ClientId }, new { @class = "fa fa-times" })

Add CSS class to Html.ActionLink

Html.ActionLink("Link Name", 
                "ActionName",
                "ControllerName",
                null,
                new { @class = "myCssClass" }
                )

Apply CSS class to HTML Action Link in Razor

Try this:

<li>
    <a href="@Url.Action("Dashboard", "Home")">
        Dashboard <i class="fa fa-dashboard fa-fw"></i> 
    </a>
</li>

@Html.ActionLink not working for css class

You have to write hmtl attributes like this:

@Html.ActionLink("Click Here", "Details", "Product", new { id = item.ProductId }, new { @class = "info"})

Html. ActionLink: Passing CSS class and Id at the same time

So, I tried this to make it work

 <td>@Html.ActionLink("Sprawdź","Details","Home", new { @item.Id }, new {@class = "btn btn-info" })</td>

Created two annonymous classes, the first one passing Id, and second one passing the class. I leave the topic, maybe someone will find this helpful :)

How to add “active” class to Html.ActionLink in ASP.NET MVC

first thing if you click on particular link, your page will be refreshed and active class will be remove, if you use jquery. so you need to manage it using Viewbag.

you need to define value in your controller each action.

// let say you have User controller

public ActionResult Index()
{
   ViewBag.data = "user";
   return View();
}

in your layout you need to check value of that viewbag

<ul class="sidebar-menu tree" data-widget="tree">
    <li class="header" style="color:white;font-weight:bold;">Test Menu</li>
    <li id="money">
        <a href="@Url.Action("Index","Monney")">
            <i class="fa fa-dashboard"></i> <span>Monney</span>
        </a>
    </li>
   <li id="bank">
        <a href="@Url.Action("Index","Bank")">
            <i class="fa fa-dashboard"></i> <span>Bank</span>
        </a>
    </li>
   <li id="user">
        <a href="@Url.Action("Index","User")">
            <i class="fa fa-dashboard"></i> <span>User</span>
        </a>
    </li>
</ul>

<script>
    $(document).ready(function () {
        if ('@ViewBag.data' != null)
        {
           $('#' + '@ViewBag.data').addClass('active');
        }
    });
</script>

---

Related Topics