如何在ASP.NET MVC 3的Url.Action链接中添加CSS类名？

Question

在ASP.MVC 3或4（使用Razor），如何将CSS类应用于Url.Action（）帮助器方法？是否可能？

期望的结果：

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

我已经完成了这个步骤：

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

更新：感谢大家。我犯了一些错误，应该为以后的读者（很可能是我自己）澄清这些错误。我希望我能给你们多个人以赞誉。

a) new {page} - 不要这样做。它会产生不想要的输出。我是指：ViewBag.page或ViewBag.pageNum。

b) 正如你们中的一些人指出的那样，我需要使用Html.ActionLink()而不是我一直在成功使用的Url.Action()，直到我切换到生成完整标记而不仅仅是URL。

我确认以下内容按预期工作：

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

- Dan Sorensen

---

在 new 中添加类似这样的内容：@Url.Action("Index", "Home", new { page, className="foo" }) - MilkyWayJoe

@MilkyWayJoe，我认为应该是 new { @class= '...' }，对吧？ - asawyer

@MilkyWayJoe：我认为这将在URL中添加&class=foo。下面的答案似乎是我需要使用ActionLink。 - Dan Sorensen

抱歉各位，我午餐后肯定需要一杯咖啡，正如我之前所说的那样，它不是className。 - MilkyWayJoe

Answer 1

我相信您想要使用一个ActionLink，这将允许您添加任何属性。

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

输出：

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

或者您可以手动完成它。

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

- Erik Philips

---

如果您需要在<a>标签内嵌套另一个标签（例如，通过字体呈现图标的<span>标签），那么Erik上面提到的第二种方法（手动方式）是正确的选择。有关更多信息，请参见Putting HTML inside Html.ActionLink()，plus No Link Text。 - Dan Robinson

Answer 2

Url.Action并不会创建任何HTML元素，它只是创建一个URL，这就是为什么它被称为Url.Action，而不是Html.Action...(Html.Action是完全不同的东西)。

如果你想在使用Url.Action的链接上添加CSS，只需要这样做：

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

或者，您可以使用Html.ActionLink

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

- Erik Funkenbusch

Answer 3

Url.Action助手将仅打印URL而不是完整的锚点。

您有两个选项：

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

• 请注意在类名中使用@符号，因为class是一个保留关键字

并且（使用Url.Action助手）

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

- Michael Gattuso

Answer 4

这是我的做法：

我有这个类：

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);
    }
}

使用这个扩展方法：

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;
    }
}

那么我的 Razor 看起来像这样：

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

这可能看起来有些过度，但实际上非常好用，因为它可以让你以一种流畅、有意义的方式链接添加元素属性/值，让读者感到舒适。

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

- asawyer

---

看起来你有点重建了TagBuilder。 - Erik Philips

@ErikPhilips 哇，看看那个。如果早些知道这个方法就好了！天啊，已经是9年前的事情了。 - asawyer