Click here to Skip to main content
15,881,742 members
Search within:


Articles / Web Development / HTML
 

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

Rate me:
Please Sign up or sign in to vote.
4.94/5 (138 votes)
2 Jan 2012CPOL14 min read 434.4K   22.4K   415  
Developing an Order Entry application with MVC.
 
@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>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Mark J. Caplin
Software Developer Joey Software Solutions
United States United States
Mark Caplin has specialized in Information Technology solutions for the past 30 years. Specializing in full life-cycle development projects for both enterprise-wide systems and Internet/Intranet based solutions.

For the past fifteen years, Mark has specialized in the Microsoft .NET framework using C# as his tool of choice. For the past four years Mark has been implementing Single Page Applications using the Angular platform.

When not coding, Mark enjoys playing tennis, listening to U2 music, watching Miami Dolphins football and watching movies in Blu-Ray technology.

In between all this, his wife of over 25 years, feeds him well with some great home cooked meals.

You can contact Mark at mark.caplin@gmail.com

...

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 25 Dec 2011

Article Copyright 2011 by Mark J. Caplin
Everything else Copyright © CodeProject, 1999-2024

Web04 2.8:2024-04-02:1