jQuery的与.NET MVC结合，通过AJAX

在工作中做了这么一个东西。

HTML端：

@using Test.fh.Project.Storefront.ViewModels
@using Test.fh.Project.Storefront.Services
@model ProductViewModel
<div id="column-left">
    <div class="box">
        <div class="box-heading">
            Categories</div>
        <div class="box-content">
            <div class="box-category">
                
            </div>
        </div>
    </div>
</div>
<div id="content">
    <div class="breadcrumb">
        @Html.Partial("_Breadcrumbs")
    </div>
    <h1>
        @MvcHtmlString.Create(@Model.product_name)
    </h1>
    @using (Html.BeginForm("index", "Product"))
    {
        @Html.ValidationSummary(excludePropertyErrors: true)
        <div class="product-info">
            <div class="left">
                <div class="image">
                    <a href="@Url.Content("~/Content/images/" + @Model.thumbImagePopPath)" title="@Model.product_name"
    class="fancybox" rel="fancybox">
                        <img src="@Url.Content("~/Content/images/" + @Model.thumbImagePath)"  title="@Model.product_name"
    alt="@Model.product_name" id="image" />
                    </a>
                </div>
                @if (Model.imagePaths.Count() > 0)
                {
                    <div class="image-additional">
                        @foreach (var item in Model.imagePaths)
                        {
                            <a href="@Url.Content("~/Content/images/" + @item.imagePopPath)" title="@Model.product_name" class="fancybox" rel="fancybox">
                                <img src="@Url.Content("~/Content/images/" + @item.imagePath)" title="@Model.product_name" alt="@Model.product_name"/>
                            </a>
                        }
                    </div>
                }
            </div>
            <div class="right">
                <div class="description">
                    @if (Model.manufacturer != null || Model.manufacturer != "")
                    {
                        <span>Brand: </span> <a href="@Model.manufacturer_id">@Model.manufacturer</a><br />
                    }
                    <span>Product Code: </span>@Model.model<br />
                    <span>Reward Points:</span> @Model.reward<br />
                    <span>Availability: </span>@Model.stock_status
                </div>
                <div class="price">
                    Price:
                    @if (Model.special == null || Model.special == "")
                    {
                        @Currency.format(Model.price, null, null, true)
                    }
                    else
                    {
                        <span class="price-old">@Currency.format(Model.price, null, null, true)</span>
                        <span class="price-new">@Currency.format(Model.special, null, null, true)</span>
                    }
                    <br />
                    <span class="price-tax">Ex Tax:
                        @if (Model.special != null && Model.special != "")
                        {
                            @Currency.format(Model.special, null, null, true)
                        }
                        else
                        {
                            @Currency.format(Model.price, null, null, true)
                        }
                    </span>
                    <br />
                    <span class="reward"><small>Price in reward points: @Model.points</small></span>
                    <br />
                    <br />
                    <div class="discount">
                        @foreach (var item in ViewBag.Discounts)
                        {
                            @string.Format("({0} or more {1})", @item["quantity"], @Currency.format(item["price"].ToString(), null, null, true));
                            <br />
                        }
                    </div>
                </div>
                @if (ViewBag.Options != null)
                {
                    <div class="options">
                        <h2>
                            Available Options</h2>
                        <br />
                        @foreach (var item in ViewBag.Options)
                        {
                            if (item.Key["type"] == "select")
                            {
                            <div id="option-@item.Key["product_option_id"]" class="option">
                                @if (item.Key["required"] != null && item.Key["required"] == 1)
                                {
                                    <span class="required">*</span>
                                }
                                <b>@item.Key["name"]:</b><br />
                                <select name="option[@item.Key["product_option_id"]]">
                                    <option value="">--- Please Select ---</option>
                                    @foreach (var option_value in item.Value)
                                    {
                                        <option value="@option_value["product_option_value_id"]">@option_value["name"]
                                            @if (@option_value["price"] != null)
                                            {
                                                @string.Format("({0}{1})", @option_value["price_prefix"], @Currency.format(option_value["price"].ToString(), null, null, true));
                                            }
                                        </option>
                                    }
                                </select>
                            </div>
                            <br />
                            }
                            if (item.Key["type"] == "radio")
                            {
                            <div id="option-@item.Key["product_option_id"]" class="option">
                                @if (item.Key["required"] != null && item.Key["required"] == 1)
                                {
                                    <span class="required">*</span>
                                }
                                <b>@item.Key["name"]:</b><br />
                                @foreach (var option_value in item.Value)
                                {
                                    <input type="radio" name="option[@option_value["product_option_id"]]" value="@option_value["product_option_value_id"]"
                id="option-value-@option_value["product_option_value_id"]" />
                                    <label for="option-value-@option_value["product_option_value_id"]">@option_value["name"]
                                        @if (@option_value["price"] != null)
                                        {
                                            @string.Format("({0}{1})", @option_value["price_prefix"], @Currency.format(option_value["price"].ToString(), null, null, true));
                                        }
                                    </label>
                                    <br />
                                }
                            </div>
                            <br />
                            }
                            if (item.Key["type"] == "checkbox")
                            {
                            <div id="option-@item.Key["product_option_id"]" class="option">
                                @if (item.Key["required"] != null && item.Key["required"] == 1)
                                {
                                    <span class="required">*</span>
                                }
                                <b>@item.Key["name"]:</b><br />
                                @foreach (var option_value in item.Value)
                                {
                                    <input type="checkbox" name="option[@option_value["product_option_id"]]" value="@option_value["product_option_value_id"]"
                id="option-value-@option_value["product_option_value_id"]" />
                                    <label for="option-value-@option_value["product_option_value_id"]">@option_value["name"]
                                        @if (@option_value["price"] != null)
                                        {
                                            @string.Format("({0}{1})", @option_value["price_prefix"], @Currency.format(option_value["price"].ToString(), null, null, true));
                                        }
                                    </label>
                                    <br />
                                }
                            </div>
                            <br />
                            }
                            if (item.Key["type"] == "text")
                            {
                            <div id="option-@item.Key["product_option_id"]" class="option">
                                @if (item.Key["required"] != null && item.Key["required"] == 1)
                                {
                                    <span class="required">*</span>
                                }
                                <b>@item.Key["name"]:</b><br />
                                <input type="text" name="option[@item.Key["product_option_id"]]"
            value="@item.Key["option_value"]" />
                            </div>
                            <br />
                            }
                            if (item.Key["type"] == "textarea")
                            {
                            <div id="option-@item.Key["product_option_id"]" class="option">
                                @if (item.Key["required"] != null && item.Key["required"] == 1)
                                {
                                    <span class="required">*</span>
                                }
                                <b>@item.Key["name"]:</b><br />
                                <textarea name="option[@item.Key["product_option_id"]]"
            cols="40" rows="5">@item.Key["option_value"]</textarea>
                            </div>
                            <br />
                            }
                            if (item.Key["type"] == "file")
                            {
                            <div id="option-@item.Key["product_option_id"]" class="option">
                                @if (item.Key["required"] != null && item.Key["required"] == 1)
                                {
                                    <span class="required">*</span>
                                }
                                <b>@item.Key["name"]:</b><br />
                                <a id="button-option-option[@item.Key["product_option_id"]]"
            class="button"><span>Upload File</span></a>
                                <input type="hidden" name="option[@item.Key["product_option_id"]]"
            value="" />
                            </div>
                            <br />
                            }
                            if (item.Key["type"] == "date")
                            {
                            <div id="option-@item.Key["product_option_id"]" class="option">
                                @if (item.Key["required"] != null && item.Key["required"] == 1)
                                {
                                    <span class="required">*</span>
                                }
                                <b>@item.Key["name"]:</b><br />
                                <input type="text" name="option[@item.Key["product_option_id"]]"
            value="@item.Key["option_value"]" class="date" />
                            </div>
                            <br />
                            }
                            if (item.Key["type"] == "datetime")
                            {
                            <div id="option-@item.Key["product_option_id"]" class="option">
                                @if (item.Key["required"] != null && item.Key["required"] == 1)
                                {
                                    <span class="required">*</span>
                                }
                                <b>@MvcHtmlString.Create(@item.Key["name"]):</b><br />
                                <input type="text" name="option[@item.Key["product_option_id"]]"
            value="@item.Key["option_value"]" class="datetime" />
                            </div>
                            <br />
                            }
                            if (item.Key["type"] == "time")
                            {
                            <div id="option-@item.Key["product_option_id"]" class="option">
                                @if (item.Key["required"] != null && item.Key["required"] == 1)
                                {
                                    <span class="required">*</span>
                                }
                                <b>@MvcHtmlString.Create(@item.Key["name"]):</b><br />
                                <input type="text" name="option[@item.Key["product_option_id"]]"
            value="@item.Key["option_value"]" class="time" />
                            </div>
                            <br />
                            }
                        }
                    </div>
                }
                <div class="cart">
                    <div>
                        Qty:
                        @Html.TextBoxFor(model => model.minimum, new { maxlength = 2, name = "quantity" })
                        @Html.HiddenFor(model => model.product_id) &nbsp <a id="button-cart" class="button">
                            <span>Add to Cart</span> </a>
                    </div>
                    <div>
                        <span>   - OR -   </span>
                    </div>
                    <div>
                        <a onclick="addToWishList(&#39;@Model.product_id&#39;);">Add to Wish List</a><br />
                        <a onclick="addToCompare(&#39;@Model.product_id&#39;);">Add to Compare</a>
                    </div>
                    @if (int.Parse(Model.minimum) > 1)
                    {
                        <div class="minimum">
                            This product has a minimum quantity of @Model.minimum</div>
                    }
                </div>
                <div class="review">
                    <div>
                        <img src="@string.Format("/cart/Content/catalog/theme/default/image/stars-{0}.png", Model.rating)" alt="@Model.rating" />  
                        <a onclick="$(&#39;a[href=\&#39;#tab-review\&#39;]&#39;).trigger(&#39;click&#39;);">
                            @Model.reviews reviews </a>  |  <a onclick="$(&#39;a[href=\&#39;#tab-review\&#39;]&#39;).trigger(&#39;click&#39;);">Write
                                a review</a>
                    </div>
                    <div class="share">
                        <!-- AddThis Button BEGIN -->
                        <div class="addthis_default_style">
                            <a class="addthis_button_compact">Share</a> <a class="addthis_button_email"></a>
                            <a class="addthis_button_print"></a><a class="addthis_button_facebook"></a><a class="addthis_button_twitter">
                            </a>
                        </div>
                        <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
                        <!-- AddThis Button END -->
                    </div>
                </div>
            </div>
        </div>
        <div id="tabs" class="htabs">
            <a href="#tab-description">Description</a>
            @if (ViewBag.attribute_groups != null)
            {
                <a href="#tab-attribute">Specification</a>
            }
            <a href="#tab-review">Reviews </a>
            @if (ViewBag.relate_products != null)
            {
                <a href="#tab-related">Related Products (@ViewBag.relate_products.Count)</a>
            }
        </div>
        <div id="tab-description" class="tab-content">@Html.Raw(@Model.description)</div>
                                                 if (ViewBag.attribute_groups != null)
                                                 {
        <div id="tab-attribute" class="tab-content">
            <table class="attribute">
                @foreach (var item in ViewBag.attribute_groups)
                {
                    <thead>
                        <tr>
                            <td colspan="2">
                                @item.Key["name"]
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item_att in item.Value)
                        {
                            <tr>
                                <td>@item_att["name"]
                                </td>
                                <td>@item_att["text"]
                                </td>
                            </tr>
                        }
                    </tbody>
                }
            </table>
        </div>
                                                 }
        <div id="tab-review" class="tab-content">
            
        </div>
                                                 if (ViewBag.relate_products != null)
                                                 {
        <div id="tab-related" class="tab-content">
            <div class="box-product">
                @foreach (var item in ViewBag.relate_products)
                {
                    <div>
                        @if (item["image"] != null)
                        {
                            <div class="image">
                                <a href="@item["product_id"]">
                                    <img src="@Url.Content("~/Content/images/" + @item["image"])" alt="@item["name"]"
                /></a></div>
                        }
                        <div class="name">
                            <a href="@item["product_id"]">@item["name"]</a></div>
                        @if (item["price"] != null)
                        {
                            <div class="price">
                                @Currency.format(item["price"].ToString(), null, null, true)
                            </div>
                        }
                        <a onclick="addToCart(&#39;@item["product_id"]&#39;);" class="button"><span>Add to Cart</span></a></div>
                }
            </div>
        </div>
                                                 }
                                                 if (ViewBag.tags != null)
                                                 {
        <div class="tags">
            <b>Tags:</b>
            @foreach (var item in ViewBag.tags)
            {
                <a href="@item["tag"]">@item["tag"]</a>
            }
        </div>
                                                 }
    }
</div>
@*@Url.Action("Update", "Product");*@
@foreach (var item in ViewBag.Options)
{
    if (item.Key["type"] == "file")
    {
    <script type="text/javascript">
        new AjaxUpload(&#39;#button-option-option[@item.Key["product_option_id"]]&#39;, {
            action: &#39;/Product/upload&#39;,
            name: &#39;file&#39;,
            autoSubmit: true,
            responseType: &#39;json&#39;,
            onSubmit: function (file, extension) {
                $(&#39;#button-option-option[@item.Key["product_option_id"]]&#39;).after(&#39;<img src="catalog/view/theme/default/image/loading.gif" id="loading" style="padding-left: 5px;" />&#39;);
            },
            onComplete: function (file, json) {
                $(&#39;.error&#39;).remove();
                if (json.success) {
                    alert(json.success);
                    $(&#39;input[name=option[@item.Key["product_option_id"]]&#39;).attr(&#39;value&#39;, json.file);
                }
                if (json.error) {
                    $(&#39;#option-@item.Key["product_option_id"]&#39;).after(&#39;<span class="error">&#39; + json.error + &#39;</span>&#39;);
                }
                $(&#39;#loading&#39;).remove();
            }
        });
    </script>
    }
}
<script type="text/javascript">
    $(&#39;.fancybox&#39;).fancybox({ cyclic: true });
</script>
<script type="text/javascript">
    $(&#39;#tabs a&#39;).tabs();
</script>
<script type="text/javascript" src="@Url.Content("~/Content/Admin/js/jquery/ui/jquery-ui-timepicker-addon.js")"></script>
<script type="text/javascript"><!--
    if ($.browser.msie && $.browser.version == 6) {
        $(&#39;.date, .datetime, .time&#39;).bgIframe();
    }
    $(&#39;.date&#39;).datepicker({ dateFormat: &#39;yy-mm-dd&#39; });
    $(&#39;.datetime&#39;).datetimepicker({
        dateFormat: &#39;yy-mm-dd&#39;,
        timeFormat: &#39;h:m&#39;
    });
    $(&#39;.time&#39;).timepicker({ timeFormat: &#39;h:m&#39; });
    //这行是重点
    $(&#39;#button-cart&#39;).bind(&#39;click&#39;, function () {
        //alert($(&#39;.product-info input[type=\&#39;text\&#39;], .product-info input[type=\&#39;hidden\&#39;], .product-info input[type=\&#39;radio\&#39;]:checked, .product-info input[type=\&#39;checkbox\&#39;]:checked, .product-info select, .product-info textarea&#39;));
        $.ajax({
            url: &#39;@Url.Action("Update", "Cart", new { area = "" })&#39;,
            type: &#39;post&#39;,
            data: $(&#39;.product-info input[type=\&#39;text\&#39;], .product-info input[type=\&#39;hidden\&#39;], .product-info input[type=\&#39;radio\&#39;]:checked, .product-info input[type=\&#39;checkbox\&#39;]:checked, .product-info select, .product-info textarea&#39;),
            dataType: &#39;json&#39;,
            success: function (json) {
                $(&#39;.success, .warning, .attention, information, .error&#39;).remove();
                if (json[&#39;warning&#39;]) {
                    $(&#39;#notification&#39;).html(&#39;<div class="warning" style="display: none;">&#39; + json[&#39;warning&#39;] + &#39;<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>&#39;);
                    $(&#39;.warning&#39;).fadeIn(&#39;slow&#39;);
                }
                if (json[&#39;option_error&#39;]) {
                    for (i in json[&#39;option_error&#39;]) {
                        //alert(i);
                        $(&#39;#option-&#39; + i).after(&#39;<span class="error">&#39; + json[&#39;option_error&#39;][i] + &#39;</span>&#39;);
                    }
                }
                if (json[&#39;success&#39;]) {
                    //$(&#39;#notification&#39;).html(&#39;<div class="attention" style="display: none;">&#39; + json[&#39;success&#39;] + &#39;<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>&#39;);
                    //$(&#39;.attention&#39;).fadeIn(&#39;slow&#39;);
                    //$(&#39;#cart_total&#39;).html(json[&#39;total&#39;]);
                    //$(&#39;html, body&#39;).animate({ scrollTop: 0 }, &#39;slow&#39;);
                }
            }
        });
    });
//-->
</script>