Using an additional table in a MVVM Details View - asp.net-mvc

Question

at the moment I have a OrderConfirmationController which has a Details view which displays the records. At the bottom of the Details View I want to add 5 fields from another table that will be displayed in the view but not sure how to add them.
At the bottom of the last table I want to implement a separate table containing the Product_ID, Description, Price, Quantity and Total from a Sales_Order_Line table but don't know how to add it as I can only reference one table using the #model at the start of the view.
Thanks.
Here is my code for the new class I have created:
class OrderConfirmation
{
Sales_Order Bill_to_Customer_Name { get; set; }
Sales_Order Bill_to_Address { get; set; }
Sales_Order Bill_to_Address_2 { get; set; }
Sales_Order Bill_to_City { get; set; }
Sales_Order Bill_to_County { get; set; }
Sales_Order Bill_to_Post_Code { get; set; }
Sales_Order Bill_to_Country_Region_Code { get; set; }
Sales_Order Ship_to_Contact_Name { get; set; }
Sales_Order Ship_to_Address { get; set; }
Sales_Order Ship_to_Address_2 { get; set; }
Sales_Order Ship_to_City { get; set; }
Sales_Order Ship_to_County { get; set; }
Sales_Order Ship_to_Post_Code { get; set; }
Sales_Order Ship_to_Country_Region_Code { get; set; }
Sales_Order_Line Product_ID { get; set; }
Sales_Order_Line Description { get; set; }
Sales_Order_Line Price { get; set; }
Sales_Order_Line Quantity { get; set; }
Sales_Order_Line Total { get; set; }
}
Here is my code for the Details controller:
public ActionResult Details(string documentNo, int documentType)
{
ViewBag.Sales_Order_Line = Sales_Order_Line.Product_ID;
ViewBag.Sales_Order_Line = Sales_Order_Line.Description;
ViewBag.Sales_Order_Line = Sales_Order_Line.Price;
ViewBag.Sales_Order_Line = Sales_Order_Line.Quantity;
ViewBag.Sales_Order_Line = Sales_Order_Line.Total;
// Compound key is used here so require both fields to be included in the SQL.
Sales_Order confirmOrder = _data.Sales_Orders
.Where(x => x.Document_Type == documentType && x.Document_No_ == documentNo)
.FirstOrDefault();
return View(confirmOrder);
}
And this is my View:
#model SPR.Titanium.MultiChannel.ManagementConsolePortal.Models.OrderConfirmation
<link href="~/Content/themes/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
#section Scripts
{
#Scripts.Render("~/bundles/jqueryui");
<script src="~/js/jquery-1.9.1.js"></script>
<script src="~/js/jquery-ui-1.10.3.custom.js"></script>
<script>
$(function () {
$("#accordion").accordion();
})
</script>
}
#{
ViewBag.Title = "Order Confirmation Details";
}
<h2>Order Confirmation</h2>
#using (Html.BeginForm())
{
<div id="accordion">
<div class="editor-field">
Billing Details:
</div>
<div class="editor-field">
<table style="width:100%">
<tr>
<th style="width:20%">Billing Name</th>
<td style="width:30%">#Html.EditorFor(model => model.Bill_to_Customer_Name)</td>
<th style="width:20%">Address</th>
<td style="width:30%">#Html.EditorFor(model => model.Bill_to_Address).</td>
<th style="width:20%">Address 2</th>
<td style="width:30%">#Html.EditorFor(model => model.Bill_to_Address_2).</td>
</tr>
<tr>
<th style="width:20%">City</th>
<td style="width:30%">#Html.EditorFor(model => model.Bill_to_City)</td>
<th style="width:20%">County</th>
<td style="width:30%">#Html.EditorFor(model => model.Bill_to_County).</td>
<th style="width:20%">Post Code</th>
<td style="width:30%">#Html.EditorFor(model => model.Bill_to_Post_Code)</td>
</tr>
<tr>
<th style="width:20%">Country</th>
<td style="width:30%">#Html.EditorFor(model => model.Bill_to_Country_Region_Code)</td>
</tr>
</table>
</div>
<div class="editor-label">
Delivery Details
</div>
<div class="editor-field" aria-readonly="true">
<table style="width:100%">
<tr>
<th style="width:20%">Delivery Name</th>
<td style="width:30%">#Html.EditorFor(model => model.Ship_to_Contact_Name)</td>
<th style="width:20%">Address</th>
<td style="width:30%">#Html.EditorFor(model => model.Ship_to_Address)</td>
<th style="width:20%">Address 2</th>
<td style="width:30%">#Html.EditorFor(model => model.Ship_to_Address_2)</td>
</tr>
<tr>
<th style="width:20%">City</th>
<td style="width:30%">#Html.EditorFor(model => model.Ship_to_City)</td>
<th style="width:20%">County</th>
<td style="width:30%">#Html.EditorFor(model => model.Ship_to_County)</td>
<th style="width:20%">Post Code</th>
<td style="width:30%">#Html.EditorFor(model => model.Ship_to_Post_Code)</td>
</tr>
<tr>
<th style="width:20%">Country</th>
<td style="width:30%">#Html.EditorFor(model => model.Ship_to_Country_Region_Code)</td>
</tr>
</table>
</div>
<div>
#{
var line = (Sales_Order_Line)ViewBag.Sales_Order_Line;
</div>
</div>
}
<div>
#Html.ActionLink("Return to Sales Order List", "Index")
</div>

Answer 1

I just noticed that my first idea wouldn't work as I imagined. But you can use the ViewBag to pass additional values to the view:
Create a new class that has two properties, one of type Sales_Order and one of a class that contains the data from your other table. Use this new class as your #model and you can access them both.
class DetailsViewModel
{
Sales_Order SalesOrder { get; set; }
Sales_Order_Line { get; set; }
}
In your controller:
public ActionResult Details(string documentNo, int documentType)
{
ViewBag.Sales_Order_Line = // get Sales_Order_Line object here
... // the rest of the code as before
}
In your view:
<div>
#{
var line = (Sales_Order_Line)ViewBag.Sales_Order_Line;
...
}
</div>