Jquery与.net MVC结合，通过Ajax

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

Html端：

1. @using Test.fh.Project.Storefront.ViewModels
2. @using Test.fh.Project.Storefront.Services
3. @model ProductViewModel
4. <div id="column-left">
5. <div class="box">
6. <div class="box-heading">
7. Categories</div>
8. <div class="box-content">
9. <div class="box-category">
10. </div>
11. </div>
12. </div>
13. </div>
14. <div id="content">
15. <div class="breadcrumb">
16. @Html.Partial("_Breadcrumbs")
17. </div>
18. <h1>
19. @MvcHtmlString.Create(@Model.product_name)
20. </h1>
21. @using (Html.BeginForm("index", "Product"))
22. {
23. @Html.ValidationSummary(excludePropertyErrors: true)
24. <div class="product-info">
25. <div class="left">
26. <div class="image">
27. <a href="@Url.Content("~/Content/images/" + @Model.thumbImagePopPath)" title="@Model.product_name"
28. class="fancybox" rel="fancybox">
29. <img src="@Url.Content("~/Content/images/" + @Model.thumbImagePath)"  title="@Model.product_name"
30. alt="@Model.product_name" id="image" />
31. </a>
32. </div>
33. @if (Model.imagePaths.Count() > 0)
34. {
35. <div class="image-additional">
36. @foreach (var item in Model.imagePaths)
37. {
38. <a href="@Url.Content("~/Content/images/" + @item.imagePopPath)" title="@Model.product_name" class="fancybox" rel="fancybox">
39. <img src="@Url.Content("~/Content/images/" + @item.imagePath)" title="@Model.product_name" alt="@Model.product_name"/>
40. </a>
41. }
42. </div>
43. }
44. </div>
45. <div class="right">
46. <div class="description">
47. @if (Model.manufacturer != null || Model.manufacturer != "")
48. {
49. <span>Brand: </span> <a href="@Model.manufacturer_id">@Model.manufacturer</a><br />
50. }
51. <span>Product Code: </span>@Model.model<br />
52. <span>Reward Points:</span> @Model.reward<br />
53. <span>Availability: </span>@Model.stock_status
54. </div>
55. <div class="price">
56. Price:
57. @if (Model.special == null || Model.special == "")
58. {
59. @Currency.format(Model.price, null, null, true)
60. }
61. else
62. {
63. <span class="price-old">@Currency.format(Model.price, null, null, true)</span>
64. <span class="price-new">@Currency.format(Model.special, null, null, true)</span>
65. }
66. <br />
67. <span class="price-tax">Ex Tax:
68. @if (Model.special != null && Model.special != "")
69. {
70. @Currency.format(Model.special, null, null, true)
71. }
72. else
73. {
74. @Currency.format(Model.price, null, null, true)
75. }
76. </span>
77. <br />
78. <span class="reward"><small>Price in reward points: @Model.points</small></span>
79. <br />
80. <br />
81. <div class="discount">
82. @foreach (var item in ViewBag.Discounts)
83. {
84. @string.Format("({0} or more {1})", @item["quantity"], @Currency.format(item["price"].ToString(), null, null, true));
85. <br />
86. }
87. </div>
88. </div>
89. @if (ViewBag.Options != null)
90. {
91. <div class="options">
92. <h2>
93. Available Options</h2>
94. <br />
95. @foreach (var item in ViewBag.Options)
96. {
97. if (item.Key["type"] == "select")
98. {
99. <div id="option-@item.Key["product_option_id"]" class="option">
100. @if (item.Key["required"] != null && item.Key["required"] == 1)
101. {
102. <span class="required">*</span>
103. }
104. <b>@item.Key["name"]:</b><br />
105. <select name="option[@item.Key["product_option_id"]]">
106. <option value="">--- Please Select ---</option>
107. @foreach (var option_value in item.Value)
108. {
109. <option value="@option_value["product_option_value_id"]">@option_value["name"]
110. @if (@option_value["price"] != null)
111. {
112. @string.Format("({0}{1})", @option_value["price_prefix"], @Currency.format(option_value["price"].ToString(), null, null, true));
113. }
114. </option>
115. }
116. </select>
117. </div>
118. <br />
119. }
120. if (item.Key["type"] == "radio")
121. {
122. <div id="option-@item.Key["product_option_id"]" class="option">
123. @if (item.Key["required"] != null && item.Key["required"] == 1)
124. {
125. <span class="required">*</span>
126. }
127. <b>@item.Key["name"]:</b><br />
128. @foreach (var option_value in item.Value)
129. {
130. <input type="radio" name="option[@option_value["product_option_id"]]" value="@option_value["product_option_value_id"]"
131. id="option-value-@option_value["product_option_value_id"]" />
132. <label for="option-value-@option_value["product_option_value_id"]">@option_value["name"]
133. @if (@option_value["price"] != null)
134. {
135. @string.Format("({0}{1})", @option_value["price_prefix"], @Currency.format(option_value["price"].ToString(), null, null, true));
136. }
137. </label>
138. <br />
139. }
140. </div>
141. <br />
142. }
143. if (item.Key["type"] == "checkbox")
144. {
145. <div id="option-@item.Key["product_option_id"]" class="option">
146. @if (item.Key["required"] != null && item.Key["required"] == 1)
147. {
148. <span class="required">*</span>
149. }
150. <b>@item.Key["name"]:</b><br />
151. @foreach (var option_value in item.Value)
152. {
153. <input type="checkbox" name="option[@option_value["product_option_id"]]" value="@option_value["product_option_value_id"]"
154. id="option-value-@option_value["product_option_value_id"]" />
155. <label for="option-value-@option_value["product_option_value_id"]">@option_value["name"]
156. @if (@option_value["price"] != null)
157. {
158. @string.Format("({0}{1})", @option_value["price_prefix"], @Currency.format(option_value["price"].ToString(), null, null, true));
159. }
160. </label>
161. <br />
162. }
163. </div>
164. <br />
165. }
166. if (item.Key["type"] == "text")
167. {
168. <div id="option-@item.Key["product_option_id"]" class="option">
169. @if (item.Key["required"] != null && item.Key["required"] == 1)
170. {
171. <span class="required">*</span>
172. }
173. <b>@item.Key["name"]:</b><br />
174. <input type="text" name="option[@item.Key["product_option_id"]]"
175. value="@item.Key["option_value"]" />
176. </div>
177. <br />
178. }
179. if (item.Key["type"] == "textarea")
180. {
181. <div id="option-@item.Key["product_option_id"]" class="option">
182. @if (item.Key["required"] != null && item.Key["required"] == 1)
183. {
184. <span class="required">*</span>
185. }
186. <b>@item.Key["name"]:</b><br />
187. <textarea name="option[@item.Key["product_option_id"]]"
188. cols="40" rows="5">@item.Key["option_value"]</textarea>
189. </div>
190. <br />
191. }
192. if (item.Key["type"] == "file")
193. {
194. <div id="option-@item.Key["product_option_id"]" class="option">
195. @if (item.Key["required"] != null && item.Key["required"] == 1)
196. {
197. <span class="required">*</span>
198. }
199. <b>@item.Key["name"]:</b><br />
200. <a id="button-option-option[@item.Key["product_option_id"]]"
201. class="button"><span>Upload File</span></a>
202. <input type="hidden" name="option[@item.Key["product_option_id"]]"
203. value="" />
204. </div>
205. <br />
206. }
207. if (item.Key["type"] == "date")
208. {
209. <div id="option-@item.Key["product_option_id"]" class="option">
210. @if (item.Key["required"] != null && item.Key["required"] == 1)
211. {
212. <span class="required">*</span>
213. }
214. <b>@item.Key["name"]:</b><br />
215. <input type="text" name="option[@item.Key["product_option_id"]]"
216. value="@item.Key["option_value"]" class="date" />
217. </div>
218. <br />
219. }
220. if (item.Key["type"] == "datetime")
221. {
222. <div id="option-@item.Key["product_option_id"]" class="option">
223. @if (item.Key["required"] != null && item.Key["required"] == 1)
224. {
225. <span class="required">*</span>
226. }
227. <b>@MvcHtmlString.Create(@item.Key["name"]):</b><br />
228. <input type="text" name="option[@item.Key["product_option_id"]]"
229. value="@item.Key["option_value"]" class="datetime" />
230. </div>
231. <br />
232. }
233. if (item.Key["type"] == "time")
234. {
235. <div id="option-@item.Key["product_option_id"]" class="option">
236. @if (item.Key["required"] != null && item.Key["required"] == 1)
237. {
238. <span class="required">*</span>
239. }
240. <b>@MvcHtmlString.Create(@item.Key["name"]):</b><br />
241. <input type="text" name="option[@item.Key["product_option_id"]]"
242. value="@item.Key["option_value"]" class="time" />
243. </div>
244. <br />
245. }
246. }
247. </div>
248. }
249. <div class="cart">
250. <div>
251. Qty:
252. @Html.TextBoxFor(model => model.minimum, new { maxlength = 2, name = "quantity" })
253. @Html.HiddenFor(model => model.product_id) &nbsp <a id="button-cart" class="button">
254. <span>Add to Cart</span> </a>
255. </div>
256. <div>
257. <span>&nbsp;&nbsp;&nbsp;- OR -&nbsp;&nbsp;&nbsp;</span>
258. </div>
259. <div>
260. <a onclick="addToWishList('@Model.product_id');">Add to Wish List</a><br />
261. <a onclick="addToCompare('@Model.product_id');">Add to Compare</a>
262. </div>
263. @if (int.Parse(Model.minimum) > 1)
264. {
265. <div class="minimum">
266. This product has a minimum quantity of @Model.minimum</div>
267. }
268. </div>
269. <div class="review">
270. <div>
271. <img src="@string.Format("/cart/Content/catalog/theme/default/image/stars-{0}.png", Model.rating)" alt="@Model.rating" />&nbsp;&nbsp;
272. <a onclick="$('a[href=\'#tab-review\']').trigger('click');">
273. @Model.reviews reviews </a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').trigger('click');">Write
274. a review</a>
275. </div>
276. <div class="share">
277. <!-- AddThis Button BEGIN -->
278. <div class="addthis_default_style">
279. <a class="addthis_button_compact">Share</a> <a class="addthis_button_email"></a>
280. <a class="addthis_button_print"></a><a class="addthis_button_facebook"></a><a class="addthis_button_twitter">
281. </a>
282. </div>
283. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
284. <!-- AddThis Button END -->
285. </div>
286. </div>
287. </div>
288. </div>
289. <div id="tabs" class="htabs">
290. <a href="#tab-description">Description</a>
291. @if (ViewBag.attribute_groups != null)
292. {
293. <a href="#tab-attribute">Specification</a>
294. }
295. <a href="#tab-review">Reviews </a>
296. @if (ViewBag.relate_products != null)
297. {
298. <a href="#tab-related">Related Products (@ViewBag.relate_products.Count)</a>
299. }
300. </div>
301. <div id="tab-description" class="tab-content">@Html.Raw(@Model.description)</div>
302. if (ViewBag.attribute_groups != null)
303. {
304. <div id="tab-attribute" class="tab-content">
305. <table class="attribute">
306. @foreach (var item in ViewBag.attribute_groups)
307. {
308. <thead>
309. <tr>
310. <td colspan="2">
311. @item.Key["name"]
312. </td>
313. </tr>
314. </thead>
315. <tbody>
316. @foreach (var item_att in item.Value)
317. {
318. <tr>
319. <td>@item_att["name"]
320. </td>
321. <td>@item_att["text"]
322. </td>
323. </tr>
324. }
325. </tbody>
326. }
327. </table>
328. </div>
329. }
330. <div id="tab-review" class="tab-content">
331. </div>
332. if (ViewBag.relate_products != null)
333. {
334. <div id="tab-related" class="tab-content">
335. <div class="box-product">
336. @foreach (var item in ViewBag.relate_products)
337. {
338. <div>
339. @if (item["image"] != null)
340. {
341. <div class="image">
342. <a href="@item["product_id"]">
343. <img src="@Url.Content("~/Content/images/" + @item["image"])" alt="@item["name"]"
344. /></a></div>
345. }
346. <div class="name">
347. <a href="@item["product_id"]">@item["name"]</a></div>
348. @if (item["price"] != null)
349. {
350. <div class="price">
351. @Currency.format(item["price"].ToString(), null, null, true)
352. </div>
353. }
354. <a onclick="addToCart('@item["product_id"]');" class="button"><span>Add to Cart</span></a></div>
355. }
356. </div>
357. </div>
358. }
359. if (ViewBag.tags != null)
360. {
361. <div class="tags">
362. <b>Tags:</b>
363. @foreach (var item in ViewBag.tags)
364. {
365. <a href="@item["tag"]">@item["tag"]</a>
366. }
367. </div>
368. }
369. }
370. </div>
371. @*@Url.Action("Update", "Product");*@
372. @foreach (var item in ViewBag.Options)
373. {
374. if (item.Key["type"] == "file")
375. {
376. <script type="text/javascript">
377. new AjaxUpload('#button-option-option[@item.Key["product_option_id"]]', {
378. action: '/Product/upload',
379. name: 'file',
380. autoSubmit: true,
381. responseType: 'json',
382. onSubmit: function (file, extension) {
383. $('#button-option-option[@item.Key["product_option_id"]]').after('<img src="catalog/view/theme/default/image/loading.gif" id="loading" style="padding-left: 5px;" />');
384. },
385. onComplete: function (file, json) {
386. $('.error').remove();
387. if (json.success) {
388. alert(json.success);
389. $('input[name=option[@item.Key["product_option_id"]]').attr('value', json.file);
390. }
391. if (json.error) {
392. $('#option-@item.Key["product_option_id"]').after('<span class="error">' + json.error + '</span>');
393. }
394. $('#loading').remove();
395. }
396. });
397. </script>
398. }
399. }
400. <script type="text/javascript">
401. $('.fancybox').fancybox({ cyclic: true });
402. </script>
403. <script type="text/javascript">
404. $('#tabs a').tabs();
405. </script>
406. <script type="text/javascript" src="@Url.Content("~/Content/Admin/js/jquery/ui/jquery-ui-timepicker-addon.js")"></script>
407. <script type="text/javascript"><!--
408. if ($.browser.msie && $.browser.version == 6) {
409. $('.date, .datetime, .time').bgIframe();
410. }
411. $('.date').datepicker({ dateFormat: 'yy-mm-dd' });
412. $('.datetime').datetimepicker({
413. dateFormat: 'yy-mm-dd',
414. timeFormat: 'h:m'
415. });
416. $('.time').timepicker({ timeFormat: 'h:m' });
417. //这行是重点
418. $('#button-cart').bind('click', function () {
419. //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'));
420. $.ajax({
421. url: '@Url.Action("Update", "Cart", new { area = "" })',
422. type: 'post',
423. 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'),
424. dataType: 'json',
425. success: function (json) {
426. $('.success, .warning, .attention, information, .error').remove();
427. if (json['warning']) {
428. $('#notification').html('<div class="warning" style="display: none;">' + json['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
429. $('.warning').fadeIn('slow');
430. }
431. if (json['option_error']) {
432. for (i in json['option_error']) {
433. //alert(i);
434. $('#option-' + i).after('<span class="error">' + json['option_error'][i] + '</span>');
435. }
436. }
437. if (json['success']) {
438. //$('#notification').html('<div class="attention" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
439. //$('.attention').fadeIn('slow');
440. //$('#cart_total').html(json['total']);
441. //$('html, body').animate({ scrollTop: 0 }, 'slow');
442. }
443. }
444. });
445. });
446. //-->
447. </script>

后台端

1. [HttpPost]
2. public JsonResult Update()
3. {
4. Dictionary<string, object> jsonMesg_dict = new Dictionary<string, object>();
5. ProductService pservice = new ProductService();
6. SessionEntityService sessionService = new SessionEntityService();
7. //Request.Params["××××"];是重点
8. string product_id = Request.Params["product_id"];
9. Dictionary<string, string> options = this.arrayFilterOption(Request.Params);
10. string key = product_id + ":" + new OpenSharp.Storefront.Models.Tool.PHPSerializer().Serialize(options);
11. Entity product = null;
12. if (product_id != null)
13. {
14. int customer_group_id = 8;
15. product = pservice.getProduct(int.Parse(product_id), customer_group_id, languagedId);
16. }
17. if (product != null)
18. {
19. int product_total = 0;
20. int quantity = 1;
21. if (Request.Params["minimum"] != null)
22. {
23. quantity = int.Parse(Request.Params["minimum"]);
24. SessionEntity session = sessionService.GetSessionEntity();
25. ShopCart cartItem = session.ShopCart;
26. foreach (KeyValuePair<string, ShopProduct> sp in cartItem.Items)
27. {
28. if (sp.Key.Equals(key))
29. {
30. product_total = sp.Value.Quantity;
31. }
32. }
33. string str_error_json = string.Empty;
34. if (int.Parse(product["minimum"].ToString()) > (product_total + quantity))
35. {
36. str_error_json = string.Format("Minimum order amount for {0} is {1}!", product["name"], product["minimum"]);
37. jsonMesg_dict.Add("warning", str_error_json);
38. }
39. Dictionary<Entity, Entities> poptions = pservice.getProductOptions(int.Parse(product_id), languagedId);
40. Dictionary<string, string> dic_error_json = new Dictionary<string, string>();
41. jsonMesg_dict.Add("option_error", dic_error_json);
42. foreach (var item in poptions)
43. {
44. int optionID = int.Parse(item.Key["product_option_id"].ToString());
45. if (int.Parse(item.Key["required"].ToString()) == 1)
46. {
47. string str = "option[" + optionID + "]";
48. if (!options.ContainsKey(str) || (options[str] == null || options[str].Equals("")))
49. {
50. string error_json = string.Format("{0} required!", item.Key["name"]);
51. dic_error_json.Add(optionID.ToString(), error_json);
52. }
53. }
54. }
55. if (jsonMesg_dict.Count == 0)
56. {
57. ShopProduct tempShoppingP = new ShopProduct();
58. tempShoppingP.ProductId = int.Parse(product_id);
59. tempShoppingP.Options = new OpenSharp.Storefront.Models.Tool.PHPSerializer().Serialize(options);
60. tempShoppingP.Quantity = quantity;
61. //Please pay attention on the following line.
62. //                        if (product["special"] == null || product["special"] == "")
63. if (string.IsNullOrEmpty(product["special"].ToString()))
64. {
65. tempShoppingP.UnitPrice = double.Parse(product["price"].ToString());
66. }
67. else
68. {
69. tempShoppingP.UnitPrice = double.Parse(product["special"].ToString());
70. }
71. tempShoppingP.ItemCalculate();
72. cartItem.Calculate(tempShoppingP);
73. jsonMesg_dict.Add("success", product["name"].ToString());
74. }
75. else
76. {
77. }
78. }
79. }
80. return Json(jsonMesg_dict, JsonRequestBehavior.AllowGet);
81. }