@model NorthwindViewModel.OrderViewModel
@{
ViewBag.Title = "Order Entry - Shipping Information";
}
<h4>Order Entry - Shipping Information</h4>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label" >Order Number: </div>
<div style="float:left; width:400px; height:25px; font-weight:bold; padding: 0px 0px 0px 5px" id="DivOrderNumber" data-bind="text: OrderID"></div>
<div style="clear:both; height:25px"> </div>
<div style="float:left; width:150px; text-align:right;" class="field-label" >Order Date: </div>
<div style="float:left; width:400px; height:25px; "> @Model.Order.OrderDate.ToShortDateString()</div>
<div style="float:left; width:150px; text-align:right;" class="field-label">Required Date: </div>
<div style="float:left; height:25px">
<span data-bind="visible: EditFields">
@Html.TextBox("RequiredDate", @Model.Order.RequiredDate.ToShortDateString(), new Dictionary<string, object> { { "data-bind", "value: RequiredDate" }, { "style", "width:75px" } })
</span>
<span data-bind="visible: ReadOnlyMode">
@Model.Order.RequiredDate.ToShortDateString()
</span>
</div>
<div style="clear:both;"></div>
<div style="float:left; width:150px; height:25px"> </div>
<div style="clear:both;"></div>
<div style="float:left; width:550px">
<div style="float:left; width:150px; height:25px; text-align:right; " class="field-label">Customer ID: </div>
<div style="float:left; width:400px; height:25px; "> @Model.Customer.CustomerID</div>
<div style="clear:both;"></div>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Customer Name: </div>
<div style="float:left; width:400px; height:25px; "> @Model.Customer.CompanyName</div>
<div style="clear:both;"></div>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Customer Address: </div>
<div style="float:left; width:400px; height:25px; "> @Model.Customer.Address</div>
<div style="clear:both;"></div>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Customer City: </div>
<div style="float:left; width:400px; height:25px; "> @Model.Customer.City</div>
<div style="clear:both;"></div>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Customer Region: </div>
<div style="float:left; width:400px; height:25px; "> @Model.Customer.Region</div>
<div style="clear:both;"></div>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Customer Postal Code: </div>
<div style="float:left; width:400px; height:25px; "> @Model.Customer.PostalCode</div>
<div style="clear:both;"></div>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Customer Country: </div>
<div style="float:left; width:400px; height:25px; "> @Model.Customer.Country</div>
</div>
<div style="float:left;">
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Ship Via: </div>
<div style="float:left; width:300px; height:25px">
<span data-bind="visible: EditFields">
<select id="ShipVia" style="width:100%" data-bind="options: Shippers, optionsText: 'CompanyName', optionsValue: 'ShipperID', value: SelectedShipVia, optionsCaption: 'Select a Shipper...'">
</select>
</span>
<span id="DivShipVia" data-bind="visible: ReadOnlyMode, text: ShipperName">
</span>
</div>
<div style="clear:both;"></div>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Ship To Name: </div>
<div style="float:left; width:300px; height:25px; " >
<span data-bind="visible: EditFields">
@Html.TextBox("ShipName", @Model.Order.ShipName, new Dictionary<string, object> { { "data-bind", "value: ShipName" }, { "style", "width:300px" } })
</span>
<span data-bind="visible: ReadOnlyMode, text: OriginalShipName"></span>
</div>
<div style="clear:both;"></div>
<div style="float:left; height:25px; width:150px; text-align:right;" class="field-label">Ship To Address: </div>
<div style="float:left; height:25px; width:300px;" >
<span data-bind="visible: EditFields">
@Html.TextBox("ShipAddress", @Model.Order.ShipAddress, new Dictionary<string, object> { { "data-bind", "value: ShipAddress" }, { "style", "width:300px" } })
</span>
<span data-bind="visible: ReadOnlyMode, text: OriginalShipAddress">
</span>
</div>
<div style="clear:both;"></div>
<div style="float:left; height:25px; width:150px; text-align:right;" class="field-label">Ship To City: </div>
<div style="float:left; height:25px; width:300px;">
<span data-bind="visible: EditFields">
@Html.TextBox("ShipCity", @Model.Order.ShipCity, new Dictionary<string, object> { { "data-bind", "value: ShipCity" }, { "style", "width:300px" } })
</span>
<span data-bind="visible: ReadOnlyMode, text: OriginalShipCity">
</span>
</div>
<div style="clear:both;"></div>
<div style="float:left; height:25px; width:150px; text-align:right;" class="field-label">Ship To Region: </div>
<div style="float:left; height:25px; width:300px; ">
<span data-bind="visible: EditFields">
@Html.TextBox("ShipRegion", @Model.Order.ShipRegion, new Dictionary<string, object> { { "data-bind", "value: ShipRegion" }, { "style", "width:300px" } })
</span>
<span data-bind="visible: ReadOnlyMode, text: OriginalShipRegion">
</span>
</div>
<div style="clear:both;"></div>
<div style="float:left; height:25px; width:150px; text-align:right;" class="field-label">Ship To Postal Code: </div>
<div style="float:left; height:25px; width:300px; ">
<span data-bind="visible: EditFields">
@Html.TextBox("ShipPostalCode", @Model.Order.ShipPostalCode, new Dictionary<string, object> { { "data-bind", "value: ShipPostalCode" }, { "style", "width:300px" } })
</span>
<span data-bind="visible: ReadOnlyMode, text: OriginalShipPostalCode">
</span>
</div>
<div style="clear:both;"></div>
<div style="float:left; height:25px; width:150px; text-align:right;" class="field-label">Ship To Country: </div>
<div style="float:left; height:25px; width:300px; ">
<span data-bind="visible: EditFields">
@Html.TextBox("ShipCountry", @Model.Order.ShipCountry, new Dictionary<string, object> { { "data-bind", "value: ShipCountry" }, { "style", "width:300px" } })
</span>
<span data-bind="visible: ReadOnlyMode, text: OriginalShipCountry">
</span>
</div>
</div>
<div style="clear:both; padding: 5px"> </div>
<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Order Total: </div>
<div style="float:left; width:400px; height:25px; font-weight:bold; "> @Model.Order.OrderTotalFormatted</div>
<div style="clear:both; padding: 5px"> </div>
<input id="btnCreateOrder" type="button" value="Create Order" data-bind="visible: DisplayCreateOrderButton" />
<input id="btnEditOrder" type="button" value="Edit Order" data-bind="visible: DisplayEditOrderButton" />
<input id="btnUpdateOrder" type="button" value="Update Order" data-bind="visible: DisplayUpdateOrderButton" />
<input id="btnOrderDetails" type="button" value="Order Details" data-bind="visible: DisplayOrderDetailsButton" />
<input id="btnCancelChanges" type="button" value="Cancel Changes" data-bind="visible: DisplayCancelChangesButton" />
@Html.Hidden("CustomerID", @Model.Order.CustomerID)
@Html.Hidden("OrderID", @Model.Order.OrderID)
@Html.Hidden("OriginalShipName", @Model.Order.ShipName, new Dictionary<string, object> { { "data-bind", "value: OriginalShipName" } })
@Html.Hidden("OriginalShipAddress", @Model.Order.ShipAddress, new Dictionary<string, object> { { "data-bind", "value: OriginalShipAddress" } })
@Html.Hidden("OriginalShipCity", @Model.Order.ShipCity, new Dictionary<string, object> { { "data-bind", "value: OriginalShipCity" } })
@Html.Hidden("OriginalShipRegion", @Model.Order.ShipRegion, new Dictionary<string, object> { { "data-bind", "value: OriginalShipRegion" }})
@Html.Hidden("OriginalShipPostalCode", @Model.Order.ShipPostalCode, new Dictionary<string, object> { { "data-bind", "value: OriginalShipPostalCode" } })
@Html.Hidden("OriginalShipCountry", @Model.Order.ShipCountry, new Dictionary<string, object> { { "data-bind", "value: OriginalShipCountry" }})
@Html.Hidden("OriginalRequiredDate", @Model.Order.RequiredDate.ToShortDateString(), new Dictionary<string, object> { { "data-bind", "value: OriginalRequiredDate" } })
@Html.Hidden("OriginalShipVia", @Model.Order.ShipVia, new Dictionary<string, object> { { "data-bind", "value: OriginalShipVia" }})
@Html.Hidden("ShipperName", @Model.Order.ShipperName)
<div id="Shippers" style="visibility: hidden; display: none" >
@Html.Raw(Json.Encode(Model.Shippers));
</div>
<div id="MessageBox" data-bind="html: MessageBox"></div>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#RequiredDate").datepicker({
showOn: "button",
buttonImage: '@Url.Content("~/Content/images/icon-calendar.gif")',
buttonImageOnly: true,
changeMonth: true,
changeYear: true
});
});
//shippers = eval($("#Shippers").text());
shippers = jsonParse($("#Shippers").text());
// Overall viewmodel for this screen, along with initial state
var viewModel = {
EditFields: ko.observable(false),
ReadOnlyMode: ko.observable(false),
DisplayCreateOrderButton: ko.observable(false),
DisplayEditOrderButton: ko.observable(false),
DisplayUpdateOrderButton: ko.observable(false),
DisplayOrderDetailsButton: ko.observable(false),
DisplayCancelChangesButton: ko.observable(true),
SelectedShipVia: ko.observable($("#OriginalShipVia").val()),
Shippers: ko.observableArray(shippers),
OrderID: ko.observable($("#OrderID").val()),
ShipperName: ko.observable($("#ShipperName").val()),
CustomerID: ko.observable($("#CustomerID").val()),
OriginalShipName: ko.observable($("#OriginalShipName").val()),
OriginalShipAddress: ko.observable($("#OriginalShipAddress").val()),
OriginalShipCity: ko.observable($("#OriginalShipCity").val()),
OriginalShipRegion: ko.observable($("#OriginalShipRegion").val()),
OriginalShipPostalCode: ko.observable($("#OriginalShipPostalCode").val()),
OriginalShipCountry: ko.observable($("#OriginalShipCountry").val()),
OriginalRequiredDate: ko.observable($("#OriginalRequiredDate").val()),
OriginalShipVia: ko.observable($("#OriginalShipVia").val()),
ShipName: ko.observable($("#OriginalShipName").val()),
ShipAddress: ko.observable($("#OriginalShipAddress").val()),
ShipCity: ko.observable($("#OriginalShipCity").val()),
ShipRegion: ko.observable($("#OriginalShipRegion").val()),
ShipPostalCode: ko.observable($("#OriginalShipPostalCode").val()),
ShipCountry: ko.observable($("#OriginalShipCountry").val()),
RequiredDate: ko.observable($("#OriginalRequiredDate").val()),
MessageBox: ko.observable("")
}
ko.applyBindings(viewModel);
$("#btnCreateOrder").click(function () {
CreateOrder();
});
$("#btnUpdateOrder").click(function () {
UpdateOrder();
});
$("#btnOrderDetails").click(function () {
OrderDetails();
});
$("#btnCancelChanges").click(function () {
viewModel.ShipName(viewModel.OriginalShipName());
viewModel.ShipAddress(viewModel.OriginalShipAddress());
viewModel.ShipCity(viewModel.OriginalShipCity());
viewModel.ShipRegion(viewModel.OriginalShipRegion());
viewModel.ShipPostalCode(viewModel.OriginalShipPostalCode());
viewModel.ShipCountry(viewModel.OriginalShipCountry());
viewModel.RequiredDate(viewModel.OriginalRequiredDate());
viewModel.SelectedShipVia(viewModel.OriginalShipVia());
viewModel.DisplayEditOrderButton(true);
viewModel.DisplayUpdateOrderButton(false);
viewModel.DisplayOrderDetailsButton(true);
viewModel.DisplayCancelChangesButton(false);
viewModel.EditFields(false);
viewModel.ReadOnlyMode(true);
});
$("#btnEditOrder").click(function () {
viewModel.DisplayEditOrderButton(false);
viewModel.DisplayUpdateOrderButton(true);
viewModel.DisplayOrderDetailsButton(false);
viewModel.DisplayCancelChangesButton(true);
viewModel.EditFields(true);
viewModel.ReadOnlyMode(false);
});
if (viewModel.OrderID()=="0" || viewModel.OrderID()=="")
{
// order entry mode
viewModel.DisplayEditOrderButton(false);
viewModel.DisplayUpdateOrderButton(false);
viewModel.DisplayOrderDetailsButton(false);
viewModel.DisplayCancelChangesButton(false);
viewModel.DisplayCreateOrderButton(true);
viewModel.EditFields(true);
viewModel.ReadOnlyMode(false);
viewModel.OrderID("");
}
else
{
// order edit mode
viewModel.DisplayEditOrderButton(true);
viewModel.DisplayUpdateOrderButton(false);
viewModel.DisplayOrderDetailsButton(true);
viewModel.DisplayCancelChangesButton(false);
viewModel.DisplayCreateOrderButton(false);
viewModel.EditFields(false);
viewModel.ReadOnlyMode(true);
}
function ShippingInformation() {
this.OrderID;
this.CustomerID;
this.ShipName;
this.ShipAddress;
this.ShipCity;
this.ShipRegion;
this.ShipPostalCode;
this.ShipCountry;
this.RequiredDate;
this.Shipper;
};
function CreateOrder() {
var shippingInformation = new ShippingInformation();
shippingInformation.CustomerID = viewModel.CustomerID();
shippingInformation.ShipName = viewModel.ShipName();
shippingInformation.ShipAddress = viewModel.ShipAddress();
shippingInformation.ShipCity = viewModel.ShipCity();
shippingInformation.ShipRegion = viewModel.ShipRegion();
shippingInformation.ShipPostalCode = viewModel.ShipPostalCode();
shippingInformation.ShipCountry = viewModel.ShipCountry();
shippingInformation.RequiredDate = viewModel.RequiredDate();
shippingInformation.Shipper = viewModel.SelectedShipVia();
var url = "/Orders/CreateOrder";
$(':input').removeClass('validation-error');
$.post(url, shippingInformation, function (data, textStatus) {
CreateOrderComplete(data);
});
}
function UpdateOrder() {
var shippingInformation = new ShippingInformation();
shippingInformation.OrderID = viewModel.OrderID();
shippingInformation.CustomerID = viewModel.CustomerID();
shippingInformation.ShipName = viewModel.ShipName();
shippingInformation.ShipAddress = viewModel.ShipAddress();
shippingInformation.ShipCity = viewModel.ShipCity();
shippingInformation.ShipRegion = viewModel.ShipRegion();
shippingInformation.ShipPostalCode = viewModel.ShipPostalCode();
shippingInformation.ShipCountry = viewModel.ShipCountry();
shippingInformation.RequiredDate = viewModel.RequiredDate();
shippingInformation.Shipper = viewModel.SelectedShipVia();
var url = "/Orders/UpdateOrder";
$(':input').removeClass('validation-error');
$.post(url, shippingInformation, function (data, textStatus) {
UpdateOrderComplete(data);
});
}
function UpdateOrderComplete(result) {
if (result.ReturnStatus == true) {
viewModel.MessageBox(result.MessageBoxView);
viewModel.OrderID(result.ViewModel.Order.OrderID);
viewModel.ShipperName(result.ViewModel.Order.ShipperName);
viewModel.DisplayEditOrderButton(true);
viewModel.DisplayUpdateOrderButton(false);
viewModel.DisplayOrderDetailsButton(true);
viewModel.DisplayCancelChangesButton(false);
viewModel.DisplayCreateOrderButton(false);
viewModel.EditFields(false);
viewModel.ReadOnlyMode(true);
viewModel.OriginalShipName(result.ViewModel.Order.ShipName);
viewModel.OriginalShipAddress(result.ViewModel.Order.ShipAddress);
viewModel.OriginalShipCity(result.ViewModel.Order.ShipCity);
viewModel.OriginalShipRegion(result.ViewModel.Order.ShipRegion);
viewModel.OriginalShipPostalCode(result.ViewModel.Order.ShipPostalCode);
viewModel.OriginalShipCountry(result.ViewModel.Order.ShipCountry);
viewModel.OriginalRequiredDate(result.ViewModel.Order.RequiredDateFormatted);
viewModel.OriginalShipVia(viewModel.SelectedShipVia());
}
else {
viewModel.MessageBox(result.MessageBoxView);
}
for (var val in result.ValidationErrors) {
var element = "#" + val;
$(element).addClass('validation-error');
}
}
function CreateOrderComplete(result) {
if (result.ReturnStatus == true) {
viewModel.MessageBox(result.MessageBoxView);
viewModel.OrderID(result.ViewModel.Order.OrderID);
viewModel.ShipperName(result.ViewModel.Order.ShipperName);
viewModel.DisplayEditOrderButton(true);
viewModel.DisplayUpdateOrderButton(false);
viewModel.DisplayOrderDetailsButton(true);
viewModel.DisplayCancelChangesButton(false);
viewModel.DisplayCreateOrderButton(false);
viewModel.EditFields(false);
viewModel.ReadOnlyMode(true);
viewModel.OriginalShipName(result.ViewModel.Order.ShipName);
viewModel.OriginalShipAddress(result.ViewModel.Order.ShipAddress);
viewModel.OriginalShipCity(result.ViewModel.Order.ShipCity);
viewModel.OriginalShipRegion(result.ViewModel.Order.ShipRegion);
viewModel.OriginalShipPostalCode(result.ViewModel.Order.ShipPostalCode);
viewModel.OriginalShipCountry(result.ViewModel.Order.ShipCountry);
viewModel.OriginalRequiredDate(result.ViewModel.Order.RequiredDateFormatted);
viewModel.OriginalShipVia(viewModel.SelectedShipVia());
}
else
{
viewModel.MessageBox(result.MessageBoxView);
}
for (var val in result.ValidationErrors) {
var element = "#" + val;
$(element).addClass('validation-error');
}
}
function OrderDetails() {
$("#OrderDetails #OrderID").val(viewModel.OrderID());
$("#OrderDetails").submit();
}
</script>
<form id="OrderDetails" method="post" action="/Orders/OrderEntryDetail">
<input id="OrderID" name="OrderID" type="hidden" />
</form>