2010-11-10 47 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選擇器上的好帖子。