Master Part Style View in MVC 4

Question

I have an ASP.NET MVC 4 Internet application with EF.

My Model: Orders and OrderDetails:

My opinion:

Q: How can I display my records as an order in my order view? (with or without JS ?; in a webgrid or table?)

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

You must use viewmodels to achieve this. You should not expose your business models directly to scans. Instead, use viewmodels to provide a different level of abstraction.

So, do not change your models at all. Define a presentation model for your presentation. I will not include all fields in the 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; } .... .... } 

Now in your GET action, return this view model to your view instead of your business model.

 // // 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); } 

With this view model, you can now access the values ​​populated by your view. When you publish your opinion for publication, create your business model using the data from the view model.

 // // 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); } 

Some tips if you are bored of comparing your view models with real models, try AutoMapper

Hope this helps.