MVC3 - лучший подход для создания макета столбца из результатов, полученных в скаффолде - PullRequest
Новая
       8

MVC3 - лучший подход для создания макета столбца из результатов, полученных в скаффолде

1 голос
/ 21 ноября 2011

Я прочитал довольно много записей / внешних сайтов, связанных с использованием таблиц или CSS, но мне было интересно, каков наилучший практический подход для макетов, созданных с помощью скаффолдера MVC.

В приведенном ниже коде, очевидно, есть класс div для метки, а другой - для поля, который затем повторяется для стольких пар, сколько у вас есть в представлении.

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

Наилучший ответ - создать таблицу или создать еще два элемента div и контролировать их положение в CSS, создавая два столбца. 

<div class="editor-label">
@Resources.Agency
</div>

<div class="editor-field">
@Html.DropDownListFor(model => model.AgencyId,         ((IEnumerable<PartnerWebWI.Models.Agency>)ViewBag.PossibleAgencies).Select(option => new SelectListItem {
    Text = Html.DisplayTextFor(_ => option).ToString(), 
    Value = option.AgencyId.ToString(),
    Selected = (Model != null) && (option.AgencyId == Model.AgencyId)
}), "Choose...")
@Html.ValidationMessageFor(model => model.AgencyId)

Ответы [ 2 ]

1 голос
/ 21 ноября 2011

Я бы просто сделал это с тегами div.

Имейте один контейнер с div, затем поместите 2 div в него.

Я бы сделал что-то вроде следующего 

    <style type="text/css">
         .container{
             width: 100%;
             height: 100%;
             position: absolute;
             left: 0
             top: 0
          }

          .left{
               width: 20%;
               height: 100%;
               float: left;
          }

          .right{
               width: 80%;
               height: 100%;
               float: right;
          }

    </style>

<div class="container">

<!-- left container-->
<div class="left"></div>

<!--Right container-->
<div class="right"></div>
</div>

Я бы сделал что-то подобное. Простите, если div не совсем такие, как в CSS, но по сути вы делаете все это с помощью тегов div, и настраиваете каждый div-класс или ID в соответствии с тем, какую сторону страницы вы хотите, и настраиваете их ширину / высоту и другие свойства .

0 голосов
/ 03 июля 2012

Просто используйте уже существующие метки и добавьте для них CSS. 

.editor-label
{
    width: 20%;
    height: 100%;
    float: left;
}

.editor-field
{
    width: 80%;
    height: 100%;
    float: right;
}

Затем переместите кнопку Создать за пределы тега <fieldset>.Это код, который нужно переместить: 

<p>
    <input type="submit" value="Create" />
</p>

Вы можете изменить CSS двух полей, чтобы он выглядел еще лучше.

...