Preface:
由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下个人使用Vue的一点经验,以便后来者借鉴!
官方文档:Vue.js
使用Vue在ASP.NET MVC中进行前后端交互
在阅读下面的文章之前你需要先了解一下Vue官方推荐的前后端交互的插件:
1.resource(官方在2.0版本之后取消了对此插件的维护)
2.axios
注:这里使用的都是异步的插件,因为这样才会在你的项目中具有使用意义,当然你也可以用其它的js库,如jQuery、Fetch等等...
Instance:
Controller
1 using Demo.Models;
2 using System;
3 using System.Collections.Generic;
4 using System.Linq;
5 using System.Web;
6 using System.Web.Mvc;
7
8 namespace Demo.Controllers
9 {
10 //[RoutePrefix("api/Goods")]
11 public class GoodsController : Controller
12 {
13 List<GoodsEntity> goosdList = new List<GoodsEntity>
14 {
15 new GoodsEntity(){ ID=001,Name="水",Type=1,Price=3},
16 new GoodsEntity(){ ID=002,Name="牛奶",Type=1,Price=10},
17 new GoodsEntity(){ ID=003,Name="面包",Type=2,Price=15}
18 };
19
20 // GET: Goods
21 public ActionResult Index()
22 {
23 return View();
24 }
25
26 public ActionResult Check()
27 {
28 return View();
29 }
30
31 [HttpGet]
32 public JsonResult GetGoodsType()
33 {
34 List<int> goodsType = new List<int>();
35 foreach (var item in goosdList)
36 {
37 if (!goodsType.Contains(item.Type))
38 {
39 goodsType.Add(item.Type);
40 }
41 }
42 return Json(goodsType, JsonRequestBehavior.AllowGet);
43 }
44
45 [HttpGet]
46 public JsonResult GetAllGoods()
47 {
48 return Json(goosdList, JsonRequestBehavior.AllowGet);
49 }
50
51 [HttpPost]
52 public JsonResult GetGoods(int id)
53 {
54 var entity = goosdList.Where(g => g.ID == id).FirstOrDefault();
55 if (entity != null)
56 {
57 return Json(new ReturnJsonInfo(500, "success!", entity));
58 }
59 return Json(new ReturnJsonInfo(400, "error!", null));
60 }
61
62 [HttpPost]
63 public JsonResult UpdateGoods(GoodsEntity entity)
64 {
65 if (entity!=null)
66 {
67 var goodsEntiy = goosdList.FirstOrDefault(g => g.ID == entity.ID);
68 if (goodsEntiy!=null)
69 {
70 goodsEntiy = entity;
71 return Json(new ReturnJsonInfo(500, "success!", goosdList));
72 }
73 goosdList.Add(entity);
74 return Json(new ReturnJsonInfo(500, "success!", goosdList));
75 }
76 return Json(new ReturnJsonInfo(400, "error!",null));
77 }
78
79 [HttpPost]
80 public JsonResult DelectGoods(int id)
81 {
82 var entity = goosdList.Where(g => g.ID == id).FirstOrDefault();
83 if (entity != null)
84 {
85 goosdList.Remove(entity);
86 return Json(new ReturnJsonInfo(500, "success!", goosdList));
87 }
88 return Json(new ReturnJsonInfo(400, "error!",null));
89 }
90
91 }
92 }