Preface:

由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下个人使用Vue的一点经验,以便后来者借鉴!

官方文档:Vue.js

使用Vue在ASP.NET MVC中进行前后端交互
在阅读下面的文章之前你需要先了解一下Vue官方推荐的前后端交互的插件:

1.resource(官方在2.0版本之后取消了对此插件的维护)

2.axios

注:这里使用的都是异步的插件,因为这样才会在你的项目中具有使用意义,当然你也可以用其它的js库,如jQuery、Fetch等等...

Instance:

Controller

Vue在ASP.NET MVC中的进行前后端的交互
 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 }
Vue在ASP.NET MVC中的进行前后端的交互

相关文章:

  • 2021-11-21
  • 2022-12-23
  • 2021-10-09
  • 2021-11-21
  • 2021-11-21
  • 2021-11-21
  • 2021-11-21
猜你喜欢
  • 2021-11-10
  • 2021-11-21
  • 2021-11-21
  • 2022-01-05
  • 2021-11-21
  • 2021-11-21
  • 2021-11-21
相关资源
相似解决方案