MVC4 - Как изменить порядок сгенерированных полей, созданных Scaffolding

У меня есть файл .cshtml, созданный каркасом MVC4, который выглядит примерно так:

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>BicycleSellerListing</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.BicycleManfacturer)
        </div>
        <div class="editor-field">
            @Html.DropDownList("ManufacturerList")
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.BicycleType)
        </div>
        <div class="editor-field">
            @Html.DropDownList("TypeList")
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ListingPrice)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ListingPrice)
            @Html.ValidationMessageFor(model => model.ListingPrice)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Comments)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Comments)
            @Html.ValidationMessageFor(model => model.Comments)
        </div>

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

Вместо того, чтобы создавать метки и столбцы в одном вертикальном столбце, я хотел бы изменить это так, чтобы у меня были метки в одном столбце и поля редактора во втором столбце (более традиционная форма ввода данных). Я новичок в MVC 4 и HTML5 и действительно не знаю, как это сделать. Если бы кто-нибудь мог помочь мне изменить этот код .cshtml для достижения этой цели, я был бы очень благодарен.


html asp.net-mvc scaffolding asp.net-mvc-scaffolding
person Hosea146    schedule 20.02.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вот один из способов использования float:left и :before

http://jsfiddle.net/fdLca/

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

.editor-label:before {
    clear:left;
}

.editor-field {
    float:left;
    width:80%;
}

Чтобы обойти использование: раньше, если вам нужно было поддерживать более старый IE (‹9 ), то вы можете добавить элемент, который используется исключительно для очистки между каждым полем и меткой.

http://jsfiddle.net/fdLca/1/

HTML

<div class="editor-label">
    label1
</div>
<div class="editor-field">
    @Html.DropDownList("ManufacturerList")
</div>

<div class="clear"></div>

CSS

.clear {
    clear:left;
}
person Daniel Imms    schedule 20.02.2013