Question

我有一个带有EF的ASP.NET MVC 4互联网应用程序。

我的模型：订单和订单详细信息： Orders and OrderDetails

我的观点： Order View

问：如何在订单视图中显示订单详情？ （有或没有JS ?;在webgrid或表中？）

Create.cshtml

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

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

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

    <div class="editor-label">
        @Html.LabelFor(model => model.Shipping)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Shipping)
        @Html.ValidationMessageFor(model => model.Shipping)
    </div>
    @*OrderDetails Part - Works only on the Edit part*@
    <table>
        <tr>
            <th>Product</th>
            <th>Unit Price</th>
            <th>Quantity</th>
            <th>Discount</th>
        </tr>
    @foreach (OrderDetails item in Model.OrderDetails.OrderBy(d=>d.Products.ProductName))
    {
        <tr>
            <td>@item.Products.ProductName</td>
            <td>@item.UnitPrice</td>
            <td>@item.Quantity</td>
            <td>@item.Discount</td>
            <td>
                @Html.ActionLink("Edit", "Edit", "OrderDetails", new { id = item.OrderDetailId }, new { }) |
                @Html.ActionLink("Details", "Details", "OrderDetails", new { id = item.OrderDetailId }, new { }) |
                @Html.ActionLink("Delete", "Delete", "OrderDetails", new { id = item.OrderDetailId }, new { })
            </td>
        </tr>  
    }
    </table>

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

Answer 1

您应该使用viewmodels来实现此目的。您不应将业务模型直接暴露给视图。而是使用viewmodels提供另一个抽象级别。

所以，不要改变你的模型。为视图定义视图模型。我不会在viewmodel中包含所有字段。

/* Viewmodel for your Order/Create page */
public class OrderCreate
{
    /* Attributes for your order */
    public string OrderDate          { get; set; }
    public string OrderNo            { get; set; }
    public string Shipping           { get; set; }
    ....
    ....

    /* List that will contain all details */
    public IList<ProductDetail> ProductDetails      { get; set; }

}

/* Viewmodel for each of the products */ 
public class ProductDetail
{
    public string Product            { get; set; }
    public string UnitPrice          { get; set; }
    public string Quantity           { get; set; }
    ....
    ....
}

现在，在您的GET操作中，将此viewmodel返回到您的视图而不是您的商业模式。

//
// GET: /Order/Create

public ActionResult Index()
{
    /* New viewmodel for your view */
    var viewModel = new OrderCreate();
    viewModel.ProductDetails = new List<ProductDetail>();

    /* Assuming the number of products is static */
    for(int i = 0; i < NUMBER_OF_PRODUCTS; i++)
    {
        viewModel.ProductDetails.Add( new ProductDetail() );
    }

    return View(viewModel);
}

使用此viewmodel，您现在可以访问视图中填充的值。当您回发视图以发布操作时，请使用viewmodel中的数据在那里创建您的业务模型。

//
// POST: /Order/Create

[HttpPost]
public ActionResult Index(OrderCreate viewModel)
{
    if(ModelState.IsValid))
    {
        var model = new Order();

        //TODO: Populate model through viewmodel, loop viewModel.ProductDetails

        return RedirectToAction("Index");
    }

    // Model is not valid
    return View(viewMode);
}

一些建议，如果您对将视图模型映射到实际模型感到厌倦，请尝试AutoMapper

希望它有所帮助。

MVC 4中的主 - 细节样式视图

1 个答案: