Goal
The blog is to create a working form using KnockOut.js, generic handler(ashx) and JQuery. This is strictly for beginners, who want to use KnockOut.js. I am not giving any solution in this blog, this is just a starting thread for the people who are still having trouble using KnockOut.Steps
- Create a visual studio project. I have named the solution as Sample and project name is Sample.KnockOut.
- Tools > NuGet Package Manager > Package Manager Console > Run "Install-Package knockoutjs" (CLICK HERE)
- Tools > NuGet Package Manager > Package Manager Console > Run "Install-Package jQuery" (CLICK HERE)
- Add the files which are shown in the Solution Explorer image below and use the code which is mentioned in the blog.
OrderHandler.ashx.cs
#region System using System; using System.Linq; using System.Collections.Generic; using System.Text; using System.Web; using System.Web.Script.Serialization; using System.Web.SessionState; #endregion namespace Sample.KnockOut.Ajax { /// <summary> /// OrderHandler.ashx - Just processes data coming from default.aspx. /// </summary> public class OrderHandler : IHttpHandler, IRequiresSessionState { #region Properties /// <summary> /// Is Reusable /// </summary> public bool IsReusable { get { return false; } } /// <summary> /// Http Context /// </summary> private HttpContext Context { get; set; } /// <summary> /// Sample Entity List /// </summary> private IList<Entity.Order> OrderList { get { if (Context.Session["OrderList"] == null) { Context.Session["OrderList"] = new List<Entity.Order>(); } return (List<Entity.Order>)Context.Session["OrderList"]; } set { Context.Session["OrderList"] = value; } } #endregion #region Process Request /// <summary> /// Process Request /// </summary> /// <param name="context"></param> public void ProcessRequest(HttpContext context) { // Set the context Context = context; // Action which is passed to get the var action = (context.Request["Process"] ?? string.Empty); // Check for action and settings switch (action) { case "GetOrder": { GetOrder(); } break; case "AddUpdateItem": { AddUpdateItem(); } break; case "DeleteOrder": { DeleteItem(); } break; case "GetList": default: { GetList(); } break; } } #endregion #region Actions /// <summary> /// Get List : Gets the list of /// </summary> private void GetList() { // Sample Entity List OrderList = OrderList.OrderBy(a => a.OrderId).ToList(); // Response the settings Context.Response.ContentType = "application/json"; Context.Response.ContentEncoding = Encoding.UTF8; Context.Response.Write(new JavaScriptSerializer().Serialize(OrderList)); } /// <summary> /// Get Order By Order Id /// </summary> private void GetOrder() { // Remove the item var orderId = Convert.ToInt32(Context.Request.Params["OrderId"] ?? "0"); // Sample Entity List var order = OrderList.FirstOrDefault(a => a.OrderId == orderId); // Response the settings Context.Response.ContentType = "application/json"; Context.Response.ContentEncoding = Encoding.UTF8; Context.Response.Write(new JavaScriptSerializer().Serialize(order)); } /// <summary> /// Add/Update Item /// </summary> private void AddUpdateItem() { // Get the request var request = (new JavaScriptSerializer()).Deserialize<Entity.Order>(Context.Request.Params["Request"]); // Add Item if (request.OrderId == 0) { // Get the max id var maxId = (OrderList.Any() ? OrderList.Max(a => a.OrderId) : 0); request.OrderId = maxId + 1; // Add to the session OrderList.Add(request); } else // Update Item { // remove the item OrderList = OrderList.Where(a => a.OrderId != request.OrderId).ToList(); // Add to the session OrderList.Add(request); } // Returns the list GetList(); } /// <summary> /// Delete Item /// </summary> private void DeleteItem() { // Remove the item var orderId = Convert.ToInt32(Context.Request.Params["OrderId"] ?? "0"); // remove the item OrderList = OrderList.Where(a => a.OrderId != orderId).ToList(); // Returns the list GetList(); } #endregion } }
Style.css
* { font-family: verdana; }
div{padding: 2px;}
input{ border: 1px solid #808080;}
.div-main { width: 600px; }
.div-sub-row { width: 600px; }
.div-left-box { width: 150px;text-align: right;float: left;}
.div-right-box { width: 395px;text-align: left;float: left;padding-left: 5px;}
.div-clear { clear: both; }
.div-order-counter{border: 1px solid #efefef;padding:5px;background: red;color: #fff;}
.div-main-grid{ width: 600px;font-size: 11px; }
.div-main-grid-column1{ float: left;text-align: center;width: 50px; }
.div-main-grid-column2{ float: left;text-align: center;width: 150px; }
.div-main-grid-column3{ float: left;text-align: center;width: 250px; }
.div-main-grid-column4{ float: left;text-align: center;width: 50px; }
.div-main-grid-column5{ float: left;text-align: center;width: 50px; }
.div-main-grid-header{ background: #1e90ff;color:#ffffff;height: 25px; }
.div-main-grid-item{ background: #efefef;color:#000;height: 25px; }
.div-main-grid-alternating-item{ background: #fff;color:#000;height: 25px; }
Entity.cs
#region System using System; using System.Collections; using System.Collections.Generic; #endregion namespace Sample.KnockOut.Entity { /// <summary> /// Order /// </summary> [Serializable] public class Order { public int OrderId { get; set; } public string OrderName { get; set; } public IList<OrderItem> OrderItems { get; set; } } /// <summary> /// Order Items /// </summary> [Serializable] public class OrderItem { public int Quantity { get; set; } public string ItemName { get; set; } } }
Sample.js
/* Author : Maulik Dhorajia Description : Sample to show KnockOut.js usage. This will be helpful for beginners only. */ // Default settings for KnockOut.js if (location.protocol != "data:") { $(window).bind('hashchange', function () { window.parent.handleChildIframeUrlChange(location.hash); }); } // GLOBAL DECLARATIONS var viewModel; // Page Load $(document).ready(function () { // Apply Binding - Which can help in applying binding. ApplyBindingHandlers(); // Apply exterders ApplyNumericExtender(); // Populate View Model PopulateViewModel(); }); // Apply Binding Handlers function ApplyBindingHandlers() { ko.bindingHandlers.integerBoxSettings = { init: function (element, valueAccessor) { // Define the settings var $element = $(element); // Bind change event $element.blur(function () { if (parseInt($(this).val()) > 0) { $(this).css("border", "1px solid green"); $(this).css("color", "green"); } else if (parseInt($(this).val()) < 0) { $(this).css("border", "1px solid red"); $(this).css("color", "red"); } else if (parseInt($(this).val()) == 0) { $(this).css("border", "1px solid #808080"); $(this).css("color", "black"); } }); $element.focus(function () { $(this).css("border", "1px solid #808080"); $(this).css("color", "black"); }); } }; // combine Items And Display - This will bind the items in the gird ko.bindingHandlers.combineItemsAndDisplay = { init: function (element, valueAccessor) { // Define the settings var $element = $(element); var value = ko.utils.unwrapObservable(valueAccessor()); if (value != null && value.OrderItems.length > 0) { var html = ""; for (var i = 0; i < value.OrderItems.length; i++) { if (!(value.OrderItems[i].Quantity <= 0 || value.OrderItems[i].ItemName == "")) { if (html != "") { html += ", "; } html += value.OrderItems[i].Quantity.toString() + " - " + value.OrderItems[i].ItemName; } } $element.html(html); } } }; // Edit Item Settings ko.bindingHandlers.editItemSettings = { init: function (element, valueAccessor) { // Define the settings var $element = $(element); var value = ko.utils.unwrapObservable(valueAccessor()); $element.click(function () { CallHandler("GetOrder", value.OrderId.toString()); }); } }; // Delete Item Settings ko.bindingHandlers.deleteItemSettings = { init: function (element, valueAccessor) { // Define the settings var $element = $(element); var value = ko.utils.unwrapObservable(valueAccessor()); $element.click(function () { if (confirm("Are you sure you want to delete the record?")) { CallHandler("DeleteOrder", value.OrderId.toString()); } }); } }; } // Applies the extenders function ApplyNumericExtender() { // Validate numbers only ko.extenders.numeric = function (target, precision) { // create a writeable computed observable to intercept writes to our observable var result = ko.computed({ read: target, // always return the original observables value write: function (newValue) { var current = target(), roundingMultiplier = Math.pow(10, precision), newValueAsNum = isNaN(newValue) ? 0 : parseFloat(+newValue), valueToWrite = Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier; // only write if it changed if (valueToWrite !== current) { target(valueToWrite); } else { // if the rounded value is the same, but a different value was written, force a notification for the current field if (newValue !== current) { target.notifySubscribers(valueToWrite); } } } }); // initialize with current value to make sure it is rounded appropriately result(target()); // return the new computed observable return result; }; } // OrderItem : Object function OrderItem(quantity, itemName) { var self = this; self.Quantity = ko.observable(quantity).extend({ numeric: 0 }); // Extended to check if Quantity is string it will replace it with 0. self.ItemName = ko.observable(itemName); } // Order View Model function OrderViewModel() { var self = this; self.OrderId = ko.observable(0); self.OrderName = ko.observable(""); self.OrderItemList = ko.observableArray([new OrderItem(0, ""), new OrderItem(0, ""), new OrderItem(0, "")]); // This will be the result from json call self.OrderList = ko.observableArray([]); // Events self.SaveClick = function () { // Validation if (viewModel.OrderName() == "") { alert("Order name is required."); return; } var orderItems = new Array(); for (var i = 0; i < viewModel.OrderItemList().length; i++) { orderItems.push({ Quantity: viewModel.OrderItemList()[i].Quantity(), ItemName: viewModel.OrderItemList()[i].ItemName() }); } var request = { "OrderId": viewModel.OrderId(), "OrderName": viewModel.OrderName(), "OrderItems": orderItems }; var postData = { Request: JSON.stringify(request) }; CallHandler("AddUpdateItem", postData); }; self.ClearClick = function () { ClearScreen(); }; } // Populates view model function PopulateViewModel() { CallHandler("GetList", null); } // Call Handler function CallHandler(callMethod, postData) { //Supports cors $.ajaxSetup({ cache: false }); $.support.cors = true; if (callMethod == "GetOrder" || callMethod == "DeleteOrder") { postData = { OrderId: postData }; } // Cart Proxy $.post("Ajax/OrderHandler.ashx?Process=" + callMethod.toString(), postData, function (response) { SuccessOnServiceCall(response, callMethod); }).fail(function (jqXhr, textStatus, errorThrown) { ErrorOnServiceCall(jqXhr, textStatus, errorThrown); }); } // Bind the screen function SuccessOnServiceCall(response, callMethod) { switch (callMethod) { case "GetList": { // DO nothing } break; case "GetOrder": { if (response != null) { viewModel.OrderId(response.OrderId); viewModel.OrderName(response.OrderName); for (var i = 0; i < response.OrderItems.length; i++) { viewModel.OrderItemList()[i].Quantity(response.OrderItems[i].Quantity); viewModel.OrderItemList()[i].ItemName(response.OrderItems[i].ItemName); } } } break; case "AddUpdateItem": { ClearScreen(); alert("Order saved successfully."); } break; case "DeleteItem": { ClearScreen(); alert("Order deleted successfully."); } break; } // Apply the model if null if (viewModel == null) { // Apply the View Model viewModel = new OrderViewModel(); RefreshOrderList(response); // This should be called only once. ko.applyBindings(viewModel, document.getElementById("knockout-main-form")); // document.getElementById => Should be the like this. Whatever controls are there in this element can only be use the script. } else { if (callMethod != "GetOrder") { RefreshOrderList(response); } } } // Display on error message function ErrorOnServiceCall(jqXhr, textStatus, errorThrown) { alert(JSON.stringify(jqXhr)); } // Refresh Order List : VERY IMPORTANT DONT BIND THE WHOLE OBJECT IT WONT WORK :) function RefreshOrderList(orders) { viewModel.OrderList([]); if (orders != null && orders.length > 0) { for (var i = 0; i < orders.length; i++) { viewModel.OrderList.push(ko.observable(orders[i])); } } } // Clear screen function ClearScreen() { viewModel.OrderId(0); viewModel.OrderName(""); for (var i = 0; i < viewModel.OrderItemList().length; i++) { viewModel.OrderItemList()[i].Quantity(0); viewModel.OrderItemList()[i].ItemName(""); } }
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sample.KnockOut.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <!-- Title --> <title>KnockOut.js - Sample</title> <!-- Script --> <script type="text/javascript" src="Scripts/jquery-2.1.1.js"></script> <script type="text/javascript" src="Scripts/knockout-3.1.0.js"></script> <script type="text/javascript" src="Scripts/Sample.js"></script> <!-- Css --> <link rel="stylesheet" href="Css/Style.css" /> </head> <body> <form id="form1" runat="server"> <div id="knockout-main-form"> <h3>KnockOut.js - Sample for observable object by KnockOut.js.</h3> <div id="divMain" class="div-main"> <div class="div-sub-row"> <div class="div-left-box"><b>Order name :</b></div> <div class="div-right-box"> <input type="text" data-bind="value: OrderName" maxlength="15" /><span data-bind="text: OrderId, visible: false" /></div> </div> <div class="div-clear"></div> <div class="div-sub-row"> <table> <thead> <tr> <th>Quantity</th> <th>Item Name</th> </tr> </thead> <tbody data-bind="foreach: OrderItemList"> <tr> <td> <input type="text" data-bind="value: Quantity, integerBoxSettings: $data" maxlength="3" style="width: 100px" /></td> <td> <input type="text" data-bind="value: ItemName" maxlength="15" style="width: 250px" /></td> </tr> </tbody> </table> </div> <div class="div-clear"></div> <div> <input type="button" value="Save" data-bind="click: SaveClick" /> <input type="button" value="Clear" data-bind="click: ClearClick" /> </div> <div class="div-order-counter"> <span data-bind="text: 'There are '+ OrderList().length +' order(s) in memory.'"></span> </div> <div data-bind="visible: OrderList().length > 0" class="div-main-grid"> <div class="div-main-grid-header"> <div class="div-main-grid-column1">Id</div> <div class="div-main-grid-column2">Name</div> <div class="div-main-grid-column3">Items</div> <div class="div-main-grid-column4">Edit</div> <div class="div-main-grid-column5">Delete</div> </div> </div> <div data-bind="visible: OrderList().length > 0, foreach: OrderList" class="div-main-grid"> <div data-bind="css: (($index() + 1) % 2 == 0 ? 'div-main-grid-alternating-item' : 'div-main-grid-item' )"> <div class="div-main-grid-column1" data-bind="text: OrderId"></div> <div class="div-main-grid-column2" data-bind="text: OrderName"></div> <div class="div-main-grid-column3" data-bind="combineItemsAndDisplay: $data"></div> <div class="div-main-grid-column4"><a href="javascript:void(0);" data-bind="text: 'Edit', editItemSettings: $data"></a></div> <div class="div-main-grid-column5"><a href="javascript:void(0);" data-bind="text: 'Delete', deleteItemSettings: $data"></a></div> </div> </div> </div> </div> </form> </body> </html>
Final Out Come
Please let me know if this helped or not.
