2010-11-10 46 views
1

我有一些ASP.NET(MVC2)自动生成的HTML中创建看起来像这样的形式:清理一个asp.net mvc2自动生成的html表单-css?

http://www.freeimagehosting.net/uploads/f5807b7cee.png

这是因为,说每个下拉菜单是一个字符串列表,在某些字符串下拉是长/短。

我想要做的就是让它们大小一致,或者至少用某种方式清理这个表单。

我猜我可以检查呈现的HTML,并使用CSS来做这项工作也许。

任何建议/ css代码?

干杯

编辑

所以它似乎使用需要元数据添加到这些类编辑模板。

你怎么做,如果你已经使用实体数据模型(这是一切对我产生的),我有一个DataModel.edmxDataModel.Designer.cs - 哪里的元数据标签去?

+0

您可能不应将模型类传递给您的编辑器模板。相反,您应该创建ViewModel类,设置所需的所有DataAnnotations,然后使用AutoMapper将这些ViweModel映射到您的Model类。 – 2010-11-10 01:03:34

+0

我同意@ewwwyn。试着去养成每个视图都有ViewModel的习惯,并将模型类添加到ViewModel中。 – RPM1984 2010-11-10 02:24:36

+0

我明白了...对每个视图使用视图模型都很有道理和高兴,但是我认为我需要在实际的类中定义数据注解等,而不是viewmodel类...是否有任何关于如何使用AutoMapper进行映射的教程这些视图模型到您的模型类“。 ? – baron 2010-11-10 03:52:26

回答

2

一个博客帖子是。这也可能是最好的类添加到您的输入字段:

<%: 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; } 

等等

希望帮助!

P.S.如果您需要了解更多的造型信息 - 查看http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

1

声音要创建custom editor template

这样的话,你可以说:

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

这将随后呈现出绑定到客户对象的视图。

有关于EditorFor/DisplayFor/PartialView的here的SO讨论。

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

有对here

+0

请参阅我的编辑,我不确定在哪里添加元数据的类... – baron 2010-11-10 00:44:53

2

更简单的方法,使他们所有的制服是使用该抓住你所有的组合框,像这样一个选择:

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

Here是在CSS选择器上的好帖子。