mvc 4与剃刀视图引擎 [英] mvc 4 with razor view engine
本文介绍了mvc 4与剃刀视图引擎的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在产品页面上工作，在这个页面中我显示了产品的图像。这些图像来自数据库。我的要求是我想在点击我想要的图像中的特定图像时显示一个警告弹出窗口根据特定图像的ID显示产品的所有信息。为此，我在.js文件中写下了以下代码。
I am working on product page,in this page i displayed the images of product.These images are coming from database.My requirement is i want to display one alert popup when click on particular image in that image i want to display all the information of the product according to the id of the particular image.For that i written the below code in .js file.
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());
现在我得到了所有与产品相关的数据。但我的问题是我无法在popup中绑定数据。下面是我的.cshtml代码。
Now i got all the product related data.But My problem is i am not able to bind the data in popup.And below is my .cshtml code.
@{
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;">
Rating
<h6>Here Rating script</h6>
</div>
<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; ">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"/>-->
Please make some changes for it
推荐答案
.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 + '/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());
.ajax({ url: urlProduct + '/getProductInfo', async: false, dataType: 'json', success: function (json) { self.productsData = json; } }); } } ko.applyBindings(new ProductViewModel());
Now i got all the product related data.But My problem is i am not able to bind the data in popup.And below is my .cshtml code.
Now i got all the product related data.But My problem is i am not able to bind the data in popup.And below is my .cshtml code.
@{
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\" >
\t\t <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< span class=\"code-attribute\"> 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 :
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 :
这篇关于mvc 4与剃刀视图引擎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
