Manage Product And Quickly Add It To Cart

This blog will teach you how to manage product using insert, update, and delete. Then this inserted product is displayed in the product page and then added to the 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>