asp.net-mvc – MVC 4中的主 – 详细信息样式视图

发布时间：2020-12-16 09:52:05 所属栏目：asp.Net 来源：网络整理

导读：我有一个带有EF的ASP.NET MVC 4互联网应用程序. 我的模型：订单和订单详细信息：我的看法：问：如何在订单视图中显示订单详细信息记录？ (有没有JS ?;在webgrid或表中？) Create.cshtml div class="editor-label" @Html.LabelFor(model = model.OrderDate)

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

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

我的看法：

问：如何在订单视图中显示订单详细信息记录？
(有没有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",new { }) |
                @Html.ActionLink("Delete","Delete",new { })
            </td>
        </tr>  
    }
    </table>

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

解决方法

你应该使用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操作中,将此视图模型返回到您的视图而不是您的业务模型.

//
// 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中的数据在那里创建业务模型.

//
// 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

希望能帮助到你.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!