@{
    ViewBag.Title = "Detail";
}

<h2>Detail</h2>

<table>
    <tr>
        <td>
            <img id="img1" src="" alt="" 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>

View Code