How to add CSS class name to ASP.NET MVC 3 Url.Action link?

Question

In ASP.MVC 3 or 4 (using Razor), how do you apply the CSS class to the Url.Action () helper method? Is it possible?

Desired Result:

<a href="home\index?page=2" class="FOO">BAR</a> 

I got this far:

 @Url.Action("Index", "Home", new { page }) 

---

UPDATE: Thanks to everyone. I made a couple of mistakes that I should clarify for future readers (most likely I). I would like to give more than a loan to you.

a) new {page} - do not do this. This will result in an unwanted exit. I meant: ViewBag.page or ViewBag.pageNum

b) As some of you have pointed out, I need Html.ActionLink (), not Url.Action (), which I successfully used until I switched to creating a full tag, and not just a URL.

I confirmed that the following works as desired:

 @Html.ActionLink("BAR", "Index", "Home", new { ViewBag.PageNum }, new { @class = "FOO" }) 

Answer 1

I believe you want to use ActionLink . This will allow you to add any attributes you want.

 @Html.ActionLink("BAR", "Index", "Home", new { page }, new { @class = "FOO" }) 

exit:

 <a href="home/index?page=2" class="FOO">BAR</a> 

or you can do it manually

 <a href="@Url.Action("Index", "Home", new { page })" class="FOO">BAR</a> 

Answer 2

Url.Action does not create any html element, it only creates a URL, so it is called Url.Action, not Html.Action ... (Html.Action is another).

If you want css to the link in which you use Url.Action, just do the following:

 <a href="@Url.Action("Action", "Controller")" class="myclass">My Link<a> 

Alternatively you can use Html.ActionLink

 @Html.ActionLink("My Link", "Action", "Controller", null, new { @class="myclass" }) 

Answer 3

The Url.Action helper will simply print the URL, not the full anchor.

Your two options:

 @Html.ActionLink("BAR", "index","home", new { @class = "FOO" }) 

• note the use of the @ symbol in the class, as the class is a reserved keyword

and (using the Url.Action helper)

 <a href="@Url.Action("Index", "Home", new { page })" class="FOO">BAR</a> 

Answer 4

That's what I'm doing:

I have this class:

 public class HtmlValues : Dictionary<string,object> { public HtmlValues Class(string ClassName) { if (this.ContainsKey("class")) { ClassName = String.Format("{0} {1}", this["class"], ClassName); this.Remove("class"); } return this.WithValue("class", ClassName); } public HtmlValues Name(string Name) { return this.WithValue("name", Name); } public HtmlValues Style(string Style) { return this.WithValue("style", Style); } public HtmlValues MaxLength(int Length) { return this.WithValue("maxlength", Length.ToString()); } public HtmlValues RTL() { return this.WithValue("dir", "rtl"); } public HtmlValues With(string Attribute, string Value) { return this.WithValue(Attribute, Value); } public static HtmlValues WithClass(string CssClass) { return new HtmlValues().Class(CssClass); } public HtmlValues Data(string key, string value) { return this.WithValue("data-" + key, value); } } 

Using this extension method:

 public static class Extensions { public static T WithValue<T>(this T dict, string key, object value) where T : IDictionary<string, object> { dict.Add(key, value); return dict; } } 

Then my Razor looks like this:

 @Html.TextBoxFor(model => model.SomeProperty, HtmlValues.WithClass("SomeClass")) 

This may seem redundant, but in practice it is pretty good, as it allows the chain to add attributes / values ​​to the element in a pleasant, understandable for the reader style.

 @Html.TextBoxFor(model => model.SomeProperty, HtmlValues.WithClass("SomeClass") .Class("someotherClass") .Data("Some-Jquery-Data-Thing") .With("Nonstandard-Attribute","Its-Value"))