var urlProduct = "~/../Products"; var productsData; var ProductViewModel = function () { var self = this; $.ajax({ url: urlProduct + '/AllProducts', async: false, dataType: 'json', success: function (json) { self.productsData = json; } }); self.editProductInfo = function (product) { //alert("Get Product Info - for ID:" + product.ProductId); var self = this; $.ajax({ url: urlProduct + '/getProductInfo', async: false, dataType: 'json', success: function (json) { self.productsData = json; } }); } } ko.applyBindings(new ProductViewModel());
@{ ViewBag.Title = "Products"; Layout = "~/Views/Shared/_ProductFilter.cshtml"; } <script type="text/javascript"> function redirect12() { //alert('Successful Order Confirmation'); window.location.href = "@Url.Action("CheckOut", "Products")"; } function redirect13() { //alert('Successful Order Confirmation'); window.location.href = "@Url.Action("ShoppingBag", "Products")"; } </script> <!--Begin of the Products pagination --> <!-------------------------------------------------Begin of the Products Display----------------------------------------------------------------- --> <div class="row-fluid" data-bind="foreach: productsData"> <div class="span3" data-bind="click: $parent.editProductInfo" > <ul class="thumbnails" style="height:240px;"> <li > <div class="thumbnail zoom" id="wrapper" > <a href="#portfolioMod123" data-toggle="modal"> <div data-bind="foreach:ProductImages"> <!-- ko if: SortOrder === 1--> <img data-bind="attr:{src:Product_Image_path}" /> <!-- /ko --> </div> </a> <!-- Start: Modal --> <div class=" modal hide fade" id="portfolioMod123" tabindex="-1" role="dialog" aria-labelledby="portfolioList" aria-hidden="true" data-bind="foreach: productsData"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 id="myModalLabel">Fit2btied</h4> </div> <div class="modal-body "> <div class="center-align span4 "> <img data-bind="attr:{src:Product_Image_path}" class ="bottom-space-less thumbnail" alt="image name"> </div> <div class="center-align span8" style="border:1px solid #EDEDED; padding:5px;"> <h4 style="color:#66F;">Fit2btied</h4> Item #: 12345 <div ng-controller="RatingDemoCtrl" style="border-removed1px solid #ACACAC"><rating value="rate" max="5" readonly="isReadonly"></rating></div> <h6>Reg : $27.00 <span style="color:#C00; font-size:14pxpx;">Sale : $20.25</span> Save : 25%</h6> Size : <br /> Color : <br /> <label>Qty : <input type="text" id="quantity" name="quantity" value="1" class="span1" /> </label> </div> </div> <div class="tabbable"> <!-- Only required for left/right tabs --> <ul class="nav nav-tabs "> <li class="active"><a href="#tab1" data-toggle="tab">Description</a></li> <li><a href="#tab2" data-toggle="tab">Rating & Review</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>Procesing </p> </div> <div class="tab-pane " id="tab2"> <div class="hero-unit span6" style="padding:5px;"> Write A Review <form class="navbar-form "> <span class="btn-small">Your Name :</span> <input type="text" placeholder="Your Name" style="width:140px; height:16px; padding:2px 5px; line-height:16px; font-size:11px;"> <br /> <span class="btn-small">Your Review :</span> <textarea placeholder="Your Review" style="width:140px; height:40px; padding:2px 5px; font-size:11px;"></textarea> </form> </div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn large btn-primary" data-dismiss="modal">close</button> </div> </div> <!-- End: Modal --> <!-- End: Modal --> <div id="SL13" style="margin-removed0px; border-removed1px solid #dedede; height:20px">3 colors</div> <div class="text" id="SD13" style="display:block;"><img src="~/Images/thumb1.gif" /><img src="~/Images/thumb2.gif" /> <img src="~/Images/thumb3.gif" /><img src="~/Images/arrow.gif" align="right"/></div> @*<div ng-controller="RatingDemoCtrl"><rating value="rate" max="5" readonly="isReadonly"></rating></div>*@ <div style="margin-removed -3px;" data-bind="text:ProductName" ></div> <div style="font-weight: lighter;margin-removed 5px;" data-bind="foreach:ProductInfo" > <!-- ko if: Key === 'Price'--> <span style="color:#fe3c3e;" data-bind="text:Value"></span> <!-- /ko --> </div> <div class="text" id="SD1" ><button type="submit" class="btn btn-inverse btn-small" onclick="redirect13();" ><small style=" font-size:8px; ">^__strong>ADD TO BAG</small></button> <span style="float:right" align="top"><button type="submit" class="btn btn-danger btn-small" onclick="redirect12();" ><small style=" font-size:8px; ">CHECK OUT</small></button></span></div> </div> </li> </ul> </div> </div> <!-------------------------------------------------Begin of the Products Display----------------------------------------------------------------- --> <div class="span12 pull-left" style="height:30px; max-width: 780px; margin-removed1.5%;"> <ul class="breadcrumb"> <li >ITems <span class="divider">/</span></li> <li class="active"><a href="#">12</a> <span class="divider">/</span></li> <li ><a href="#">24 </a> <span class="divider">/</span></li> <li ><a href="#">48 </a> <span class="divider">/</span></li> <div class="pagination pagination-centered pull-right" style="margin-removed-5px;"> <ul> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">All</a></li> <li ><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">---</a></li> <li><a href="#">10</a></li> <li><a href="#">»</a></li> </ul> </div> </ul> </div> <!-- ============================== Left-NAV End ==================== --> <!-- End the collapse menu--> <table class="table table-striped table-bordered table-condensed"> <tr> <th> ProductId</th> <th> CategoryID</th> <th> ProductName</th> <th> ManufaturerId</th> <th> ItemNo</th> <th>DeletedInd</th> <th>ProductImages</th> <th> Edit</th> </tr> <tbody data-bind="foreach: productsData"> <tr> <td data-bind="text: ProductId"></td> <td data-bind="text: CategoryID"></td> <td data-bind="text: ProductName"></td> <td data-bind="text: ManufaturerId"></td> <td data-bind="text: ItemNo"></td> <td data-bind="text: DeletedInd"></td> <td data-bind="text: ProductImages"></td> <td><button class="btn btn-mini btn-danger" data-bind="click: $parent.editProductInfo">Edit</button></td> </tr> </tbody> </table> <script> $('.hover').mouseover(function () { $('.text').css("visibility", "visible"); }); $('.hover').mouseout(function () { $('.text').css("visibility", "hidden"); }); </script> <script> var RatingDemoCtrl = function ($scope) { $scope.rate = 4; $scope.isReadonly = false; }; </script> <script> var RatingDemoCtrl = function ($scope) { $scope.rate = 4; $scope.isReadonly = false; }; </script> <script type="text/javascript" src="~/Scripts/CartJS/ProductList.js"></script> <script src="~/Scripts/rating/1.0.5-angular.min.js"></script> <script src="~/Scripts/rating/ui-bootstrap-tpls-0.4.0.js"></script> <script src="~/Scripts/rating/ui-select2.js"></script> <script src="~/Scripts/rating/plunker.js"></script> <script src="~/Scripts/rating/app.js"></script> <!--<link href="js/rating/bootstrap.min.css" rel="stylesheet"/>--> <!--<link href="js/rating/bootstrap.min.css" rel="stylesheet"/>-->
<img id="productId" önclick="GetProduct(this)" />
<script type="text/javascript"> function GetProduct(productId) { //Send an ajax request to load the partial view with your selected product detail and return partial view html append to your pop div //and write down the code for showing popup } </script>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)