【问题标题】:asp.net mvc adding css to editorfor?asp.net mvc 将 css 添加到 editorfor?
【发布时间】:2011-03-26 00:43:57
【问题描述】:

我想从 MVC 更改“编辑器”文本框的样式,特别是我想让文本框更大。

我尝试了几种添加 css 的方法,但无济于事。

包括:

<td class="myCss"><%=Html.EditorFor(x => x.NickName)%></td>

<td class="myCss"><%=Html.EditorFor(x => x.NickName, new { @class = "myCss" })%></td>

请帮忙!

【问题讨论】:

标签: html asp.net-mvc


【解决方案1】:

罗伯,

从您的问题中很难知道您是在项目中寻找“通用”解决方案还是特定解决方案。因此,我将讨论泛型 - 一次有效,无处不在的解决方案。

这需要采取一些步骤(约定优于配置)。基本上这是需要的:

  • 在下创建新文件夹 'views->shared called Editor Templates'
  • 创建新的 usercotrol (ascx) 文件 在名为'string.ascx'的下面

现在,按照以下方式定义 ascx 文件:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<div class="editor-label">
    <%= Html.LabelFor(model => model) %>
</div>
<div class="new-editor-field">
    <%= Html.TextBoxFor(model => model) %>
    <%= Html.ValidationMessageFor(model => model) %>
</div>

这将使所有基于“字符串”的 EditorFor() 调用都使用此“模板”。只需让“new-editor-field”类反映该字段所需的 css 样式即可。显然,根据您自己的要求烹饪(即您可能不想要 LabelFor tat 等)

希望这会有所帮助——尽管我不得不说,这只是实现此目的的几种方法之一(但这是我的首选方法)。

享受

吉姆

【讨论】:

    【解决方案2】:

    您可以使用以下内容,而不是要求您的输入字段直接应用该类:

    <div class="editor-field myCss">
        @Html.EditorFor(model => model.Nickname)
    </div>
    

    这会产生大致如下的 HTML

    <div class="editor-field myCss">
        <input class="text-box single-line" data-val="true" id="Nickname" name="Nickname" type="text" value="">
    </div>
    

    然后只需使用 CSS 规则来适当地设置样式

    .myCss input.text-box {font-size: 2em;}

    【讨论】:

    • 如果您使用的是带有预先提供的 Css 类的框架。您确实需要在 editorfor 中添加一个类(因此 textboxfor 似乎是解决方案。)
    【解决方案3】:

    试试这个

    <%= Html.TextBoxFor(x => x.NickName, new { @class = "myCss" })%>
    

    <%= Html.TextAreaFor(x => x.NickName, new { cols = "40%", @class = "myCss" })%>
    

    现在您可以定义您的属性,因为 MVC 知道要使用什么类型 (TextArea)。

    【讨论】:

    • 我对 1 投了反对票,因为他明确表示他想改变 EditorFor 的行为,而不是 TextBoxFor。
    • 我对原始问题发表了评论,询问EditorFor 是否作为要求
    【解决方案4】:

    试试这个

    @Html.EditorFor(p => p.Name, new { htmlAttributes = new{ @class ="my-css-class"} })
    

    【讨论】:

      【解决方案5】:

      将 EditorFor 的结果放置在带有某些类属性的 div 中,并在此类的样式定义中,使用 !important 指令强制接受该 div 内任何内容的所需值。

      【讨论】:

      • 这在 MVC4 中对我不起作用。 DIV 上的 style 属性还是不取。
      【解决方案6】:

      试试这个,

      https://stackoverflow.com/a/4249988/505474

      从上面的链接复制,

      @model DateTime?
      
      @Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" })
      

      它对我有用...

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-01-19
        • 1970-01-01
        • 1970-01-01
        • 2022-12-18
        • 1970-01-01
        • 1970-01-01
        • 2015-02-05
        • 1970-01-01
        相关资源
        最近更新 更多