Очистка asp.net mvc2 автоматически сгенерированной формы HTML -css?

Question

У меня есть какой-то ASP.NET (MVC2) автоматически сгенерированный html, который создает формы, выглядящие так:

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

Это потому, что каждый из выпадающих списков является спискомстрок, в этом раскрывающемся списке есть строка long / short.

Я хочу сделать так, чтобы они были одинакового размера или хотя бы каким-то образом очистить эту форму.

Я предполагаю, что могу проверить визуализированный html и использовать css для этого, возможно.

Любые предложения / код css?

Приветствия

РЕДАКТИРОВАТЬ :

Таким образом, похоже, что для использования метаданных в классах используется шаблон редактора.

Как это сделать, если вы использовали Модель данных сущностей (и она для меня вся), а у меня есть DataModel.edmx и DataModel.Designer.cs - куда идут метаданные?

Answer 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; }

Etc.

Надеюсь, это поможет!

P.S. Если вам нужна дополнительная информация о стиле - проверьте http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Answer 2

Более простой способ сделать их все единообразными - использовать селектор, который захватывает все ваши поля со списком, например:

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

Здесь - хорошая статья о селекторах CSS.

Answer 3

Звуки, которые вы хотите создать пользовательский шаблон редактора .

Таким образом, вы можете сказать:

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

Который затем отобразит представление, привязанное к объекту клиента.

Здесь обсуждается SO 101 для EditorFor / DisplayFor / PartialView здесь .

Другое (несколько болезненное) решение - отредактировать шаблон представления.

Здесь есть запись в блоге здесь