Question

我想知道构建像this mockflow layout这样的简单网页的最佳方法是什么。并不是我不熟悉MVC本身。我只是不知道构建页面的常用方法。请参阅以下代码我将如何处理它。注意，我只对viewmodels和views感兴趣。

的ViewModels

public class FoodModel
{
    public CategoryModel CategoryModel { get; set; }
    [Display(Name="Pizzas")]
    public PizzaModel PizzaModel { get; set; }
    [Display(Name="Sandwiches")]
    public SandwichModel SandwichModel { get; set; }
    [Display(Name="Meats")]
    public MeatModel MeatModel { get; set; }
}

public class CategoryModel
{
    public int SelectedCategoryId {get; set; }
    public string RandomField { get; set; }
}

public class PizzaModel
{
    public IList<PizzaRow> PizzaRows {get; set; }
}

public class PizzaRow
{
    public string Name { get; set; }
    public string Ingredients { get; set; }
}

public class SandwichModel
{
    public IList<SandwichRow> SandwichRows {get; set; }
}

public class SandwichRow
{
    public string Name { get; set; }
    public string Ingredients { get; set; }
    public decimal Price { get; set; }
}

public class MeatModel
{
    public IList<MeatRow> MeatRows {get; set; }
}

public class MeatRow
{
    public string Name { get; set; }
    public string Animal { get; set; }
    public int Weight { get; set; }
}

每个模型及其行的Index-view和EditorTemplates。

<!-- ~Views/Food/Index.cshtml -just the nessecary razor-code. don't mind the layout-->
@Model FoodModel

    @Html.EditorFor(x => x.CategoryModel) @*For generating the top bar*@
    <div>@Html.LabelFor(x => PizzaModel)</div>@*For grid name 'Pizzas'*@
    @Html.EditorFor(x => x.PizzaModel)
    <div>@Html.LabelFor(x => SandwichModel)</div>@*For grid name 'Sandwiches'*@
    @Html.EditorFor(x => x.SandwichModel)
    <div>@Html.LabelFor(x => MeatModel)</div>@*For grid name 'Meats'*@
    @Html.EditorFor(x => x.MeatModel)

<!-- ~Views/Food/EditorTemplates/CategoryModel.cshtml -just the nessecary razor-code. don't mind the layout-->
@Model CategoryModel

    @Html.DropDownListFor(x => x.SelectedCategoryId, ViewBag.Categories)
    @Html.DisplayFor(x => x.RandomField)

<!-- ~Views/Food/EditorTemplates/PizzaModel.cshtml -just the nessecary razor-code. don't mind the layout-->
@Model PizzaModel

    <table>
        <thead>
            <tr>
                <th>@Html.LabelFor(x => x.PizzaRows.FirstOrDefault().Name)</th>
                <th>@Html.LabelFor(x => x.PizzaRows.FirstOrDefault().Ingredients)</th>
            </tr>
        </thead>
        Html.EditorFor(x => x.PizzaRows);
    </table>

<!-- ~Views/Food/EditorTemplates/SandwichModel.cshtml -just the nessecary razor-code. don't mind the layout-->
@Model SandwichModel

    <table>
        <thead>
            <tr>
                <th>@Html.LabelFor(x => x.PizzaRows.FirstOrDefault().Name)</th>
                <th>@Html.LabelFor(x => x.PizzaRows.FirstOrDefault().Ingredients)</th>
                <th>@Html.LabelFor(x => x.PizzaRows.FirstOrDefault().Price)</th>
            </tr>
        </thead>
        Html.EditorFor(x => x.SandwichRows);
    </table>


<!-- ~Views/Food/EditorTemplates/MeatModel.cshtml -just the nessecary razor-code. don't mind the layout-->
@Model MeatModel

    <table>
        <thead>
            <tr>
                <th>@Html.LabelFor(x => x.PizzaRows.FirstOrDefault().Name)</th>
                <th>@Html.LabelFor(x => x.PizzaRows.FirstOrDefault().Animal)</th>
                <th>@Html.LabelFor(x => x.PizzaRows.FirstOrDefault().Weight)</th>
            </tr>
        </thead>
    Html.EditorFor(x => x.MeatRows);
    </table>


<!-- ~Views/Food/EditorTemplates/PizzaRow.cshtml -just the nessecary razor-code. don't mind the layout-->
@Model PizzaRow

    <tr>
        <td>@Html.DisplayFor(x => x.Name)</td>
        <td>@Html.DisplayFor(x => x.Ingredients)</td>
    </tr>

<!-- ~Views/Food/EditorTemplates/SandwichRow.cshtml -just the nessecary razor-code. don't mind the layout-->
@Model SandwichRow

    <tr>
        <td>@Html.DisplayFor(x => x.Name)</td>
        <td>@Html.DisplayFor(x => x.Ingredients)</td>
        <td>@Html.DisplayFor(x => x.Price)</td>
    </tr>

<!-- ~Views/Food/EditorTemplates/MeatRow.cshtml -just the nessecary razor-code. don't mind the layout-->
@Model MeatRow

    <tr>
        <td>@Html.DisplayFor(x => x.Name)</td>
        <td>@Html.DisplayFor(x => x.Animal)</td>
        <td>@Html.DisplayFor(x => x.Weight)</td>
    </tr>

这会是一个不错的方法，还是使用那些编辑器代替Partials的傻瓜。或许还有其他建议和提示。感谢您的时间和建议。

Answer 1

我唯一的评论是你似乎正在使用EdtiorTemplates来显示数据......请改用DisplayTemplates。您可能还应该在第一个项目上使用DisplayNameFor()作为表头而不是LabelFor。这就是DisplayNameFor ......好吧.. for。

简单的MVC5网页架构

1 个答案: