Manage Product And Quickly Add It To Cart

Step 1

Manage product, 
  1. @{  
  2.     ViewBag.Title = "Index";  
  3.    // Layout = null;  
  4. }  
  5.   
  6. <!-- Latest compiled and minified CSS -->  
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  8.   
  9. <!-- jQuery library -->  
  10. <script src="//code.jquery.com/jquery-1.12.4.js"></script>  
  11.   
  12. <!-- Latest compiled JavaScript -->  
  13. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  14.   
  15. <!-- add thids links for the error message-->  
  16. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" />  
  17. <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>  
  18.   
  19.   
  20. <!--add this link for the datatable-->  
  21. <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />  
  22. <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.csss" rel="stylesheet" />  
  23.   
  24. <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>  
  25. <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>  
  26.   
  27. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js" integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous"></script>  
  28.   
  29. <link href='http://fonts.googleapis.com/css?family=Work+Sans:400,600,700' rel='stylesheet' type='text/css'>  
  30. <h2>Product Master</h2>  
  31. <hr />  
  32. <style>  
  33.     .red_border {  
  34.         border: 1px solid #e46262;  
  35.     }  
  36.      .LoadingDiv {  
  37.             top: 0;  
  38.             left: 0;  
  39.             position: fixed;  
  40.             opacity: 0.97;  
  41.             z-index: 10000000;  
  42.             background: Black;  
  43.             height: 100%;  
  44.             width: 100%;  
  45.             margin: auto;  
  46.         }  
  47.     .dataTables_filter {  
  48.         float:right;  
  49.     }  
  50. </style>  
  51. <div class="col-md-12">  
  52.     <div class="col-md-4"></div>  
  53.     <div class="col-md-4">  
  54.         <div class="col-md-12">  
  55.             <label>Product Name :</label>  
  56.             <input class="form-control required" type="text" id="txtName" required />  
  57.         </div>  
  58.         <div class="col-md-12">  
  59.             <label>Product Descreption :</label>  
  60.             <textarea class="form-control required" id="txtDesc"></textarea>  
  61.         </div>  
  62.         <div class="col-md-12">  
  63.             <label>Product Price :</label>  
  64.             <input class="form-control required" onkeypress = "return isNumberKey(event)" id="txtPrice" type="text" required />  
  65.         </div>  
  66.         <div class="col-md-12">  
  67.             <br />  
  68.             <input id="btnSave" class="btn btn-success" type="button" value="Save Product" />  
  69.             <input id="btnCancel" class="btn btn-danger" type="button" value="Cancel" />  
  70.   
  71.         </div>  
  72.   
  73.     </div>  
  74.     <div class="col-md-4"></div>  
  75.   
  76.   
  77.   
  78. </div>  
  79. <div class="col-md-12">  
  80.     <table id="tblProduct" class="table table-striped table-bordered" width="100%">  
  81.         <thead>  
  82.             <tr>  
  83.                
  84.                 <th >Product_ID</th>  
  85.                 <th>Name</th>  
  86.                 <th>Description</th>  
  87.                 <th>Price</th>  
  88.                 <th>Action</th>  
  89.   
  90.             </tr>  
  91.         </thead>  
  92.           
  93.     </table>  
  94. </div>  
  95. <div id="dvLoader" class="LoadingDiv" style="display: none;">  
  96.     <table style="height: 100%; margin: auto;">  
  97.         <tr>  
  98.             <td style="vertical-align: middle;">  
  99.                 <center>  
  100.                         <img src="http://www.girlsgotit.org/images/ajax-loader.gif"  alt="Loading" />  
  101.                     </center>  
  102.             </td>  
  103.         </tr>  
  104.     </table>  
  105. </div>  
  106. <input type="hidden" id="hdnPID" value="0" />  
  107. <script type="text/javascript">  
  108.       
  109.     $(document).ready(function () {  
  110.         
  111.         windowResize();  
  112.         $(window).resize(function () {  
  113.             windowResize();  
  114.         });  
  115.         $('#toast-container').find('.toast-top-center').removeClass('.toast-top-center');  
  116.         toastr.options = {  
  117.             "closeButton"true,  
  118.             'autoWidth'false,  
  119.             "debug"false,  
  120.             "newestOnTop"true,  
  121.             "progressBar"true,  
  122.             "positionClass""toast-top-center",  
  123.             "preventDuplicates"false,  
  124.             "onclick": null,  
  125.             "showDuration""300",  
  126.             "hideDuration""1000",  
  127.             "timeOut""3000",  
  128.             "extendedTimeOut""1000",  
  129.             "showEasing""swing",  
  130.             "hideEasing""linear",  
  131.             "showMethod""fadeIn",  
  132.             "hideMethod""fadeOut"  
  133.         }  
  134.   
  135.         $("#btnSave").click(function () {  
  136.             var PID = $("#hdnPID").val();  
  137.             var Name = $("#txtName").val();  
  138.             var Desc = $("#txtDesc").val();  
  139.             var Price = parseFloat($("#txtPrice").val()).toFixed(2);  
  140.             if (CheckRequiredFields()) {  
  141.   
  142.                 $('#dvLoader').show();  
  143.                 $.ajax({  
  144.                     url: '@Url.Action("SaveAndUpdateProduct", "Home")',  
  145.                         type: 'POST',  
  146.                         data: JSON.stringify({ "PID": parseInt(PID), "Name": Name, "Description": Desc, "price": Price }),  
  147.                         dataType: "json",  
  148.                         contentType: "application/json; charset=utf-8",  
  149.                         success: function (result) {  
  150.                             $('#dvLoader').hide();  
  151.   
  152.                             if (result.Status == "True") {  
  153.                                 toastr.success(result.Message);  
  154.                                 clear();  
  155.                                 display();  
  156.                             }  
  157.                             else {  
  158.                                 toastr.success(result.Message);  
  159.                                 clear();  
  160.                                 display();  
  161.   
  162.                             }  
  163.                         }  
  164.                     });  
  165.   
  166.                 }  
  167.   
  168.         });  
  169.   
  170.         $("#btnCancel").click(function () {  
  171.             clear();  
  172.         });  
  173.   
  174.     });  
  175.         function CheckRequiredFields() {  
  176.             var isValid = true;  
  177.             $('.required').each(function () {  
  178.                 if ($.trim($(this).val()) == '') {  
  179.                     isValid = false;  
  180.                     $(this).addClass('red_border');  
  181.   
  182.   
  183.                 }  
  184.                 else {  
  185.                     $(this).removeClass('red_border');  
  186.   
  187.                 }  
  188.             });  
  189.             return isValid;  
  190.         }  
  191.   
  192.         function checkemail(valemail) {  
  193.             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})(\]?)$/;  
  194.             if (forgetfilter.test(valemail)) {  
  195.                 return true;  
  196.             }  
  197.             else {  
  198.                 return false;  
  199.             }  
  200.         }  
  201.         function clear() {  
  202.             $("#txtName").val("");  
  203.             $("#txtDesc").val("");  
  204.             $("#txtPrice").val("");  
  205.             $('#btnSave').val("Save Product");  
  206.             $("#hdnPID").val(0);  
  207.         }  
  208.         function display() {  
  209.             $('#dvLoader').show();  
  210.             Table = $('#tblProduct').DataTable({  
  211.   
  212.                 "processing"true,  
  213.                 "serverSide"false,  
  214.                 "paging"true,  
  215.                 "ordering"true,  
  216.                 "info"true,  
  217.                 "searching"true,  
  218.                 "bFilter"false,  
  219.                 "scrollX""100%",  
  220.                 "scrollY": ($(window).height() - 500),  
  221.                 "sScrollXInner""100%",  
  222.                 "bScrollCollapse"true,  
  223.                 "sAjaxSource"'@Url.Action("GetProduct","Home")',  
  224.                 "bDestroy"true,  
  225.                 "bLengthChange"true,  
  226.                 "bPaginate"true,  
  227.                 "sEmptyTable""Loading data from server",  
  228.   
  229.                 "columns": [  
  230.                        
  231.                     {  
  232.                         "sWidth""5%",  
  233.                         "sClass""TextCenter PID",  
  234.                         "render": function (data, type, row) {  
  235.                             return row[0];  
  236.                         }  
  237.                     },  
  238.                     { "sWidth""5%""sClass""TextCenter Name""render": function (data, type, row ) { return (row[1]); } },  
  239.                     { "sWidth""5%""sClass""TextCenter Desc""render": function (data, type, row ) { return (row[2]); } },  
  240.                     { "sWidth""5%""sClass""TextCenter Price""render": function (data, type, row ) { return (row[3]); } },  
  241.   
  242.                      {  
  243.                          "bSortable"false,  
  244.                          "sClass""TextCenter",  
  245.                          "sWidth""3%",  
  246.                          "render": function (data, type, row) {  
  247.                              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>';  
  248.                          }, "targets": 0,  
  249.                      }  
  250.   
  251.                 ],  
  252.                 
  253.             });  
  254.             $('#dvLoader').hide();  
  255.         }  
  256.     function windowResize() {  
  257.         display();  
  258.          
  259.     };  
  260.     function deleteData(id) {  
  261.         var PID = parseInt(id);  
  262.         bootbox.confirm({  
  263.             title: 'Remove Customer',  
  264.             message: 'Are you sure want to delete this record?',  
  265.             buttons: {  
  266.                 'cancel': {  
  267.                     label: 'No',  
  268.                     className: 'btn-default pull-right'  
  269.                 },  
  270.                 'confirm': {  
  271.                     label: 'Yes',  
  272.                     className: 'btn-primary margin-right-5'  
  273.                 }  
  274.             },  
  275.             callback: function (result) {  
  276.                 if (result) {  
  277.                     $('#dvLoader').show();  
  278.                     $.ajax({  
  279.                         url: '@Url.Action("DeleteProduct", "Home")',  
  280.                         type: 'POST',  
  281.                         data: JSON.stringify({ "id": id }),  
  282.                         contentType: 'application/json; charset=utf-8;',  
  283.                         success: function (result) {  
  284.                             windowResize();  
  285.                             $('#dvLoader').hide();  
  286.   
  287.                             if (result.Status == "True") {  
  288.                                 toastr.success(result.Message);  
  289.                                 clear();  
  290.                             }  
  291.                             else {  
  292.                                 toastr.success(result.Message);  
  293.   
  294.                             }  
  295.                         }  
  296.                     });  
  297.                 }  
  298.             }  
  299.         });  
  300.     }  
  301.     function EditData(row) {  
  302.         debugger  
  303.         var PID = $(row).closest('tr').find('.PID').html();  
  304.         $("#hdnPID").val(parseInt(PID));  
  305.   
  306.         var Name = $(row).closest('tr').find('.Name').html();  
  307.         $('#txtName').val(Name);  
  308.   
  309.         var Desc = $(row).closest('tr').find('.Desc').html();  
  310.         $('#txtDesc').val(Desc);  
  311.   
  312.         var Price = $(row).closest('tr').find('.Price').html();  
  313.         $('#txtPrice').val(Price);  
  314.   
  315.         $('#btnSave').val("Update Product");  
  316.     }  
  317.     function isNumberKey(evt) {  
  318.         var charcode = (evt.which) ? evt.which : evt.keycode  
  319.         if (charcode > 31 && (charcode < 48 || charcode > 58)  
  320.             && evt.keyCode != 35 && evt.keyCode != 36 && evt.keyCode != 37  
  321.             && evt.keyCode != 38 && evt.keyCode != 39 && evt.keyCode != 40  
  322.             && evt.keyCode != 46) {  
  323.             return false;  
  324.         }  
  325.         else {  
  326.             return true;  
  327.         }  
  328.     }  
  329. </script>  
Step 2

Code of controller to manage product 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace DataTable_Demo.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.         //  
  13.         // GET: /Home/  
  14.         private PMSEntities context = new PMSEntities();  
  15.   
  16.         public ActionResult Index()  
  17.         {  
  18.             return View();  
  19.         }  
  20.         public JsonResult SaveAndUpdateProduct(int PID,string Name, string Description, float Price)  
  21.         {  
  22.             var result = new jsonMessage();  
  23.             try  
  24.             {  
  25.                 //define the model  
  26.                 Mst_Product _Mst_Product = new Mst_Product();  
  27.                 _Mst_Product.PID = PID;  
  28.                 _Mst_Product.Name = Name;  
  29.                 _Mst_Product.Description = Description;  
  30.                 _Mst_Product.Price = Price;  
  31.   
  32.   
  33.                //for insert recored..  
  34.                 if (_Mst_Product.PID == 0)  
  35.                 {  
  36.                     context.Mst_Product.Add(_Mst_Product);  
  37.                     result.Message = "your product has been saved success..";  
  38.                     result.Status = true;  
  39.                 }  
  40.                 else  //for update recored..  
  41.                 {  
  42.                     context.Entry(_Mst_Product).State = EntityState.Modified;  
  43.                     result.Message = "your product has been updated successfully..";  
  44.                     result.Status = true;  
  45.                 }  
  46.                 context.SaveChanges();  
  47.                   
  48.   
  49.             }  
  50.             catch (Exception ex)  
  51.             {  
  52.                 ErrorLogers.ErrorLog(ex);  
  53.                 result.Message = "We are unable to process your request at this time. Please try again later.";  
  54.                 result.Status = false;  
  55.             }  
  56.             return Json(result, JsonRequestBehavior.AllowGet);  
  57.         }  
  58.          
  59.         public JsonResult GetProduct()  
  60.         {  
  61.   
  62.             List<Mst_Product> _list = new List<Mst_Product>();  
  63.              
  64.             try  
  65.             {  
  66.                 _list = context.Mst_Product.ToList();  
  67.                      var  result = from c in _list  
  68.                          select new[]  
  69.                          {  
  70.                           Convert.ToString( c.PID ),  // 0     
  71.                           Convert.ToString( c.Name ),  // 1     
  72.                           Convert.ToString( c.Description ),  // 2     
  73.                           Convert.ToString( c.Price ),  // 3     
  74.                                                    };  
  75.   
  76.                      return Json(new  
  77.                      {  
  78.                         aaData= result  
  79.                      }, JsonRequestBehavior.AllowGet);  
  80.             }  
  81.   
  82.             catch (Exception ex)  
  83.             {  
  84.                 ErrorLogers.ErrorLog(ex);  
  85.                 return Json(new  
  86.                 {  
  87.                     aaData = new List<string[]> { }  
  88.                 }, JsonRequestBehavior.AllowGet);  
  89.             }  
  90.               
  91.         }  
  92.   
  93.         public JsonResult DeleteProduct(int id)  
  94.         {  
  95.             var result = new jsonMessage();  
  96.             try  
  97.             {  
  98.   
  99.                 var product = new Mst_Product { PID = id };  
  100.                 context.Entry(product).State = EntityState.Deleted;  
  101.                 context.SaveChanges();  
  102.   
  103.                   
  104.                 result.Message = "your product has been deleted successfully..";  
  105.                 result.Status = true;  
  106.   
  107.             }  
  108.             catch (Exception ex)  
  109.             {  
  110.                 ErrorLogers.ErrorLog(ex);  
  111.                 result.Message = "We are unable to process your request at this time. Please try again later.";  
  112.                 result.Status = false;  
  113.             }  
  114.             return Json(result, JsonRequestBehavior.AllowGet);  
  115.         }  
  116.          
  117.     }  
  118. }  
Step 3

Add the Product controller and product view for the show product  page List. 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7.   
  8. namespace DataTable_Demo.Controllers  
  9. {  
  10.     public class ProductController : Controller  
  11.     {  
  12.         //  
  13.         // GET: /Product/  
  14.         private PMSEntities context = new PMSEntities();  
  15.   
  16.         public ActionResult Product()  
  17.         {  
  18.             List<Mst_Product> _list = new List<Mst_Product>();  
  19.             _list = context.Mst_Product.ToList();  
  20.             return View(_list);  
  21.         }  
  22.         public JsonResult AddToCart(int PID)  
  23.         {  
  24.             var result = new jsonMessage();  
  25.             try  
  26.             {  
  27.   
  28.                 Mst_Product _Mst_Product = context.Mst_Product.Where(t => t.PID == PID).FirstOrDefault();  
  29.   
  30.                 //define the model of crt  
  31.                 Cart _Cart = new Cart();  
  32.                 _Cart.PID = PID;  
  33.                 _Cart.Quantity = 1;  
  34.                 _Cart.DateTime = System.DateTime.Now;  
  35.                 _Cart.TotalPrice = Convert.ToDouble(_Mst_Product.Price);  
  36.   
  37.                 context.Carts.Add(_Cart);  
  38.                 result.Message = "your product has been Added in to cart..";  
  39.                 result.Status = true;  
  40.   
  41.                 context.SaveChanges();  
  42.   
  43.   
  44.             }  
  45.             catch (Exception ex)  
  46.             {  
  47.                 ErrorLogers.ErrorLog(ex);  
  48.                 result.Message = "We are unable to process your request at this time. Please try again later.";  
  49.                 result.Status = false;  
  50.             }  
  51.             return Json(result, JsonRequestBehavior.AllowGet);  
  52.         }  
  53.   
  54.     }  
  55. }  
  1. @{  
  2.     ViewBag.Title = "Product";  
  3.     Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5. <!-- Latest compiled and minified CSS -->  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  7.   
  8. <!-- jQuery library -->  
  9. <script src="//code.jquery.com/jquery-1.12.4.js"></script>  
  10.   
  11. <!-- Latest compiled JavaScript -->  
  12. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  13.   
  14. <!-- add thids links for the error message-->  
  15. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" />  
  16. <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>  
  17.   
  18.   
  19. @*<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">  
  20.   
  21.   
  22. <div class="w3-panel w3-animate-opacity">  
  23.     <div class="w3-tag w3-jumbo">S</div>  
  24.     <div class="w3-tag w3-jumbo">A</div>  
  25.     <div class="w3-tag w3-jumbo">L</div>  
  26.     <div class="w3-tag w3-jumbo">E</div>  
  27. </div>  
  28.   
  29.   
  30.   
  31. <div class="w3-row-padding">  
  32.      @foreach (var item in Model) {  
  33.     <div class="w3-third">  
  34.         <div class="w3-card">  
  35.             <div class="w3-container w3-red">  
  36.                 <h1><b>@item.Name</b></h1>  
  37.             </div>  
  38.             <div class="w3-container w3-xlarge">  
  39.                 <p>  
  40.                     @item.Name<br>  
  41.                     <i><b>@item.Description</b></i><br>  
  42.                     <span class="w3-xxlarge w3-text-red"><b>@item.Name</b></span>  
  43.                 </p>  
  44.                 <p>  
  45.                     <del>$400</del> <span class="w3-tag w3-yellow">New!</span><br>  
  46.                     Now only @item.Price !!!  
  47.                 </p>  
  48.             </div>  
  49.             <div class="w3-container w3-red">  
  50.                 <p class="w3-opacity">Contact: Bhavdip-9825891108</p>  
  51.             </div>  
  52.         </div>  
  53.         <br />  
  54.     </div>  
  55.      }  
  56. </div>*@  
  57.   
  58.   
  59.   
  60.   
  61. <!doctype html>  
  62. <html lang="en" class="no-js">  
  63. <head>  
  64.     <meta charset="UTF-8">  
  65.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  66.   
  67.     <link href='http://fonts.googleapis.com/css?family=Work+Sans:400,600,700' rel='stylesheet' type='text/css'>  
  68.     <link href="~/Content/css/reset.css" rel="stylesheet" />  
  69.   
  70.     <link href="~/Content/css/style.css" rel="stylesheet" />  
  71.     <script src="~/Content/js/modernizr.js"></script>  
  72.   
  73.   
  74.     <title>Document</title>  
  75. </head>  
  76.     <style>  
  77.     .red_border {  
  78.         border: 1px solid #e46262;  
  79.     }  
  80.      .LoadingDiv {  
  81.             top: 0;  
  82.             left: 0;  
  83.             position: fixed;  
  84.             opacity: 0.97;  
  85.             z-index: 10000000;  
  86.             background: Black;  
  87.             height: 100%;  
  88.             width: 100%;  
  89.             margin: auto;  
  90.         }  
  91.     .dataTables_filter {  
  92.         float:right;  
  93.     }  
  94. </style>  
  95. <body>  
  96.     <div id="dvLoader" class="LoadingDiv" style="display: none;">  
  97.     <table style="height: 100%; margin: auto;">  
  98.         <tr>  
  99.             <td style="vertical-align: middle;">  
  100.                 <center>  
  101.                         <img src="http://www.girlsgotit.org/images/ajax-loader.gif"  alt="Loading" />  
  102.                     </center>  
  103.             </td>  
  104.         </tr>  
  105.     </table>  
  106. </div>  
  107.     <header>  
  108.         <h1>Quick Add to Cart</h1>  
  109.     </header>  
  110.   
  111.     <a href="@Url.Action("Cart","Cart")" class="cd-cart">  
  112.         <span>0</span>  
  113.     </a>  
  114.   
  115.     <ul class="cd-gallery">  
  116.   
  117.         @foreach (var item in Model) {  
  118.   
  119.         <li>  
  120.             <div class="cd-single-item">  
  121.                   
  122.                 <a href="#0">  
  123.                     <ul class="cd-slider-wrapper">  
  124.                         <li>  
  125.                             <img src="~/Content/img/thumb-1.jpg" alt="Preview image"></li>  
  126.                         <li>  
  127.                             <img src="~/Content/img/thumb-2.jpg" alt="Preview image"></li>  
  128.                         <li class="selected">  
  129.                             <img src="~/Content/img/thumb-1.jpg" alt="Preview image"></li>  
  130.                     </ul>  
  131.                 </a>  
  132.                  
  133.                 <div class="cd-customization">  
  134.                     
  135.                     <div class="color selected-3" data-type="select">  
  136.                         <ul>  
  137.                             <li class="color-1">color-1</li>  
  138.                             <li class="color-2">color-2</li>  
  139.                             <li class="color-3 active">color-3</li>  
  140.                         </ul>  
  141.                     </div>  
  142.   
  143.                     <div class="size" data-type="select">  
  144.                         <ul>  
  145.                             <li class="small active">Small</li>  
  146.                             <li class="medium">Medium</li>  
  147.                             <li class="large">Large</li>  
  148.                         </ul>  
  149.                     </div>  
  150.                      
  151.                     <button class="add-to-cart" onclick="AddToCart('@item.PID');">  
  152.                         <em>Add to Cart</em>  
  153.                         <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">  
  154.                             <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" />  
  155.                         </svg>  
  156.                     </button>  
  157.                 </div>  
  158.                 <!-- .cd-customization -->  
  159.   
  160.                 <button class="cd-customization-trigger">Customize</button>  
  161.             </div>  
  162.             <!-- .cd-single-item -->  
  163.   
  164.             <div class="cd-item-info">  
  165.                 <b><a href="#0">@item.Name</a></b>  
  166.                 <br /><span style="font-weight:normal;font-family:Arial;font-size:15px;color:gray">@item.Description</span>  
  167.                 <em>$@item.Price</em>  
  168.             </div>  
  169.             <!-- cd-item-info -->  
  170.         </li>  
  171.         }  
  172.           
  173.     </ul>  
  174.     <!-- cd-gallery -->  
  175.     @*<script src="js/jquery-2.1.4.js"></script>*@  
  176.      
  177.     <script src="~/Content/js/main.js"></script>  
  178.     <!-- Resource jQuery -->  
  179. </body>  
  180. </html>  
  181. <script type="text/javascript">  
  182.     $(document).ready(function () {  
  183.           
  184.     });  
  185.     function AddToCart(PID) {  
  186.         var PID = PID  
  187.         $('#dvLoader').show();  
  188.         $.ajax({  
  189.             url: '@Url.Action("AddToCart", "Product")',  
  190.                 type: 'POST',  
  191.                 data: JSON.stringify({ "PID": parseInt(PID) }),  
  192.                 dataType: "json",  
  193.                 contentType: "application/json; charset=utf-8",  
  194.                 success: function (result) {  
  195.                     $('#dvLoader').hide();  
  196.   
  197.                     if (result.Status == "True") {  
  198.                         toastr.success(result.Message);  
  199.                         clear();  
  200.                         display();  
  201.                     }  
  202.                     else {  
  203.                         toastr.success(result.Message);  
  204.                         clear();  
  205.                         display();  
  206.   
  207.                     }  
  208.                 }  
  209.             });  
  210.         }  
  211. </script>  
Step 4

Add the cart controller and add the cart view
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace DataTable_Demo.Controllers  
  9. {  
  10.     public class CartController : Controller  
  11.     {  
  12.         //  
  13.         // GET: /Cart/  
  14.         private PMSEntities context = new PMSEntities();  
  15.         public class Cart_Deatails  
  16.         {  
  17.             public int PID { get; set; }  
  18.   
  19.             public string Name { get; set; }  
  20.             public string Description { get; set; }  
  21.             public Nullable<double> Price { get; set; }  
  22.   
  23.             public int Quantity { get; set; }  
  24.             public DateTime Date { get; set; }  
  25.   
  26.             public double TotalPrice { get; set; }  
  27.   
  28.         }  
  29.         public ActionResult Cart()  
  30.         {  
  31.             var joinedResult = (from u in context.Mst_Product  
  32.                                 join u2 in context.Carts on u.PID equals u2.PID  
  33.   
  34.                                 select new Cart_Deatails  
  35.                                 {  
  36.                                     PID=u.PID,  
  37.                                     Name = u.Name,  
  38.                                     Description = u.Description,  
  39.                                     Price = u.Price,  
  40.                                     Quantity=u2.Quantity,  
  41.                                     Date=u2.DateTime,  
  42.                                     TotalPrice=u2.TotalPrice  
  43.   
  44.   
  45.   
  46.                                 }).ToList();  
  47.   
  48.             return View(joinedResult);  
  49.         }  
  50.         public ActionResult Invoice()  
  51.         {  
  52.   
  53.             var joinedResult = (from u in context.Mst_Product  
  54.                                 join u2 in context.Carts on u.PID equals u2.PID  
  55.   
  56.                                 select new Cart_Deatails  
  57.                                 {  
  58.                                     PID = u.PID,  
  59.                                     Name = u.Name,  
  60.                                     Description = u.Description,  
  61.                                     Price = u.Price,  
  62.                                     Quantity = u2.Quantity,  
  63.                                     Date = u2.DateTime,  
  64.                                     TotalPrice = u2.TotalPrice  
  65.   
  66.   
  67.   
  68.                                 }).ToList();  
  69.   
  70.             return View(joinedResult);  
  71.   
  72.         }  
  73.         public JsonResult DeleteProduct(int id)  
  74.         {  
  75.             var result = new jsonMessage();  
  76.             try  
  77.             {  
  78.   
  79.                   
  80.                 var a = context.Carts.Where(x => x.PID == id).FirstOrDefault();  
  81.                 context.Carts.Remove(a);  
  82.                 context.SaveChanges();  
  83.   
  84.   
  85.                 result.Message = "your product has been removed successfully..";  
  86.                 result.Status = true;  
  87.   
  88.             }  
  89.             catch (Exception ex)  
  90.             {  
  91.                 ErrorLogers.ErrorLog(ex);  
  92.                 result.Message = "We are unable to process your request at this time. Please try again later.";  
  93.                 result.Status = false;  
  94.             }  
  95.             return Json(result, JsonRequestBehavior.AllowGet);  
  96.         }  
  97.         public JsonResult UpdateCart(int id, string Qty, string FinalAmount)  
  98.         {  
  99.             var result = new jsonMessage();  
  100.             try  
  101.             {  
  102.   
  103.                 Cart a = context.Carts.Where(x => x.PID == id).FirstOrDefault();  
  104.   
  105.   
  106.                 //define the model  
  107.                 
  108.                 a.PID = Convert.ToInt32(id);  
  109.                 a.Quantity = Convert.ToInt32(Qty);  
  110.                 a.TotalPrice = Convert.ToDouble(FinalAmount);  
  111.                 
  112.   
  113.                 //for Update cart..  
  114.   
  115.                 context.Entry(a).State = EntityState.Modified;  
  116.                     result.Message = "";  
  117.                     result.Status = true;  
  118.                   
  119.                 context.SaveChanges();  
  120.   
  121.   
  122.             }  
  123.             catch (Exception ex)  
  124.             {  
  125.                 ErrorLogers.ErrorLog(ex);  
  126.                 result.Message = "We are unable to process your request at this time. Please try again later.";  
  127.                 result.Status = false;  
  128.             }  
  129.             return Json(result, JsonRequestBehavior.AllowGet);  
  130.         }  
  131.          
  132.     }  
  133. }  
  1. @{  
  2.     ViewBag.Title = "Cart";  
  3.     Layout = "~/Views/Shared/_Layout.cshtml";  
  4.     var count = 0;  
  5. }  
  6. <!-- Latest compiled and minified CSS -->  
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  8.   
  9. <!-- jQuery library -->  
  10. <script src="//code.jquery.com/jquery-1.12.4.js"></script>  
  11.   
  12. <!-- Latest compiled JavaScript -->  
  13. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  14.   
  15. <!-- add thids links for the error message-->  
  16. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" />  
  17. <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>  
  18.   
  19.   
  20. <div class="container">  
  21.     <div class="row">  
  22.         <div class="col-sm-12 col-md-10 col-md-offset-1">  
  23.             <table class="table table-hover">  
  24.                 <thead>  
  25.                     <tr>  
  26.                         <th>Product</th>  
  27.                         <th>Quantity</th>  
  28.                         <th class="text-center">Price</th>  
  29.                         <th class="text-center">Total</th>  
  30.                         <th> </th>  
  31.                     </tr>  
  32.                 </thead>  
  33.                 <tbody>  
  34.   
  35.                        
  36.                           @for(int i=0;i<Model.Count;i++)  
  37.                           {  
  38.                                count = Model.Count;  
  39.                     <tr>  
  40.                         <td class="col-sm-8 col-md-6">  
  41.                         <div class="media">  
  42.                             <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>  
  43.                             <div class="media-body">  
  44.                                 <h4 class="media-heading"><a href="#">@Model[i].Name</a></h4>  
  45.                                 <h5 class="media-heading"><a href="#">@Model[i].Description</a></h5>  
  46.                                 <span>Status: </span><span class="text-success"><strong>In Stock</strong></span>  
  47.                             </div>  
  48.                         </div></td>  
  49.                         <td class="col-sm-1 col-md-1" style="text-align: center">  
  50.                         <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">  
  51.                         </td>  
  52.                         <td class="col-sm-1 col-md-1 text-center"><strong id="pricecount_@i">@Model[i].Price</strong></td>  
  53.                         <td class="col-sm-1 col-md-1 text-center"><strong id="finaltotal_@i">@Model[i].TotalPrice</strong></td>  
  54.                         <td class="col-sm-1 col-md-1">  
  55.                         <button type="button" class="btn btn-danger" onclick="removeproduct('@Model[i].PID')">  
  56.                             <span class="glyphicon glyphicon-remove"></span> Remove  
  57.                         </button></td>  
  58.                     </tr>  
  59.                       }  
  60.                       
  61.                     <tr>  
  62.                         <td>   </td>  
  63.                         <td>   </td>  
  64.                         <td>   </td>  
  65.                         <td><h5>Subtotal</h5></td>  
  66.                         <td class="text-right"><h5><strong id="setprice">0</strong></h5></td>  
  67.                     </tr>  
  68.                     <tr>  
  69.                         <td>   </td>  
  70.                         <td>   </td>  
  71.                         <td>   </td>  
  72.                         <td><h5>Estimated shipping</h5></td>  
  73.                         <td class="text-right"><h5><strong id="">0</strong></h5></td>  
  74.                     </tr>  
  75.                     <tr>  
  76.                         <td>   </td>  
  77.                         <td>   </td>  
  78.                         <td>   </td>  
  79.                         <td><h3>Total</h3></td>  
  80.                         <td class="text-right"><h3><strong id="setfinaltotal">0</strong></h3></td>  
  81.                     </tr>  
  82.                     <tr>  
  83.                         <td>   </td>  
  84.                         <td>   </td>  
  85.                         <td>   </td>  
  86.                         <td>  
  87.                         <button type="button" class="btn btn-default">  
  88.                             <span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping  
  89.                         </button></td>  
  90.                         <td>  
  91.                         <button type="button" class="btn btn-success" onclick="generateinvoice();">  
  92.                             Checkout <span class="glyphicon glyphicon-play"></span>  
  93.                         </button></td>  
  94.                     </tr>  
  95.                 </tbody>  
  96.             </table>  
  97.         </div>  
  98.     </div>  
  99. </div>  
  100. <script type="text/ecmascript">  
  101.     $(document).ready(function () {  
  102.          
  103.         Calculateinvoice();  
  104.           
  105.   
  106.     });  
  107.     function generateinvoice() {  
  108.           
  109.           
  110.         window.location.href = '@Url.Action("Invoice", "Cart")';  
  111.          //TempData["finaltotal"] = $("#setfinaltotal").val();  
  112.          //TempData["subtotal"] = $("#setprice").val();  
  113.   
  114.     }  
  115.     function removeproduct(pid) {  
  116.         var PID = pid;  
  117.         $('#dvLoader').show();  
  118.         $.ajax({  
  119.             url: '@Url.Action("DeleteProduct", "Cart")',  
  120.                         type: 'POST',  
  121.                         data: JSON.stringify({ "id": PID }),  
  122.                         contentType: 'application/json; charset=utf-8;',  
  123.                         success: function (result) {  
  124.                              
  125.                             $('#dvLoader').hide();  
  126.   
  127.                             if (result.Status == "True") {  
  128.                                 toastr.success(result.Message);  
  129.                                 location.reload();  
  130.                             }  
  131.                             else {  
  132.                                 toastr.success(result.Message);  
  133.                                 location.reload();  
  134.                             }  
  135.                         }  
  136.                     });  
  137.     }  
  138.     function Calculateinvoice() {  
  139.         var Price = 0.0;  
  140.         var FinalToatal = 0.0;  
  141.         for (var i = 0; i < 2; i++) {  
  142.             Price += Number(($("#pricecount_" + i).text()));  
  143.             FinalToatal += Number(($("#finaltotal_" + i).text()));  
  144.         }  
  145.         $("#setprice").text(parseFloat(Price).toFixed(2));  
  146.         $("#setfinaltotal").text(parseFloat(FinalToatal).toFixed(2));  
  147.   
  148.         
  149.     }  
  150.     function counttotal(price, i,pid) {  
  151.         
  152.         var PID = pid;  
  153.         var price=parseFloat(price).toFixed(2);  
  154.         var qnt = parseInt($("#exampleInputEmail1_" + i).val());  
  155.         if (qnt !== qnt) {  
  156.             $("#exampleInputEmail1_" + i).val(1);  
  157.             qnt = 1;  
  158.         }  
  159.         var total = price * qnt;  
  160.           
  161.         $("#finaltotal_"+i).text(total);  
  162.         Calculateinvoice();  
  163.   
  164.         updatecart(PID, qnt, total);  
  165.   
  166.     }  
  167.     function updatecart(PID, qnt, total) {  
  168.         PID = parseInt(PID);  
  169.         $.ajax({  
  170.             url: '@Url.Action("UpdateCart", "Cart")',  
  171.             type: 'POST',  
  172.             data: JSON.stringify({ "id": PID, "Qty": qnt, "FinalAmount": total }),  
  173.             contentType: 'application/json; charset=utf-8;',  
  174.             success: function (result) {  
  175.   
  176.             }  
  177.         });  
  178.     }  
  179.     function isNumberKey(evt) {  
  180.         var charcode = (evt.which) ? evt.which : evt.keycode  
  181.         if (charcode > 31 && (charcode < 48 || charcode > 58)  
  182.             && evt.keyCode != 35 && evt.keyCode != 36 && evt.keyCode != 37  
  183.             && evt.keyCode != 38 && evt.keyCode != 39 && evt.keyCode != 40  
  184.             && evt.keyCode != 46) {  
  185.             return false;  
  186.         }  
  187.         else {  
  188.             return true;  
  189.         }  
  190.     }  
  191. </script>