//MVC显示

GetList(1);
function GetList(index) {
$.ajax({
url: ‘http://localhost:4480/api/Default/GetShopShow‘,
type: ‘get‘,
data: { pageindex: index,pagesize:3 },
dataType: ‘json‘,
success: function (d) {
$("#bod").empty();
$("#fen").empty();
$(d.ShoppingProduct).each(function () {
$("#bod").append(
‘<tr>‘ +
‘<td>‘ + this.SPid + ‘</td>‘ +
‘<td><img src="http://localhost:13891/img/‘ + this.SPpicture + ‘" width="60" height="120"/></td>‘ +
‘<td>‘ + this.SPname + ‘</td>‘ +
‘<td>‘ + this.SPrice + ‘</td>‘ +
‘<td><a onclick="Lo(‘+this.SPid+‘)">详情</a></td>‘ +
‘</tr>‘
)
})
for (var i = 1; i <= d.Pages; i++) {
$("#fen").append(
‘【<a onclick="GetList(‘ + i + ‘)">‘ + i + ‘</a>】‘
)
}
}
})
}

function Lo(id) {
location.href = "http://localhost:13891/Default/Xshow?ID=" + id;
}
</script>

//详情

<div>
<table id="info"></table>
</div>
<div>
<label>价格：</label><label id="price"></label>
</div>
<div><label>数量：</label><label id="num"></label></div>
<div id="miao">

</div>
<div id="colo">

</div>
<div id="size">

</div>
<div>
<label>评论:</label>
<table id="talk"></table>
</div>
<script>
var strid = parseInt(location.search.split("=")[1]);
GxShow();
ColorShow();
GetTalkShow();
function GxShow() {
$.ajax({
url: ‘http://localhost:4480/api/Default/GetXShow‘,
type: ‘get‘,
data: { pid: strid },
dataType: ‘json‘,
success: function (d) {
$("#info").empty();
$("#miao").empty();
$(d).each(function () {
$("#info").append(
‘<tr>‘ +
‘<td>‘ + this.SPname + ‘</td>‘ +
‘</tr>‘ +
‘<tr>‘ +
‘<td><img src="http://localhost:13891/img/‘ + this.SPpicture + ‘" width="60" height="120"/></td>‘ +
‘</tr>‘
)
$("#miao").append(
‘<label>描述：</label><label>‘ + this.SPmiao + ‘</label>‘
)
})
}
})
}

function ColorShow() {
$.ajax({
url: ‘http://localhost:4480/api/Default/GetColorShow‘,
type: ‘get‘,
data: { prid: strid },
dataType: ‘json‘,
success: function (d) {
$("#colo").empty();
$(d).each(function () {
$("#colo").append(
‘<input type="button" value="‘ + this.Cname + ‘" onclick="SizeShow(‘ + this.Cid + ‘)"/>‘
)
})
}
})
}

function SizeShow(id) {
$.ajax({
url: ‘http://localhost:4480/api/Default/GetSizeShow‘,
type: ‘get‘,
data: { prid: strid, Coid: id },
dataType: ‘json‘,
success: function (d) {
$("#size").empty();
$(d).each(function () {
$("#size").append(
‘<input type="button" value="‘ + this.SIname + ‘" onclick="GetPrice(‘ + this.SIid + ‘,‘ + id + ‘)"/>‘
)
})

}
})
}

function GetPrice(id, cid) {
$.ajax({
url: ‘http://localhost:4480/api/Default/GetPriceShow‘,
type: ‘get‘,
data: { Coid: cid, sizeid: id },
dataType: ‘json‘,
success: function (d) {
$("#price").empty();
$("#price").text(d.Price);
GetNum(cid, id);
}
})
}

function GetNum(cid, sid) {
$.ajax({
url: ‘http://localhost:4480/api/Default/GetNumShow‘,
type: ‘get‘,
data: { Coid: cid, Sizid: sid },
dataType: ‘json‘,
success: function (d) {
$("#num").empty();
$("#num").text(d.Num);
}
})
}

function GetTalkShow() {
$.ajax({
url: ‘http://localhost:4480/api/Default/GetTalk‘,
type: ‘get‘,
data: { prid: strid },
dataType: ‘json‘,
success: function (d) {
$("#talk").empty();
$(d).each(function () {
$("#talk").append(
‘<tr class="table table-bordered">‘ +
‘<td>‘ + this.Tbody + ‘</td>‘ +
‘</tr>‘
)
})
}
})
}
</script>

@{
ViewBag.Title = "Detail";
}

<h2>Detail</h2>

<table>
<tr>
<td>
<img id="img1" src="" width="300" height="400"/>
</td>
<td>
<table>
<tr>
<td id="td1"> </td>
</tr>
<tr>
<td id="td2"> </td>
</tr>
<tr>
<td id="td3"> </td>
</tr>
<tr>
<td id="td4">

</td>
</tr>
</table>
</td>
</tr>
</table>

<script>
var sku = [];
var OldPrice = "";
var currentSku = {};

function load() {
var id = @ViewBag.Id;
$.ajax({
url: ‘http://localhost:56334/api/Default/GetONe/‘+id,
type: ‘get‘,
dataType: ‘json‘,
success: function (data) {
$("#img1").attr("src", data.Imgs[0].ImageUrl);
$("#td1").text(data.Goods.Name);
$("#td2").text(data.Goods.Price);
OldPrice = data.Goods.Price;
sku = data.Sku;

$(data.Attr).each(function () {
$("#td3").append( this.AName +":"+this.Value +"<br/>");
});

$(data.SKUAttr).each(function () {
var str = "";
var check = "checked";
var values = $(this.AValue).each(function () {
str += "<input " + check + " type=‘radio‘ name=‘AA" + this.AttributeId + "‘ value=‘" + this.Value + "‘ onclick=‘changePrice()‘> " + this.Value
check = "";
});
$("#td4").append(
‘ <div>‘+ this.AName+
‘ ：‘+ str+
‘</div>‘)
});
}
});

}
load();

function changePrice() {
var price = "";

var s = [];
$(":radio:checked").each(function () {
s.push( $(this).val());
});

$(sku).each(function () {
var sign = 1;
for (var i = 0; i < s.length; i++) {
if (this.AttrStr.indexOf(s[i]) == -1) {
sign = 0;
}
}
if (sign == 1) {
price = this.Price + "";
currentSku = this;
}
});

if (price != "")
$("#td2").text(price);
else
$("#td2").text(OldPrice);
}
</script>

MVC商品详情