4

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

4 回答 4

13

我相信您想改用 an 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>
于 2012-05-14T18:43:45.710 回答
6

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" })
于 2012-05-14T18:47:29.890 回答
1

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>
于 2012-05-14T18:48:27.440 回答
0

这就是我所做的：

我有这堂课：

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"))
于 2012-05-14T18:45:08.497 回答