ajax和mvc,jQuery的与.NET MVC结合，通过AJAX

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

HTML端：@using Test.fh.Project.Storefront.ViewModels

@using Test.fh.Project.Storefront.Services

@model ProductViewModel

Categories

@Html.Partial("_Breadcrumbs")

@MvcHtmlString.Create(@Model.product_name)

@using (Html.BeginForm("index", "Product"))

{

@Html.ValidationSummary(excludePropertyErrors: true)

class="fancybox" rel="fancybox">

alt="@Model.product_name" id="image" />

@if (Model.imagePaths.Count() > 0)

{

@foreach (var item in Model.imagePaths)

{

}

}

@if (Model.manufacturer != null || Model.manufacturer != "")

{

Brand: @Model.manufacturer

}

Product Code: @Model.model

Reward Points: @Model.reward

Availability: @Model.stock_status

Price:

@if (Model.special == null || Model.special == "")

{

@Currency.format(Model.price, null, null, true)

}

else

{

@Currency.format(Model.price, null, null, true)

@Currency.format(Model.special, null, null, true)

}

Ex Tax:

@if (Model.special != null && Model.special != "")

{

@Currency.format(Model.special, null, null, true)

}

else

{

@Currency.format(Model.price, null, null, true)

}

Price in reward points: @Model.points

@foreach (var item in ViewBag.Discounts)

{

@string.Format("({0} or more {1})", @item["quantity"], @Currency.format(item["price"].ToString(), null, null, true));

}

@if (ViewBag.Options != null)

{

Available Options

@foreach (var item in ViewBag.Options)

{

if (item.Key["type"] == "select")

{

@if (item.Key["required"] != null && item.Key["required"] == 1)

{

*

}

@item.Key["name"]:

--- Please Select ---

@foreach (var option_value in item.Value)

{

@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));

}

}

}

if (item.Key["type"] == "radio")

{

@if (item.Key["required"] != null && item.Key["required"] == 1)

{

*

}

@item.Key["name"]:

@foreach (var option_value in item.Value)

{

id="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));

}

}

}

if (item.Key["type"] == "checkbox")

{

@if (item.Key["required"] != null && item.Key["required"] == 1)

{

*

}

@item.Key["name"]:

@foreach (var option_value in item.Value)

{

id="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));

}

}

}

if (item.Key["type"] == "text")

{

@if (item.Key["required"] != null && item.Key["required"] == 1)

{

*

}

@item.Key["name"]:

value="@item.Key["option_value"]" />

}

if (item.Key["type"] == "textarea")

{

@if (item.Key["required"] != null && item.Key["required"] == 1)

{

*

}

@item.Key["name"]:

cols="40" rows="5">@item.Key["option_value"]

}

if (item.Key["type"] == "file")

{

@if (item.Key["required"] != null && item.Key["required"] == 1)

{

*

}

@item.Key["name"]:

class="button">Upload File

value="" />

}

if (item.Key["type"] == "date")

{

@if (item.Key["required"] != null && item.Key["required"] == 1)

{

*

}

@item.Key["name"]:

value="@item.Key["option_value"]" class="date" />

}

if (item.Key["type"] == "datetime")

{

@if (item.Key["required"] != null && item.Key["required"] == 1)

{

*

}

@MvcHtmlString.Create(@item.Key["name"]):

value="@item.Key["option_value"]" class="datetime" />

}

if (item.Key["type"] == "time")

{

@if (item.Key["required"] != null && item.Key["required"] == 1)

{

*

}

@MvcHtmlString.Create(@item.Key["name"]):

value="@item.Key["option_value"]" class="time" />

}

}

}

Qty:

@Html.TextBoxFor(model => model.minimum, new { maxlength = 2, name = "quantity" })

@Html.HiddenFor(model => model.product_id) &nbsp

Add to Cart

   - OR -   

Add to Wish List

Add to Compare

@if (int.Parse(Model.minimum) > 1)

{

This product has a minimum quantity of @Model.minimum

}

  

@Model.reviews reviews   |  Write

a review

Share

Description

@if (ViewBag.attribute_groups != null)

{

Specification

}

Reviews

@if (ViewBag.relate_products != null)

{

Related Products (@ViewBag.relate_products.Count)

}

@Html.Raw(@Model.description)

if (ViewBag.attribute_groups != null)

{

@foreach (var item in ViewBag.attribute_groups)

{

@item.Key["name"]

@foreach (var item_att in item.Value)

{

@item_att["name"]@item_att["text"]

}

}

}

if (ViewBag.relate_products != null)

{

@foreach (var item in ViewBag.relate_products)

{

@if (item["image"] != null)

{

/>

}

@item["name"]

@if (item["price"] != null)

{

@Currency.format(item["price"].ToString(), null, null, true)

}

Add to Cart

}

}

if (ViewBag.tags != null)

{

Tags:

@foreach (var item in ViewBag.tags)

{

@item["tag"]

}

}

}

@*@Url.Action("Update", "Product");*@

@foreach (var item in ViewBag.Options)

{

if (item.Key["type"] == "file")

{

new AjaxUpload('#button-option-option[@item.Key["product_option_id"]]', {

action: '/Product/upload',

name: 'file',

autoSubmit: true,

responseType: 'json',

onSubmit: function (file, extension) {

$('#button-option-option[@item.Key["product_option_id"]]').after('');

},

onComplete: function (file, json) {

$('.error').remove();

if (json.success) {

alert(json.success);

$('input[name=option[@item.Key["product_option_id"]]').attr('value', json.file);

}

if (json.error) {

$('#option-@item.Key["product_option_id"]').after('' + json.error + '');

}

$('#loading').remove();

}

});

}

}

$('.fancybox').fancybox({ cyclic: true });

$('#tabs a').tabs();

if ($.browser.msie && $.browser.version == 6) {

$('.date, .datetime, .time').bgIframe();

}

$('.date').datepicker({ dateFormat: 'yy-mm-dd' });

$('.datetime').datetimepicker({

dateFormat: 'yy-mm-dd',

timeFormat: 'h:m'

});

$('.time').timepicker({ timeFormat: 'h:m' });

//这行是重点

$('#button-cart').bind('click', function () {

//alert($('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'));

$.ajax({

url: '@Url.Action("Update", "Cart", new { area = "" })',

type: 'post',

data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),

dataType: 'json',

success: function (json) {

$('.success, .warning, .attention, information, .error').remove();

if (json['warning']) {

$('#notification').html('

' + json['warning'] + '

');

$('.warning').fadeIn('slow');

}

if (json['option_error']) {

for (i in json['option_error']) {

//alert(i);

$('#option-' + i).after('' + json['option_error'][i] + '');

}

}

if (json['success']) {

//$('#notification').html('

' + json['success'] + '

');

//$('.attention').fadeIn('slow');

//$('#cart_total').html(json['total']);

//$('html, body').animate({ scrollTop: 0 }, 'slow');

}

}

});

});

//-->