title: Master-details style view in MVC 4
body: <p>I have an ASP.NET MVC 4 internet application with EF.</p>
  
  <p>My model: Orders and OrderDetails:
  <img src="https://i.stack.imgur.com/vj0op.jpg" alt="Orders and OrderDetails"></p>
  
  <p>My View:
  <img src="https://i.stack.imgur.com/2AyXN.jpg" alt="Order View"></p>
  
  <p><strong>Q: How can I display my orderdetails records in my order view?</strong>
  (with or without JS?; in a webgrid or a table?)</p>
  
  <p><em>Create.cshtml</em></p>
  
  <pre><code>    &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.OrderDate)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.OrderDate)
          @Html.ValidationMessageFor(model =&gt; model.OrderDate)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.OrderNo)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.OrderNo)
          @Html.ValidationMessageFor(model =&gt; model.OrderNo)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Total)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.Total)
          @Html.ValidationMessageFor(model =&gt; model.Total)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Shipping)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.Shipping)
          @Html.ValidationMessageFor(model =&gt; model.Shipping)
      &lt;/div&gt;
      @*OrderDetails Part - Works only on the Edit part*@
      &lt;table&gt;
          &lt;tr&gt;
              &lt;th&gt;Product&lt;/th&gt;
              &lt;th&gt;Unit Price&lt;/th&gt;
              &lt;th&gt;Quantity&lt;/th&gt;
              &lt;th&gt;Discount&lt;/th&gt;
          &lt;/tr&gt;
      @foreach (OrderDetails item in Model.OrderDetails.OrderBy(d=&gt;d.Products.ProductName))
      {
          &lt;tr&gt;
              &lt;td&gt;@item.Products.ProductName&lt;/td&gt;
              &lt;td&gt;@item.UnitPrice&lt;/td&gt;
              &lt;td&gt;@item.Quantity&lt;/td&gt;
              &lt;td&gt;@item.Discount&lt;/td&gt;
              &lt;td&gt;
                  @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 { })
              &lt;/td&gt;
          &lt;/tr&gt;  
      }
      &lt;/table&gt;
  
      &lt;p&gt;
          &lt;input type="submit" value="Create" /&gt;
      &lt;/p&gt;
  </code></pre>