Question

为了修改使用@Html.EditorFor(m => m.SomeAttribute)时显示的样式，我想知道如何覆盖默认的CSS类，而不为模型的每个属性数据类型声明一个新类。换句话说。

我不想这样做：

  @Html.LabelFor(m => m.ddlStationId, new {@class="label"})
  @Html.EditorFor(m => m.ddlStationId, new { ReadMethod = "Read", ReadController = "Receiver",@class="combobox" })
  @Html.EditorFor(m => m.txbBrandName,new {@class="textbox"})

众所周知，EditorFor（）根据数据类型有不同的行为，所以我想知道这个类的位置。

我通过使用UIHint类作为装饰器并定义了EditorTemplate来做了一些事情，但是并没有允许我覆盖主CSS。重要的是要说我使用 Kendo UI 框架。一些可能相关的额外信息。

Answer 1

除非您覆盖默认模板，否则没有“默认”类。根据您的DataAnnotations，显示的值的行为可能不同（格式化字符串，也许您有一个模板，在文本输入上放置一个日期选择器），但以下每个输出在MVC中是一致的。

@Html.LabelFor(x=>x.Property)

HTML输出

<label for="Property">Property Value</label>

对于字符串属性

@Html.EditorFor(x=>x.SomeStringProperty)

HTML输出

<input type="text" id="SomeStringProperty" name="SomeStringProperty" value=""/>

最后，布尔属性

@Html.EditorFor(x=>x.SomeBoolProperty)

HTML输出

<input type="checkbox" id="SomeBoolProperty" name="SomeBoolProperty"/>

鉴于此，然后在样式表中，您需要为不基于类或ID的顶级HTML元素创建类。这样的例子可能是

<style>
  <!--apply to all labels -->
  label { position: absolute; text-align:right; width:130px; }
  <!--apply to all labels with class check-->
  label.check { font-weight:bold;padding-left:10px }
  <!-- apply to all input and textarea tags-->
  input, textarea { margin-left: 140px; }
  <!-- apply to all input with class special-->
  input.special { font-weight: bold }
</style>

如果查看基本MVC模板附带的默认样式表，您可能会看到类似于我上面发布的内容。您可以使用自定义类编辑这些内容。

Answer 2

谢谢汤米！我做了类似的事情，但是使用了UIhint ......所以，当我声明一个属性时，我根据数据类型设置了一些装饰器，并且我使用了Css类。例如：

[Required]
[Display(Name = "Nombre")]
[UIHint("String")]
public string txbName
{
    get;
    set;
}

并且，在编辑模板上：

@model object 

@Html.TextBoxFor(model => model, new {@class="k-textbox",style="min-width:200px;" })

最后，定义了CSS类“k-textbox”

.controls-row .k-textbox {
    margin: 0 auto;
    clear: left;
    display: inline-block;
}

我喜欢这个解决方案，因为我允许我在解决方案中为所有文本框应用此标记...因为我的具体情况是我想要做的：

<div class="controls-row">
     @Html.LabelFor(model => model.txbName) //it shows "Nombre"
     @Html.EditorFor(m => m.txbName) //it declares an editor for string type
</div>

感谢您的回答！：）

MVC：哪个CSS类实现Html.EditorFor（）方法？

2 个答案: