MVC Techniques with jQuery, JSON, Knockout, and C#

@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:&nbsp;</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">&nbsp;</div>   

<div style="float:left; width:150px; text-align:right;" class="field-label" >Order Date:&nbsp;</div>
<div style="float:left; width:400px; height:25px; ">&nbsp;@Model.Order.OrderDate.ToShortDateString()</div>

<div style="float:left; width:150px; text-align:right;" class="field-label">Required Date:&nbsp;</div>
<div style="float:left; height:25px">
    &nbsp;
    <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">&nbsp;</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:&nbsp;</div>
<div style="float:left; width:400px; height:25px; ">&nbsp;@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:&nbsp;</div>
<div style="float:left; width:400px; height:25px; ">&nbsp;@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:&nbsp;</div>
<div style="float:left; width:400px; height:25px; ">&nbsp;@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:&nbsp;</div>
<div style="float:left; width:400px; height:25px; ">&nbsp;@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:&nbsp;</div>
<div style="float:left; width:400px; height:25px; ">&nbsp;@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:&nbsp;</div>
<div style="float:left;  width:400px; height:25px; ">&nbsp;@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:&nbsp;</div>
<div style="float:left;  width:400px; height:25px; ">&nbsp;@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:&nbsp;</div>
<div style="float:left; width:300px; height:25px">
    &nbsp;  
    <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">
        &nbsp;
    </span>

</div>

<div style="clear:both;"></div>      

<div style="float:left; width:150px; height:25px; text-align:right;" class="field-label">Ship To Name:&nbsp;</div>
<div style="float:left; width:300px; height:25px; " >
    &nbsp;
    <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:&nbsp;</div>
<div style="float:left; height:25px; width:300px;" >
    &nbsp;
    <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:&nbsp;</div>
<div style="float:left; height:25px; width:300px;">
    &nbsp;
 <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:&nbsp;</div>
<div style="float:left; height:25px; width:300px; ">
    &nbsp;
 <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:&nbsp;</div>
<div style="float:left; height:25px; width:300px; ">
&nbsp;
 <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:&nbsp;</div>
<div style="float:left; height:25px; width:300px; ">
&nbsp;
 <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">&nbsp;</div>

<div style="float:left;  width:150px; height:25px; text-align:right;" class="field-label">Order Total:&nbsp;</div>
<div style="float:left;  width:400px; height:25px; font-weight:bold; ">&nbsp;@Model.Order.OrderTotalFormatted</div>

<div style="clear:both; padding: 5px">&nbsp;</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>