Tuesday 16 September 2014

Add to Cart Code of Knoctout.js


Add to Cart Code of Knoctout.js


<%@ Page Title="" Language="C#" MasterPageFile="~Account.Master" AutoEventWireup="true" CodeBehind="AddExpenditure.aspx.cs" Inherits="Account.Web.AddExpenditure" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <script src="scripts/sampleProductCategories.js"></script>
        <script>
            function formatCurrency(value) {
                return "$" + value.toFixed(2);
            }

            var CartLine = function () {
                var self = this;
              
                self.category = ko.observable();
                self.product = ko.observable();
                self.quantity = ko.observable(1);
                self.subtotal = ko.computed(function () {
                    return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0;
                });

                // Whenever the category changes, reset the product selection
                self.category.subscribe(function () {
                    self.product(undefined);
                });
            };

            var Cart = function () {
                // Stores an array of lines, and from these, can work out the grandTotal
                var self = this;
                self.lines = ko.observableArray([new CartLine()]); // Put one line in by default
                self.grandTotal = ko.computed(function () {
                    var total = 0;
                    $.each(self.lines(), function () { total += this.subtotal() })
                    return total;
                });

                // Operations
                self.addLine = function () { self.lines.push(new CartLine()) };
                self.removeLine = function (line) { self.lines.remove(line) };
                self.save = function () {
                    var dataToSave = $.map(self.lines(), function (line) {
                        return line.product() ? {
                            productName: line.product().name,
                            quantity: line.quantity()
                        } : undefined
                    });
                    alert("Could now send this to server: " + JSON.stringify(dataToSave));
                };
            };
            $(document).ready(function () {
                ko.applyBindings(new Cart());
            });
        </script>
    <div role="main" class="container_12" id="content-wrapper">

        <!-- Start of the main content -->
        <div id="main_content">

   
    <table width='100%'>
        <thead>
            <tr>
                <th width='25%'>Category</th>
                <th width='25%'>Product</th>
                <th class='price' width='15%'>Price</th>
                <th class='quantity' width='10%'>Quantity</th>
                <th class='price' width='15%'>Subtotal</th>
                <th width='10%'> </th>
            </tr>
        </thead>
        <tbody data-bind='foreach: lines'>
            <tr>
                <td>
                    <select data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category'> </select>
                </td>
                <td data-bind="with: category">
                    <select data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'> </select>
                </td>
                <td class='price' data-bind='with: product'>
                    <span data-bind='text: formatCurrency(price)'> </span>
                </td>
                <td class='quantity'>
                    <input data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"' />
                </td>
                <td class='price'>
                    <span data-bind='visible: product, text: formatCurrency(subtotal())' > </span>
                </td>
                <td>
                    <a href='#' data-bind='click: $parent.removeLine'>Remove</a>
                </td>
            </tr>
        </tbody>
    </table>
    <p class='grandTotal'>
        Total value: <span data-bind='text: formatCurrency(grandTotal())'> </span>
    </p>
    <button data-bind='click: addLine'>Add product</button>
    <button data-bind='click: save'>Submit order</button>
   
</div>

</asp:Content>

Sources:
http://jsfiddle.net/rniemeyer/adNuR/

 http://knockoutjs.com/examples/resources/sampleProductCategories.js

Wednesday 3 September 2014

ASP.Net Web api custom Methods

http://www.dotnetcurry.com/showarticle.aspx?ID=854