如何将 CSS 类名称添加到 ASP.NET MVC 3 Url.Action 链接？

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

Answer 1

这是我的工作：

我有这门课：

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

那么我的剃须刀看起来像这样：

@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"))

Answer 2

Url.Action 助手只会打印 url 而不是完整的锚点。

您的两个选择是：

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

• 注意在类上使用@符号，因为类是保留关键字

和（使用 Url.Action 帮助器）

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

Answer 3

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

Answer 4

我相信您想改用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>