@using System.Collections;
@using System.Collections.Generic;
@model NorthwindViewModel.OrderViewModel
@{
ViewBag.Title = "Order Entry Detail";
ArrayList orderDetails = new ArrayList();
foreach (var item in Model.OrderDetailsProducts)
{
var orderDetail = new
{
ProductID = item.OrderDetails.ProductIDFormatted,
ProductName = item.Products.ProductName,
Quantity = item.OrderDetails.Quantity,
UnitPrice = item.OrderDetails.UnitPriceFormatted,
QuantityPerUnit = item.Products.QuantityPerUnit,
Discount = item.OrderDetails.DiscountFormatted
};
orderDetails.Add(orderDetail);
}
}
<h4>Order Entry Detail</h4>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label" >Order Number: </div>
<div style="float:left; width:150px; height:25px; font-weight:bold; " > @Model.Order.OrderID</div>
<div style="float:left; width:150px; height:25px; text-align:right; " class="field-label">Customer ID: </div>
<div style="float:left; width:150px; height:25px; "> @Model.Customer.CustomerID</div>
<div style="clear:both;"></div>
<div style="float:left; width:150px; text-align:right; height:25px;" class="field-label" >Order Date: </div>
<div style="float:left; width:150px; height:25px; "> @Model.Order.OrderDate.ToShortDateString()</div>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Customer Name: </div>
<div style="float:left; height:25px; "> @Model.Customer.CompanyName</div>
<div style="clear:both;"></div>
<!--====== Container ======-->
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr class="DataGridHeader">
<td style="width:10%; height:25px">Product ID</td>
<td style="width:30%">Product Description</td>
<td style="width:10%">Quantity</td>
<td style="width:10%">Unit Price</td>
<td style="width:15%">UOM</td>
<td style="width:10%">Discount</td>
<td style="width:15%">Edit Options</td>
</tr>
<tbody data-bind='template: {name: "OrderDetailTemplate", foreach: LineItems}'> </tbody>
</table>
<div data-bind="visible: AddNewLineItem">
<table style="width: 100%">
<tr>
<td style="width: 10%">
<input id="ProductID" type="text" value="" onkeypress="ProductIDEntered(this,event);" style="width: 50px" />
<img alt="Product Inquiry" title="Product Inquiry" style="vertical-align:middle" width="20px" height="20px" onclick="ShowProductInquiryModal()" src="@Url.Content("~/Content/Images/search3.gif")" />
</td>
<td style="width: 30%">
<span id="ProductName"></span>
</td>
<td style="width: 10%">
<input id="Quantity" type="text" value="" style="width: 50px" />
</td>
<td style="width: 10%">
<span id="UnitPrice"></span>
</td>
<td style="width: 15%">
<span id="QuantityPerUnit"></span>
</td>
<td style="width: 10%">
<input id="Discount" type="text" value="" style="width: 50px" />
</td>
<td style="width: 15%">
<img alt="save" title="Add item to order" onclick="AddNewLineItem()" src="@Url.Content("~/Content/Images/icon-floppy.gif")" />
</td>
</tr>
</table>
</div>
<div style="padding: 20px 10px 10px 10px;">
<input id="btnAdd" type="button" onclick="ShowAddLineItem()" value="Add Line Item" />
<input id="btnOrderHeader" type="button" onclick="ShowOrderHeader()" value="Order Header" />
</div>
<div id="dialog-modal" title="Product Inquiry">
<div id="ProductInquiryModalDiv">
</div>
</div>
<div id="OrderDetailsData" style="visibility: hidden; display: none">
@Html.Raw(Json.Encode(orderDetails));
</div>
@Html.Hidden("OrderID", Model.Order.OrderID)
<!--====== Template ======-->
<script type="text/html" id="OrderDetailTemplate">
<tr data-bind="style: { background: viewModel.SetBackgroundColor($data) }">
<td style="height:25px"><div data-bind="text: ProductID"></div></td>
<td><div data-bind="text: ProductName "></div></td>
<td>
<div data-bind="text: Quantity, visible: DisplayMode "></div>
<div data-bind="visible: EditMode" >
<input type="text" data-bind="value: Quantity" style="width: 50px" />
</div>
</td>
<td><div data-bind="text: UnitPrice"></div></td>
<td><div data-bind="text: QuantityPerUnit "></div></td>
<td>
<div data-bind="text: Discount, visible: DisplayMode "></div>
<div data-bind="visible: EditMode" >
<input type="text" data-bind="value: Discount" style="width:50px" />
</div>
</td>
<td>
<div data-bind="visible: DisplayDeleteEditButtons">
<div style="width:25px; float:left"><img alt="delete" data-bind="click: function() { viewModel.DeleteLineItem($data) }" title="Delete item" src="@Url.Content("~/Content/Images/icon-delete.gif")" /></div>
<div style="width:25px; float:left"><img alt="edit" data-bind="click: function() { viewModel.EditLineItem($data) }" title="Edit item" src="@Url.Content("~/Content/Images/icon-pencil.gif")" /></div>
</div>
<div data-bind="visible: DisplayCancelSaveButtons">
<div style="width:25px; float:left"><img alt="save" data-bind="click: function() { viewModel.UpdateLineItem($data) }" title="Save item" src="@Url.Content("~/Content/Images/icon-floppy.gif")" /></div>
<div style="width:25px; float:left"><img alt="cancel edit" data-bind="click: function() { viewModel.CancelLineItem($data) }" title="Cancel Edit" src="@Url.Content("~/Content/Images/icon-pencil-x.gif")" /></div>
</div>
</td>
</tr>
</script>
<div id="MessageBox" data-bind="html: MessageBox"></div>
<div id="DeleteConfirmation" style="visibility:hidden">
<div id="dialog-confirm" title="Delete Confirmation?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
<span id="DeleteConfirmationText"></span>
</p>
</div>
</div>
<form id="OrderEdit" method="post" action="/Orders/OrderEdit">
<input id="OrderID" name="OrderID" type="hidden" />
</form>
<script language="javascript" type="text/javascript">
initialLineItems = jsonParse($("#OrderDetailsData").text());
$("#ProductInquiryModalDiv").html("");
var lineItemDisplay = function () {
this.ProductID;
this.ProductName;
this.Quantity;
this.UnitPrice;
this.QuantityPerUnit;
this.Discount;
this.OriginalQuantity;
this.OriginalDiscount;
this.EditMode;
this.DisplayMode;
this.DisplayDeleteEditButtons;
this.DisplayCancelSaveButtons;
};
// Overall viewmodel for this screen, along with initial state
var viewModel = {
LineItems: ko.observableArray(),
MessageBox: ko.observable(),
AddNewLineItem: ko.observable(false),
SetBackgroundColor: function (currentLineItemData) {
var rowIndex = this.LineItems.indexOf(currentLineItemData);
var colorCode = rowIndex % 2 == 0 ? "White" : "WhiteSmoke";
return colorCode;
},
EditLineItem: function (currentLineItemData) {
var currentLineItem = this.LineItems.indexOf(currentLineItemData);
this.LineItems()[currentLineItem].DisplayMode(false);
this.LineItems()[currentLineItem].EditMode(true);
this.LineItems()[currentLineItem].DisplayDeleteEditButtons(false);
this.LineItems()[currentLineItem].DisplayCancelSaveButtons(true);
},
DeleteLineItem: function (currentLineItemData) {
var currentLineItem = this.LineItems.indexOf(currentLineItemData);
var productName = this.LineItems()[currentLineItem].ProductName();
var productID = this.LineItems()[currentLineItem].ProductID();
ConfirmDeleteLineItem(productID, productName, currentLineItem);
},
DeleteLineItemConfirmed: function (currentLineItem) {
var row = this.LineItems()[currentLineItem];
this.LineItems.remove(row);
},
CancelLineItem: function (currentLineItemData) {
currentLineItem = this.LineItems.indexOf(currentLineItemData);
this.LineItems()[currentLineItem].DisplayMode(true);
this.LineItems()[currentLineItem].EditMode(false);
this.LineItems()[currentLineItem].DisplayDeleteEditButtons(true);
this.LineItems()[currentLineItem].DisplayCancelSaveButtons(false);
this.LineItems()[currentLineItem].Quantity(this.LineItems()[currentLineItem].OriginalQuantity());
this.LineItems()[currentLineItem].Discount(this.LineItems()[currentLineItem].OriginalDiscount());
},
UpdateLineItem: function (currentLineItemData) {
currentLineItem = this.LineItems.indexOf(currentLineItemData);
var lineItem = this.LineItems()[currentLineItem];
UpdateOrderDetail(lineItem, currentLineItem);
},
UpdateOrderDetailComplete: function (currentLineItem, discount) {
this.LineItems()[currentLineItem].DisplayMode(true);
this.LineItems()[currentLineItem].EditMode(false);
this.LineItems()[currentLineItem].DisplayDeleteEditButtons(true);
this.LineItems()[currentLineItem].DisplayCancelSaveButtons(false);
this.LineItems()[currentLineItem].OriginalQuantity(this.LineItems()[currentLineItem].Quantity());
this.LineItems()[currentLineItem].OriginalDiscount(discount);
this.LineItems()[currentLineItem].Discount(discount);
}
}
ko.applyBindings(viewModel);
for (i = 0; i < initialLineItems.length; i++) {
var newLineItem = CreateLineItem(initialLineItems[i]);
viewModel.LineItems.push(newLineItem);
}
function CreateLineItem(LineItem) {
var lineItem = new lineItemDisplay();
lineItem.ProductID = ko.observable(LineItem.ProductID);
lineItem.ProductName = ko.observable(LineItem.ProductName);
lineItem.Quantity = ko.observable(LineItem.Quantity);
lineItem.OriginalQuantity = ko.observable(LineItem.Quantity);
lineItem.OriginalDiscount = ko.observable(LineItem.Discount);
lineItem.UnitPrice = ko.observable(LineItem.UnitPrice);
lineItem.QuantityPerUnit = ko.observable(LineItem.QuantityPerUnit);
lineItem.Discount = ko.observable(LineItem.Discount);
lineItem.BackgroundColor = ko.observable(LineItem.BackgroundColor);
lineItem.EditMode = ko.observable(false);
lineItem.DisplayMode = ko.observable(true);
lineItem.DisplayDeleteEditButtons = ko.observable(true);
lineItem.DisplayCancelSaveButtons = ko.observable(false);
return lineItem;
}
function ShowProductInquiryModal() {
var url = "/Products/BeginProductInquiry";
$.post(url, null, function (html, textStatus) {
ShowProductInquiryModalComplete(html);
});
}
function ShowProductInquiryModalComplete(productInquiryHtml) {
$("#ProductInquiryModalDiv").html(productInquiryHtml);
$("#dialog-modal").dialog({
height: 500,
width: 900,
modal: true
});
setTimeout("ProductInquiryInitializeGrid()", 1000);
}
function GetProductInformation(productID) {
$("#dialog-modal").dialog('close');
$("#ProductInquiryModalDiv").html("");
var ProductLookup = function () {
this.ProductID;
};
var productLookup = new ProductLookup();
productLookup.ProductID = productID;
var url = "/Products/GetProductInformation";
$.post(url, productLookup, function (results, textStatus) {
GetProductInformationComplete(results);
});
}
function GetProductInformationComplete(results) {
if (results.ReturnStatus == true) {
$("#ProductID").val(results.ViewModel.Product.ProductIDFormatted);
$("#ProductName").html(results.ViewModel.Product.ProductName);
$("#QuantityPerUnit").html(results.ViewModel.Product.QuantityPerUnit);
$("#UnitPrice").html(results.ViewModel.Product.UnitPriceFormatted);
$("#Quantity").focus();
}
else {
viewModel.MessageBox(results.MessageBoxView);
}
}
function LineItem() {
this.OrderID;
this.ProductID;
this.Quantity;
this.Discount;
this.RowIndex;
};
function ShowAddLineItem() {
viewModel.AddNewLineItem(true);
}
function AddNewLineItem() {
var newLineItem = new LineItem();
newLineItem.OrderID = $("#OrderID").val();
newLineItem.ProductID = $("#ProductID").val();
newLineItem.Quantity = $("#Quantity").val();
newLineItem.Discount = $("#Discount").val();
var url = "/Orders/AddOrderDetailLineItem";
$.post(url, newLineItem, function (results, textStatus) {
AddNewLineItemComplete(results);
});
}
function AddNewLineItemComplete(results) {
if (results.ReturnStatus == true) {
var lineItem = new lineItemDisplay();
lineItem.ProductID = results.ViewModel.OrderLineItem.OrderDetails.ProductIDFormatted;
lineItem.ProductName = results.ViewModel.OrderLineItem.Products.ProductName;
lineItem.Quantity = results.ViewModel.OrderLineItem.OrderDetails.Quantity;
lineItem.UnitPrice = results.ViewModel.OrderLineItem.OrderDetails.UnitPriceFormatted;
lineItem.QuantityPerUnit = results.ViewModel.OrderLineItem.Products.QuantityPerUnit;
lineItem.Discount = results.ViewModel.OrderLineItem.OrderDetails.DiscountFormatted;
var newLineItem = CreateLineItem(lineItem);
viewModel.LineItems.push(newLineItem);
$("#ProductID").val("");
$("#ProductName").html("");
$("#Quantity").val("");
$("#Discount").val("");
$("#UnitPrice").html("");
$("#QuantityPerUnit").html("");
}
viewModel.MessageBox(results.MessageBoxView);
}
function UpdateOrderDetail(currentLineItem, rowIndex) {
var updateLineItem = new LineItem();
updateLineItem.OrderID = $("#OrderID").val();
updateLineItem.ProductID = currentLineItem.ProductID(),
updateLineItem.Quantity = currentLineItem.Quantity();
updateLineItem.Discount = currentLineItem.Discount();
updateLineItem.RowIndex = rowIndex;
var url = "/Orders/UpdateOrderDetailLineItem";
$.post(url, updateLineItem, function (results, textStatus) {
UpdateOrderDetailComplete(results);
});
}
function UpdateOrderDetailComplete(results) {
if (results.ReturnStatus == true) {
discount = results.ViewModel.OrderLineItem.OrderDetails.DiscountFormatted;
viewModel.UpdateOrderDetailComplete(results.RowIndex, discount);
}
viewModel.MessageBox(results.MessageBoxView);
}
function ConfirmDeleteLineItem(productID, productName, currentLineItem) {
$("#DeleteConfirmationText").html("Are you sure you want to delete <b>" + productID + " - " + productName + "</b> from this order?");
$("#dialog-confirm").dialog({
resizable: false,
height: 200,
width: 600,
modal: true,
buttons: {
"Delete line item": function () {
DeleteLineItem(productID, productName, currentLineItem);
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
function DeleteLineItem(productID, productName, currentLineItem) {
var orderID = $("#OrderID").val();
var postData = {
OrderID: orderID,
ProductID: productID,
ProductName: productName,
RowIndex: currentLineItem
};
var url = "/Orders/DeleteOrderDetailLineItem";
$.post(url, postData, function (data, textStatus) {
DeleteLineItemComplete(data, textStatus);
});
}
function DeleteLineItemComplete(results) {
viewModel.MessageBox(results.MessageBoxView);
if (results.ReturnStatus == true) {
viewModel.DeleteLineItemConfirmed(results.RowIndex);
}
}
function ShowOrderHeader() {
$("#OrderEdit #OrderID").val($("#OrderID").val());
$("#OrderEdit").submit();
}
function ProductIDEntered(element, e) {
var key;
if (window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
if (key == 13) {
viewModel.MessageBox("");
event.keyCode = 0;
var productID = $("#ProductID").val();
GetProductInformation(productID)
}
}
</script>