Manage Product And Quickly Add It To Cart

Step 1

Manage product, 

@{
    ViewBag.Title = "Index";
   // Layout = null;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="//code.jquery.com/jquery-1.12.4.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- add thids links for the error message-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>


<!--add this link for the datatable-->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.csss" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js" integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous"></script>

<link href='http://fonts.googleapis.com/css?family=Work+Sans:400,600,700' rel='stylesheet' type='text/css'>
<h2>Product Master</h2>
<hr />
<style>
    .red_border {
        border: 1px solid #e46262;
    }
     .LoadingDiv {
            top: 0;
            left: 0;
            position: fixed;
            opacity: 0.97;
            z-index: 10000000;
            background: Black;
            height: 100%;
            width: 100%;
            margin: auto;
        }
    .dataTables_filter {
        float:right;
    }
</style>
<div class="col-md-12">
    <div class="col-md-4"></div>
    <div class="col-md-4">
        <div class="col-md-12">
            <label>Product Name :</label>
            <input class="form-control required" type="text" id="txtName" required />
        </div>
        <div class="col-md-12">
            <label>Product Descreption :</label>
            <textarea class="form-control required" id="txtDesc"></textarea>
        </div>
        <div class="col-md-12">
            <label>Product Price :</label>
            <input class="form-control required" onkeypress = "return isNumberKey(event)" id="txtPrice" type="text" required />
        </div>
        <div class="col-md-12">
            <br />
            <input id="btnSave" class="btn btn-success" type="button" value="Save Product" />
            <input id="btnCancel" class="btn btn-danger" type="button" value="Cancel" />

        </div>

    </div>
    <div class="col-md-4"></div>



</div>
<div class="col-md-12">
    <table id="tblProduct" class="table table-striped table-bordered" width="100%">
        <thead>
            <tr>

                <th >Product_ID</th>
                <th>Name</th>
                <th>Description</th>
                <th>Price</th>
                <th>Action</th>

            </tr>
        </thead>

    </table>
</div>
<div id="dvLoader" class="LoadingDiv" style="display: none;">
    <table style="height: 100%; margin: auto;">
        <tr>
            <td style="vertical-align: middle;">
                <center>
                        <img src="http://www.girlsgotit.org/images/ajax-loader.gif"  alt="Loading" />
                    </center>
            </td>
        </tr>
    </table>
</div>
<input type="hidden" id="hdnPID" value="0" />
<script type="text/javascript">

    $(document).ready(function () {

        windowResize();
        $(window).resize(function () {
            windowResize();
        });
        $('#toast-container').find('.toast-top-center').removeClass('.toast-top-center');
        toastr.options = {
            "closeButton": true,
            'autoWidth': false,
            "debug": false,
            "newestOnTop": true,
            "progressBar": true,
            "positionClass": "toast-top-center",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "3000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }

        $("#btnSave").click(function () {
            var PID = $("#hdnPID").val();
            var Name = $("#txtName").val();
            var Desc = $("#txtDesc").val();
            var Price = parseFloat($("#txtPrice").val()).toFixed(2);
            if (CheckRequiredFields()) {

                $('#dvLoader').show();
                $.ajax({
                    url: '@Url.Action("SaveAndUpdateProduct", "Home")',
                        type: 'POST',
                        data: JSON.stringify({ "PID": parseInt(PID), "Name": Name, "Description": Desc, "price": Price }),
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success: function (result) {
                            $('#dvLoader').hide();

                            if (result.Status == "True") {
                                toastr.success(result.Message);
                                clear();
                                display();
                            }
                            else {
                                toastr.success(result.Message);
                                clear();
                                display();

                            }
                        }
                    });

                }

        });

        $("#btnCancel").click(function () {
            clear();
        });

    });
        function CheckRequiredFields() {
            var isValid = true;
            $('.required').each(function () {
                if ($.trim($(this).val()) == '') {
                    isValid = false;
                    $(this).addClass('red_border');


                }
                else {
                    $(this).removeClass('red_border');

                }
            });
            return isValid;
        }

        function checkemail(valemail) {
            var forgetfilter = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
            if (forgetfilter.test(valemail)) {
                return true;
            }
            else {
                return false;
            }
        }
        function clear() {
            $("#txtName").val("");
            $("#txtDesc").val("");
            $("#txtPrice").val("");
            $('#btnSave').val("Save Product");
            $("#hdnPID").val(0);
        }
        function display() {
            $('#dvLoader').show();
            Table = $('#tblProduct').DataTable({

                "processing": true,
                "serverSide": false,
                "paging": true,
                "ordering": true,
                "info": true,
                "searching": true,
                "bFilter": false,
                "scrollX": "100%",
                "scrollY": ($(window).height() - 500),
                "sScrollXInner": "100%",
                "bScrollCollapse": true,
                "sAjaxSource": '@Url.Action("GetProduct","Home")',
                "bDestroy": true,
                "bLengthChange": true,
                "bPaginate": true,
                "sEmptyTable": "Loading data from server",

                "columns": [

                    {
                        "sWidth": "5%",
                        "sClass": "TextCenter PID",
                        "render": function (data, type, row) {
                            return row[0];
                        }
                    },
                    { "sWidth": "5%", "sClass": "TextCenter Name", "render": function (data, type, row ) { return (row[1]); } },
                    { "sWidth": "5%", "sClass": "TextCenter Desc", "render": function (data, type, row ) { return (row[2]); } },
                    { "sWidth": "5%", "sClass": "TextCenter Price", "render": function (data, type, row ) { return (row[3]); } },

                     {
                         "bSortable": false,
                         "sClass": "TextCenter",
                         "sWidth": "3%",
                         "render": function (data, type, row) {
                             return '<center><a href="javascript:void(0);"  onclick=deleteData("' + row[0] + '"); return false;> <i class="glyphicon glyphicon-trash"></i></a>  <a href="javascript:void(0);"  onclick=EditData(this); return false;> <i class="glyphicon glyphicon-edit"></i></a></center>';
                         }, "targets": 0,
                     }

                ],

            });
            $('#dvLoader').hide();
        }
    function windowResize() {
        display();

    };
    function deleteData(id) {
        var PID = parseInt(id);
        bootbox.confirm({
            title: 'Remove Customer',
            message: 'Are you sure want to delete this record?',
            buttons: {
                'cancel': {
                    label: 'No',
                    className: 'btn-default pull-right'
                },
                'confirm': {
                    label: 'Yes',
                    className: 'btn-primary margin-right-5'
                }
            },
            callback: function (result) {
                if (result) {
                    $('#dvLoader').show();
                    $.ajax({
                        url: '@Url.Action("DeleteProduct", "Home")',
                        type: 'POST',
                        data: JSON.stringify({ "id": id }),
                        contentType: 'application/json; charset=utf-8;',
                        success: function (result) {
                            windowResize();
                            $('#dvLoader').hide();

                            if (result.Status == "True") {
                                toastr.success(result.Message);
                                clear();
                            }
                            else {
                                toastr.success(result.Message);

                            }
                        }
                    });
                }
            }
        });
    }
    function EditData(row) {
        debugger
        var PID = $(row).closest('tr').find('.PID').html();
        $("#hdnPID").val(parseInt(PID));

        var Name = $(row).closest('tr').find('.Name').html();
        $('#txtName').val(Name);

        var Desc = $(row).closest('tr').find('.Desc').html();
        $('#txtDesc').val(Desc);

        var Price = $(row).closest('tr').find('.Price').html();
        $('#txtPrice').val(Price);

        $('#btnSave').val("Update Product");
    }
    function isNumberKey(evt) {
        var charcode = (evt.which) ? evt.which : evt.keycode
        if (charcode > 31 && (charcode < 48 || charcode > 58)
            && evt.keyCode != 35 && evt.keyCode != 36 && evt.keyCode != 37
            && evt.keyCode != 38 && evt.keyCode != 39 && evt.keyCode != 40
            && evt.keyCode != 46) {
            return false;
        }
        else {
            return true;
        }
    }
</script>

Step 2

Code of controller to manage product 

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DataTable_Demo.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        private PMSEntities context = new PMSEntities();

        public ActionResult Index()
        {
            return View();
        }
        public JsonResult SaveAndUpdateProduct(int PID,string Name, string Description, float Price)
        {
            var result = new jsonMessage();
            try
            {
                //define the model
                Mst_Product _Mst_Product = new Mst_Product();
                _Mst_Product.PID = PID;
                _Mst_Product.Name = Name;
                _Mst_Product.Description = Description;
                _Mst_Product.Price = Price;


               //for insert recored..
                if (_Mst_Product.PID == 0)
                {
                    context.Mst_Product.Add(_Mst_Product);
                    result.Message = "your product has been saved success..";
                    result.Status = true;
                }
                else  //for update recored..
                {
                    context.Entry(_Mst_Product).State = EntityState.Modified;
                    result.Message = "your product has been updated successfully..";
                    result.Status = true;
                }
                context.SaveChanges();


            }
            catch (Exception ex)
            {
                ErrorLogers.ErrorLog(ex);
                result.Message = "We are unable to process your request at this time. Please try again later.";
                result.Status = false;
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetProduct()
        {

            List<Mst_Product> _list = new List<Mst_Product>();

            try
            {
                _list = context.Mst_Product.ToList();
                     var  result = from c in _list
                         select new[]
                         {
                          Convert.ToString( c.PID ),  // 0
                          Convert.ToString( c.Name ),  // 1
                          Convert.ToString( c.Description ),  // 2
                          Convert.ToString( c.Price ),  // 3
                                                   };

                     return Json(new
                     {
                        aaData= result
                     }, JsonRequestBehavior.AllowGet);
            }

            catch (Exception ex)
            {
                ErrorLogers.ErrorLog(ex);
                return Json(new
                {
                    aaData = new List<string[]> { }
                }, JsonRequestBehavior.AllowGet);
            }

        }

        public JsonResult DeleteProduct(int id)
        {
            var result = new jsonMessage();
            try
            {

                var product = new Mst_Product { PID = id };
                context.Entry(product).State = EntityState.Deleted;
                context.SaveChanges();


                result.Message = "your product has been deleted successfully..";
                result.Status = true;

            }
            catch (Exception ex)
            {
                ErrorLogers.ErrorLog(ex);
                result.Message = "We are unable to process your request at this time. Please try again later.";
                result.Status = false;
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

    }
}

Step 3

Add the Product controller and product view for the show product  page List. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;


namespace DataTable_Demo.Controllers
{
    public class ProductController : Controller
    {
        //
        // GET: /Product/
        private PMSEntities context = new PMSEntities();

        public ActionResult Product()
        {
            List<Mst_Product> _list = new List<Mst_Product>();
            _list = context.Mst_Product.ToList();
            return View(_list);
        }
        public JsonResult AddToCart(int PID)
        {
            var result = new jsonMessage();
            try
            {

                Mst_Product _Mst_Product = context.Mst_Product.Where(t => t.PID == PID).FirstOrDefault();

                //define the model of crt
                Cart _Cart = new Cart();
                _Cart.PID = PID;
                _Cart.Quantity = 1;
                _Cart.DateTime = System.DateTime.Now;
                _Cart.TotalPrice = Convert.ToDouble(_Mst_Product.Price);

                context.Carts.Add(_Cart);
                result.Message = "your product has been Added in to cart..";
                result.Status = true;

                context.SaveChanges();


            }
            catch (Exception ex)
            {
                ErrorLogers.ErrorLog(ex);
                result.Message = "We are unable to process your request at this time. Please try again later.";
                result.Status = false;
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

    }
}

@{
    ViewBag.Title = "Product";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="//code.jquery.com/jquery-1.12.4.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- add thids links for the error message-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>


@*<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<div class="w3-panel w3-animate-opacity">
    <div class="w3-tag w3-jumbo">S</div>
    <div class="w3-tag w3-jumbo">A</div>
    <div class="w3-tag w3-jumbo">L</div>
    <div class="w3-tag w3-jumbo">E</div>
</div>



<div class="w3-row-padding">
     @foreach (var item in Model) {
    <div class="w3-third">
        <div class="w3-card">
            <div class="w3-container w3-red">
                <h1><b>@item.Name</b></h1>
            </div>
            <div class="w3-container w3-xlarge">
                <p>
                    @item.Name<br>
                    <i><b>@item.Description</b></i><br>
                    <span class="w3-xxlarge w3-text-red"><b>@item.Name</b></span>
                </p>
                <p>
                    <del>$400</del> <span class="w3-tag w3-yellow">New!</span><br>
                    Now only @item.Price !!!
                </p>
            </div>
            <div class="w3-container w3-red">
                <p class="w3-opacity">Contact: Bhavdip-9825891108</p>
            </div>
        </div>
        <br />
    </div>
     }
</div>*@




<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href='http://fonts.googleapis.com/css?family=Work+Sans:400,600,700' rel='stylesheet' type='text/css'>
    <link href="~/Content/css/reset.css" rel="stylesheet" />

    <link href="~/Content/css/style.css" rel="stylesheet" />
    <script src="~/Content/js/modernizr.js"></script>


    <title>Document</title>
</head>
    <style>
    .red_border {
        border: 1px solid #e46262;
    }
     .LoadingDiv {
            top: 0;
            left: 0;
            position: fixed;
            opacity: 0.97;
            z-index: 10000000;
            background: Black;
            height: 100%;
            width: 100%;
            margin: auto;
        }
    .dataTables_filter {
        float:right;
    }
</style>
<body>
    <div id="dvLoader" class="LoadingDiv" style="display: none;">
    <table style="height: 100%; margin: auto;">
        <tr>
            <td style="vertical-align: middle;">
                <center>
                        <img src="http://www.girlsgotit.org/images/ajax-loader.gif"  alt="Loading" />
                    </center>
            </td>
        </tr>
    </table>
</div>
    <header>
        <h1>Quick Add to Cart</h1>
    </header>

    <a href="@Url.Action("Cart","Cart")" class="cd-cart">
        <span>0</span>
    </a>

    <ul class="cd-gallery">

        @foreach (var item in Model) {

        <li>
            <div class="cd-single-item">

                <a href="#0">
                    <ul class="cd-slider-wrapper">
                        <li>
                            <img src="~/Content/img/thumb-1.jpg" alt="Preview image"></li>
                        <li>
                            <img src="~/Content/img/thumb-2.jpg" alt="Preview image"></li>
                        <li class="selected">
                            <img src="~/Content/img/thumb-1.jpg" alt="Preview image"></li>
                    </ul>
                </a>

                <div class="cd-customization">

                    <div class="color selected-3" data-type="select">
                        <ul>
                            <li class="color-1">color-1</li>
                            <li class="color-2">color-2</li>
                            <li class="color-3 active">color-3</li>
                        </ul>
                    </div>

                    <div class="size" data-type="select">
                        <ul>
                            <li class="small active">Small</li>
                            <li class="medium">Medium</li>
                            <li class="large">Large</li>
                        </ul>
                    </div>

                    <button class="add-to-cart" onclick="AddToCart('@item.PID');">
                        <em>Add to Cart</em>
                        <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
                            <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />
                        </svg>
                    </button>
                </div>
                <!-- .cd-customization -->

                <button class="cd-customization-trigger">Customize</button>
            </div>
            <!-- .cd-single-item -->

            <div class="cd-item-info">
                <b><a href="#0">@item.Name</a></b>
                <br /><span style="font-weight:normal;font-family:Arial;font-size:15px;color:gray">@item.Description</span>
                <em>[email protected]</em>
            </div>
            <!-- cd-item-info -->
        </li>
        }

    </ul>
    <!-- cd-gallery -->
    @*<script src="js/jquery-2.1.4.js"></script>*@

    <script src="~/Content/js/main.js"></script>
    <!-- Resource jQuery -->
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {

    });
    function AddToCart(PID) {
        var PID = PID
        $('#dvLoader').show();
        $.ajax({
            url: '@Url.Action("AddToCart", "Product")',
                type: 'POST',
                data: JSON.stringify({ "PID": parseInt(PID) }),
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    $('#dvLoader').hide();

                    if (result.Status == "True") {
                        toastr.success(result.Message);
                        clear();
                        display();
                    }
                    else {
                        toastr.success(result.Message);
                        clear();
                        display();

                    }
                }
            });
        }
</script>

Step 4

Add the cart controller and add the cart view

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DataTable_Demo.Controllers
{
    public class CartController : Controller
    {
        //
        // GET: /Cart/
        private PMSEntities context = new PMSEntities();
        public class Cart_Deatails
        {
            public int PID { get; set; }

            public string Name { get; set; }
            public string Description { get; set; }
            public Nullable<double> Price { get; set; }

            public int Quantity { get; set; }
            public DateTime Date { get; set; }

            public double TotalPrice { get; set; }

        }
        public ActionResult Cart()
        {
            var joinedResult = (from u in context.Mst_Product
                                join u2 in context.Carts on u.PID equals u2.PID

                                select new Cart_Deatails
                                {
                                    PID=u.PID,
                                    Name = u.Name,
                                    Description = u.Description,
                                    Price = u.Price,
                                    Quantity=u2.Quantity,
                                    Date=u2.DateTime,
                                    TotalPrice=u2.TotalPrice



                                }).ToList();

            return View(joinedResult);
        }
        public ActionResult Invoice()
        {

            var joinedResult = (from u in context.Mst_Product
                                join u2 in context.Carts on u.PID equals u2.PID

                                select new Cart_Deatails
                                {
                                    PID = u.PID,
                                    Name = u.Name,
                                    Description = u.Description,
                                    Price = u.Price,
                                    Quantity = u2.Quantity,
                                    Date = u2.DateTime,
                                    TotalPrice = u2.TotalPrice



                                }).ToList();

            return View(joinedResult);

        }
        public JsonResult DeleteProduct(int id)
        {
            var result = new jsonMessage();
            try
            {


                var a = context.Carts.Where(x => x.PID == id).FirstOrDefault();
                context.Carts.Remove(a);
                context.SaveChanges();


                result.Message = "your product has been removed successfully..";
                result.Status = true;

            }
            catch (Exception ex)
            {
                ErrorLogers.ErrorLog(ex);
                result.Message = "We are unable to process your request at this time. Please try again later.";
                result.Status = false;
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }
        public JsonResult UpdateCart(int id, string Qty, string FinalAmount)
        {
            var result = new jsonMessage();
            try
            {

                Cart a = context.Carts.Where(x => x.PID == id).FirstOrDefault();


                //define the model

                a.PID = Convert.ToInt32(id);
                a.Quantity = Convert.ToInt32(Qty);
                a.TotalPrice = Convert.ToDouble(FinalAmount);


                //for Update cart..

                context.Entry(a).State = EntityState.Modified;
                    result.Message = "";
                    result.Status = true;

                context.SaveChanges();


            }
            catch (Exception ex)
            {
                ErrorLogers.ErrorLog(ex);
                result.Message = "We are unable to process your request at this time. Please try again later.";
                result.Status = false;
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

    }
}

@{
    ViewBag.Title = "Cart";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var count = 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="//code.jquery.com/jquery-1.12.4.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- add thids links for the error message-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>


<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-10 col-md-offset-1">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Quantity</th>
                        <th class="text-center">Price</th>
                        <th class="text-center">Total</th>
                        <th> </th>
                    </tr>
                </thead>
                <tbody>


                          @for(int i=0;i<Model.Count;i++)
                          {
                               count = Model.Count;
                    <tr>
                        <td class="col-sm-8 col-md-6">
                        <div class="media">
                            <a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
                            <div class="media-body">
                                <h4 class="media-heading"><a href="#">@Model[i].Name</a></h4>
                                <h5 class="media-heading"><a href="#">@Model[i].Description</a></h5>
                                <span>Status: </span><span class="text-success"><strong>In Stock</strong></span>
                            </div>
                        </div></td>
                        <td class="col-sm-1 col-md-1" style="text-align: center">
                        <input type="email" class="form-control" id="exampleInputEmail1_@i" onkeypress = "return isNumberKey(event)" onkeyup="counttotal('@Model[i].Price',@i,@Model[i].PID);" value="@Model[i].Quantity">
                        </td>
                        <td class="col-sm-1 col-md-1 text-center"><strong id="pricecount_@i">@Model[i].Price</strong></td>
                        <td class="col-sm-1 col-md-1 text-center"><strong id="finaltotal_@i">@Model[i].TotalPrice</strong></td>
                        <td class="col-sm-1 col-md-1">
                        <button type="button" class="btn btn-danger" onclick="removeproduct('@Model[i].PID')">
                            <span class="glyphicon glyphicon-remove"></span> Remove
                        </button></td>
                    </tr>
                      }

                    <tr>
                        <td>   </td>
                        <td>   </td>
                        <td>   </td>
                        <td><h5>Subtotal</h5></td>
                        <td class="text-right"><h5><strong id="setprice">0</strong></h5></td>
                    </tr>
                    <tr>
                        <td>   </td>
                        <td>   </td>
                        <td>   </td>
                        <td><h5>Estimated shipping</h5></td>
                        <td class="text-right"><h5><strong id="">0</strong></h5></td>
                    </tr>
                    <tr>
                        <td>   </td>
                        <td>   </td>
                        <td>   </td>
                        <td><h3>Total</h3></td>
                        <td class="text-right"><h3><strong id="setfinaltotal">0</strong></h3></td>
                    </tr>
                    <tr>
                        <td>   </td>
                        <td>   </td>
                        <td>   </td>
                        <td>
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping
                        </button></td>
                        <td>
                        <button type="button" class="btn btn-success" onclick="generateinvoice();">
                            Checkout <span class="glyphicon glyphicon-play"></span>
                        </button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/ecmascript">
    $(document).ready(function () {

        Calculateinvoice();


    });
    function generateinvoice() {


        window.location.href = '@Url.Action("Invoice", "Cart")';
         //TempData["finaltotal"] = $("#setfinaltotal").val();
         //TempData["subtotal"] = $("#setprice").val();

    }
    function removeproduct(pid) {
        var PID = pid;
        $('#dvLoader').show();
        $.ajax({
            url: '@Url.Action("DeleteProduct", "Cart")',
                        type: 'POST',
                        data: JSON.stringify({ "id": PID }),
                        contentType: 'application/json; charset=utf-8;',
                        success: function (result) {

                            $('#dvLoader').hide();

                            if (result.Status == "True") {
                                toastr.success(result.Message);
                                location.reload();
                            }
                            else {
                                toastr.success(result.Message);
                                location.reload();
                            }
                        }
                    });
    }
    function Calculateinvoice() {
        var Price = 0.0;
        var FinalToatal = 0.0;
        for (var i = 0; i < 2; i++) {
            Price += Number(($("#pricecount_" + i).text()));
            FinalToatal += Number(($("#finaltotal_" + i).text()));
        }
        $("#setprice").text(parseFloat(Price).toFixed(2));
        $("#setfinaltotal").text(parseFloat(FinalToatal).toFixed(2));


    }
    function counttotal(price, i,pid) {

        var PID = pid;
        var price=parseFloat(price).toFixed(2);
        var qnt = parseInt($("#exampleInputEmail1_" + i).val());
        if (qnt !== qnt) {
            $("#exampleInputEmail1_" + i).val(1);
            qnt = 1;
        }
        var total = price * qnt;

        $("#finaltotal_"+i).text(total);
        Calculateinvoice();

        updatecart(PID, qnt, total);

    }
    function updatecart(PID, qnt, total) {
        PID = parseInt(PID);
        $.ajax({
            url: '@Url.Action("UpdateCart", "Cart")',
            type: 'POST',
            data: JSON.stringify({ "id": PID, "Qty": qnt, "FinalAmount": total }),
            contentType: 'application/json; charset=utf-8;',
            success: function (result) {

            }
        });
    }
    function isNumberKey(evt) {
        var charcode = (evt.which) ? evt.which : evt.keycode
        if (charcode > 31 && (charcode < 48 || charcode > 58)
            && evt.keyCode != 35 && evt.keyCode != 36 && evt.keyCode != 37
            && evt.keyCode != 38 && evt.keyCode != 39 && evt.keyCode != 40
            && evt.keyCode != 46) {
            return false;
        }
        else {
            return true;
        }
    }
</script>