Vue在MVC中的進行前後端的交互 Preface： 由於最近在研究前端相關的技術，作為前端非常優秀的框架Vue，個人在學習的過程中遇到一些問題，網上相關資料有限，所以在這這裡總結一下個人使用Vue的一點經驗，以便後來者借鑒！ 官方文檔:Vue.js 使用Vue在ASP.NET MVC中進行前後端交 ...
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 }View Code
在上面的控制器中載入了一些示例數據，並且都是以json的格式返回前端，這樣前端就可以直接使用這些數據。
註：控制器返回至前端的json中，上面使用 “ReturnJsonInfo” 對象序列化進行返回， “ReturnJsonInfo” 代碼如下。
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 6 namespace Demo.Models 7 { 8 public class ReturnJsonInfo 9 { 10 public int Code { get; set; } 11 public string Message { get; set; } 12 public object Entity { get; set; } 13 public ReturnJsonInfo(int code, string message,object obj) 14 { 15 this.Code = code; 16 this.Message = message; 17 this.Entity = obj; 18 } 19 } 20 }View Code
View
1.前端採用resource插件
1 @{ 2 ViewBag.Title = "Goods IndexPage"; 3 } 4 <script type="text/javascript" src="~/Resources/Scripts/vue.js"></script> 5 <script type="text/javascript" src="~/Resources/Scripts/vue-resource.js"></script> 6 <h2>Index</h2> 7 <div id="demo"> 8 <table> 9 <tr> 10 <td><label>編號：</label></td> 11 <td><input type="text" v-model="newGoods.id" /></td> 12 13 <td><label>名稱：</label></td> 14 <td><input type="text" v-model="newGoods.name" /></td> 15 16 <td><label>類型：</label></td> 17 <td><input type="text" v-model="newGoods.type" /></td> 18 19 <td><label>售價：</label></td> 20 <td><input type="text" v-model="newGoods.price" /></td> 21 22 <td><input type="submit" value="查詢" v-on:click="GetGoods(newGoods.id)" /></td> 23 </tr> 24 </table> 25 <table v-show="goodsList.length"> 26 <tr> 27 <td>編號</td> 28 <td>名稱</td> 29 <td>類型</td> 30 <td>售價</td> 31 </tr> 32 <tr v-for="item in goodsList"> 33 <td>{{item.ID}}</td> 34 <td>{{item.Name}}</td> 35 <td>{{item.Type}}</td> 36 <td>{{item.Price}}</td> 37 </tr> 38 </table> 39 </div> 40 <script type="text/javascript"> 41 var view = new Vue( 42 { 43 el: "#demo", 44 data: { 45 goodsList: [], 46 newGoods: {id:'',name:'',type:'',price:''} 47 }, 48 created: function () { 49 this.InIt(); 50 }, 51 methods: { 52 InIt: function () { 53 //初始化 54 this.GetAllGoods(); 55 }, 56 GetAllGoods: function () { 57 var _self = this; 58 _self.$http.get("../Goods/GetAllGoods").then( 59 // Lambda寫法 60 (response) => { 61 //successCallback 62 for (var i = 0; i < response.data.length; i++) { 63 _self.goodsList.push(response.data[i]); 64 } 65 } , 66 (response) => { 67 //errorCallback 68 } 69 ); 70 }, 71 GetGoods: function (_id) { 72 var _self = this; 73 _self.goodsList = []; 74 if (_id.length > 0) { 75 _self.$http.post("../Goods/GetGoods", { id: _id }).then( 76 // 傳統寫法 77 function (response) { 78 //successCallback 79 if (response.data.Code == 500) { 80 _self.goodsList.push(response.data.Entity); 81 } 82 else { 83 alert(response.data.Message); 84 } 85 }, 86 function (response) { 87 //errorCallback 88 } 89 ) 90 .catch(function (response) { 91 console.log(response); 92 }); 93 } 94 else { 95 _self.GetAllGoods(); 96 } 97 } 98 } 99 } 100 ); 101 </script>View Code
2.前端採用axios插件
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>Check</title> 11 <script type="text/javascript" src="~/Resources/Scripts/vue.js"></script> 12 <script type="text/javascript" src="~/Resources/Scripts/axios.min.js"></script> 13 </head> 14 <body> 15 <div id="demo"> 16 <div> 17 <table> 18 <tr> 19 <td><label>編號：</label></td> 20 <td><input type="text" v-model="newGoods.id" /></td> 21 22 <td><label>名稱：</label></td> 23 <td><input type="text" v-model="newGoods.name" /></td> 24 25 <td><label>類型：</label></td> 26 <td> 27 <select v-model="newGoods.type"> 28 <option value="">---ALL---</option> 29 <option v-for="type in goodsType" v-bind:value="type">{{type}}</option> 30 </select> 31 </td> 32 33 <td><label>售價：</label></td> 34 <td><input type="text" v-model="newGoods.price" /></td> 35 36 <td> 37 <input type="submit" value="查詢" v-on:click="GetGoods(newGoods.id)" /> 38 <input type="submit" value="更新" v-on:click="UpdateGoods(newGoods.id,newGoods.name,newGoods.type,newGoods.price)" /> 39 <input type="submit" value="刪除" v-on:click="DelectGoods(newGoods.id)" /> 40 </td> 41 </tr> 42 </table> 43 </div> 44 <div> 45 <table v-show="goodsList.length"> 46 <tr> 47 <td>行號</td> 48 <td>編號</td> 49 <td>名稱</td> 50 <td>類型</td> 51 <td>售價</td> 52 </tr> 53 <tr v-for="(item,index) in goodsList"> 54 <td>{{index+1}}</td> 55 <td>{{item.ID}}</td> 56 <td>{{item.Name}}</td> 57 <td>{{item.Type}}</td> 58 <td>{{item.Price}}</td> 59 </tr> 60 </table> 61 </div> 62 </div> 63 64 65 <script type="text/javascript"> 66 var vm = new Vue({ 67 el: "#demo", 68 data: { 69 goodsType:[], 70 goodsList: [], 71 newGoods: { id: '', name: '', type: '', price: '' } 72 }, 73 mounted() { 74 this.GetGoodsType(); 75 this.GetAllGoods(); 76 }, 77 methods: 78 { 79
