清理asp.net mvc2自动生成的html表单-css？答案

【问题标题】：Cleaning up an asp.net mvc2 autogenerated html form -css?清理asp.net mvc2自动生成的html表单-css？
【发布时间】：2010-11-10 00:15:29
【问题描述】：

我有一些 ASP.NET (MVC2) 自动生成的 html，它创建的表单如下所示：

这是因为说每个下拉列表都是一个字符串列表，该下拉列表中的某些字符串是长/短的。

我想要做的是让它们的大小都一样，或者至少以某种方式清理这个表格。

我猜我可以检查渲染的 html，并在上面使用 css 来完成这项工作。

有什么建议/css 代码吗？

干杯

编辑：

所以看来要使用编辑器模板，你需要将元数据添加到类中。

如果您使用了实体数据模型（并且它都是为我生成的）并且我有一个 DataModel.edmx 和 DataModel.Designer.cs，您将如何做到这一点 - 元数据标签在哪里？

【问题讨论】：

您可能不应该将模型类传递给您的编辑器模板。相反，您应该创建 ViewModel 类，设置您想要的所有 DataAnnotations，然后使用 AutoMapper 将这些 ViweModel 映射到您的 Model 类。
我同意@ewwwyn。尝试养成每个 View 都有一个 ViewModel 的习惯，并将模型类添加到 ViewModel 中。
我明白了...为每个视图使用视图模型很有意义并且很高兴，但我认为我需要在实际类而不是视图模型类中定义数据注释等...是否有任何教程如何“使用 AutoMapper 将这些 ViewModel 映射到您的模型类”。 ?

【解决方案1】：

是的。最好将类添加到您的输入字段：

<%: Html.TextBoxFor(m => m.FirstName, new { @class = "form-input-w100" }) %>

然后，在一个 css 文件中，你可以指定一个宽度：

input.form-input-w100 { width: 100px; }

如果您想保持对表单样式的精细控制，我建议您远离默认的编辑器模板。它们对 css 不是超级友好。或者，您可以创建自己的风格友好的编辑器模板（如下所述：http://www.weirdlover.com/2010/07/15/the-big-boy-mvc-series-part-24-dear-editortemplates-are-we-done-posting-yet/）。

而且，最重要的是，您可以在表单中的所有对象上强制设置宽度，即使表单没有很好地标记，但我不推荐这种方法。反正我给你：

#pageArea form input[type=textbox] { width: 100px; }
#pageArea form select { width: 140px; }

等等

希望有帮助！

【讨论】：

【解决方案2】：

使它们全部统一的更简单方法是使用选择器来抓取所有组合框，例如：

input[type=select] { width: 300px; }

Here 是一篇关于 CSS 选择器的好帖子。

【讨论】：

【解决方案3】：

你想创建一个custom editor template的声音。

这样，你可以说：

<%: Html.EditorFor(x => Model.Customer) %>

然后渲染出绑定到客户对象的视图。

EditorFor/DisplayFor/PartialView 的here 上有一个 SO 讨论。

另一个（有点痛苦的）解决方案是编辑视图模板。

关于那个here有一篇博文

【讨论】：