【问题标题】:How to inject a css class into an MvcHtmlString?如何将 css 类注入 MvcHtmlString?
【发布时间】:2013-04-05 10:39:19
【问题描述】:

是否可以将 css 类注入到封装在 MvcHtmlString 中的 HTML 元素中?

作为我正在构建的框架的一部分,我的任务是为表单元素(TextBoxTextBoxFor<> 等)创建我自己版本的 MVC 扩展方法,但需要注意以下几点:

  • 他们必须创建正确的 HTML 标记,包括 CSS 类,以匹配已经为网站设计的样式。在大多数情况下,这只是意味着添加一个特定的类。
  • 它们必须尽可能忠实于 MVC 扩展方法,以便开发人员能够轻松地使用它们

大多数(如果不是全部)MVC 扩展方法返回一个MvcHtmlString,因此模仿该功能的最简单方法是直接从我的方法中调用这些方法。我有自己的 Html Helper OuHelper,我的框架正在使用它,因此希望创建例如 TextBox 的开发人员会调用以下内容:

`@Ou.TextBoxFor(m => m.Username)

我希望生成的 Html 像这样呈现:

<input type="text" name="Username" id="Username" class="int-text" />

如果我创建自己的重载版本,就像它们在 MVC 框架中一样,我将能够控制在需要的地方添加额外的 CSS 类,但对于这些方法的 HTML 输出的如此小的变化来说,这似乎有点过头了。我需要提供所有重载的等效实现(仅对于TextBox,当您计算通用和非通用版本时,大约有 12 个)。我想做的是反向TagBuilder(从输出开始并从中创建一个对象,使MergeAttributes之类的东西可用)但我认为这是不可能的。

明确一点:我正在编写的框架代码需要自己添加 css 类,但开发人员应该可以使用我创建的扩展方法添加他们自己的自定义 css 类。这些将根据标准 MVC 框架表单扩展方法的功能添加/附加

【问题讨论】:

    标签: c# css asp.net-mvc-3


    【解决方案1】:

    您目前的系统似乎还不错。您不能注入/覆盖 HtmlHelper 类的默认样式,如果需要,可以查看 HtmlHelper's input extensions here 的源代码。

    我能想到的唯一其他方法是使用扩展方法,就像它在实际的 ASP.NET 源代码中所做的那样。这是一个示例,函数的名称可以是任何您想要的名称,但它需要与 TextBoxFor 不同,因为它具有相同的参数列表。

    public static class HtmlHelperExtensions
    {
        public static MvcHtmlString IntTextFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
        {
            return htmlHelper.TextBoxFor(expression, new { @class = "int-text" });
        }
    }
    

    用法就像常规 MVC 一样,只包含扩展方法的命名空间。

    @using MyProject.Helpers;
    
    @Html.IntTextFor(e => e.Age)
    

    【讨论】:

    • 干杯丹尼尔 - 是的,看起来我会按照这些思路做一些事情。希望避免创建如此多的重载,但我需要提供与 MVC 框架当前提供的相同级别的灵活性。我将创建一些扩展方法并根据需要将类合并到 html 属性中(以便使用我的框架的开发人员也可以在需要时添加他们自己的自定义类)
    【解决方案2】:

    你可以这样做

    @Ou.TextBoxFor(m => m.Username,new{@Class="your class Name"})
    

    或 用于内联样式

    @Ou.TextBoxFor(m => m.Username,new{@style="font-size:10px"})
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-04-26
      • 1970-01-01
      • 1970-01-01
      • 2023-04-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-02-03
      相关资源
      最近更新 更多