Préface:
En raison de récentes recherches liées à la technologie frontal, excellente comme l'extrémité avant du cadre Vue , des rencontres personnelles dans le processus d'apprentissage certains des problèmes, des informations pertinentes limitées en ligne, donc dans cette somme ici pour un usage personnel peu d' expérience Vue pour attirer les nouveaux arrivants !
Le document officiel: Vue.js
Vue réalisée à l' aide des extrémités avant et arrière en interaction ASP.NET MVC
Avant de lire l'article suivant vous devez regarder le fonctionnaire Vue recommandée avant et après la fin de l'interaction des plug-ins:
1.resource (après l'abolition officielle de la maintenance pour les plug-ins de la version 2.0)
2.axios
Note: Dans le présent, sont plug-in asynchrone, car cela aura une utilisation significative dans votre projet, bien sûr, vous pouvez également utiliser d'autres bibliothèques js telles que jQuery, Fetch etc ...
Exemple:
Manette
1 en utilisant Demo.Models;
2 à l' aide du système;
3 en utilisant System.Collections.Generic;
4 en utilisant System.Linq;
5 using System.Web;
6 en utilisant System.Web.Mvc;
7
8 Demo.Controllers d'espace de noms
9 {
10 // [RoutePrefix ( "api / marchandises")]
11 public class GoodsController: contrôleur
12 {
13 Liste <GoodsEntity> goosdList = new List <GoodsEntity>
14 {
15 nouveaux GoodsEntity () {ID = 001, Name = "水", type = 1, le prix = 3},
16 nouveaux GoodsEntity () {ID = 002, Name = "牛奶", type = 1, Prix = 10},
17 nouveaux GoodsEntity () {ID = 003, Name = "面包", type = 2, Prix = 15}
18};
21 publique ActionResult Index ()
22 {
23 retour View ();
24}
25
26 public ActionResult Check ()
27 {
28 Voir le retour ();
29}
30
31 [HttpGet]
32 publique JsonResult GetGoodsType ()
33 {
34 Liste <int> goodsType = new List <int> ();
35 foreach (point var dans goosdList)
36 {
37 if (goodsType.Contains (item.Type)!)
38 {
39 goodsType.Add (item.Type);
40}
41}
42 Json retour (goodsType, JsonRequestBehavior.AllowGet);
43}
44
45 [HttpGet]
46 GetAllGoods publics JsonResult ()
47 {
48 retour JSON (goosdList, JsonRequestBehavior.AllowGet);
49}
50
51 [HttpPost]
52 GetGoods de JsonResult publics (int id)
53 {
54 entité var = goosdList.Where (g => g.ID == id) .FirstOrDefault ();
55 si (entité = null!)
56 {
57 retour JSON (nouveau ReturnJsonInfo (500, "succès!", Entité));
58}
59 Json de retour (nouvelle ReturnJsonInfo (400, "Erreur", null));
60}
61
62 [HttpPost]
63 publique JsonResult UpdateGoods (entité de GoodsEntity)
64 {
65 if (entity = null!)
66 {
67 var goodsEntiy = goosdList.FirstOrDefault (g => == g.ID entity.ID);
68 if (goodsEntiy! = Null)
69 {
70 goodsEntiy = entité;
71 retour JSON (nouveau ReturnJsonInfo (500, "succès!", GoosdList));
72}
73 goosdList.Add (entité);
74 retour JSON (nouveau ReturnJsonInfo (500, "succès!", GoosdList));
75}
76 Json de retour (nouvelle ReturnJsonInfo (400, "Erreur", null));
77}
78
79 [HttpPost]
80 JsonResult publics DelectGoods (int id)
81 {
82 entité var = goosdList.Where (g => g.ID == id) .FirstOrDefault ();
83 si (entité = null!)
84 {
85 goosdList.Remove (entité);
86 retour JSON (nouveau ReturnJsonInfo (500, "succès!", GoosdList));
87}
88 Json de retour (nouvelle ReturnJsonInfo (400, "Erreur", null));
89}
90
91}
92}
Dans les charges de commande ci-dessus quelques exemples de données, et sont retournés au format JSON extrémité avant, de sorte que l'extrémité avant peut utiliser ces données directement.
NOTE: Les rendements de contrôleur json à l'extrémité avant, à l'aide de ce qui précède « ReturnJsonInfo » pour le retour à la séquence cible, le code « ReturnJsonInfo » est comme suit.
1 à l' aide du système;
2 en utilisant System.Collections.Generic;
3 en utilisant System.Linq;
4 en utilisant System.Web;
5
6 espaces de noms Demo.Models
7 {
8 public class ReturnJsonInfo
9 {
Code 10 public int {get; ensemble; }
11 chaîne publique message {get; ensemble; }
12 objet public Entité {get; ensemble; }
13 publique ReturnJsonInfo (Code int, string message, objet obj)
14 {
15 this.Code = code;
16 this.message = message;
17 this.Entity = obj;
18}
19}
20}
Vue
1. Le plugin ressource front-end
1 @ {
2 ViewBag.Title = "Marchandises ce Website";
3}
4 <script type = "text / javascript" src = "~ / Ressources / Scripts / vue.js"> </ script>
5 <script type = "text / javascript" src = "~ / Ressources / 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-modèle = "newGoods.id" /> </ td>
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 = v-modèle "texte" = "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.longueur ">
26 <tr>
27 <td>编号</ td>
28 <td>名称</ td>
29 <td>类型</ td>
30 <td>售价</ td>
31 </ tr>
32 <tr v-for = "pièce 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 vue var = new Vue (
42 {
43 el: "#demo",
44 données: {
45 goodsList: [],
46 newGoods: {id: '', le nom: '', tapez: '', prix: ''}
47},
48 créé: function () {
49 this.InIt () ;
50},
51 méthodes: {
52 InIt: function () {
53 //初始化
54 this.GetAllGoods ();
55},
56 GetAllGoods: function () {
57 var _self = this;
58 _self. $ http.get ( "../ marchandises / GetAllGoods"). puis (
59 // Lambda写法
60 (réponse) => {
61 // successCallback
62 for (var i = 0; i <response.data.length; i ++) {
63 _self.goodsList.push (response.data [i]);
64}
65}
66 (réponse) => {
67 // errorCallback
68}
69);
70},
71 GetGoods: function () {_id
72 var = _self cela;
73 _self.goodsList = [];
74 if (_id.length> 0) {
. 75 _self $ http.post ( "../ marchandises / GetGoods", {id: _id}). Puis (
76 //传统写法
fonction 77 (réponse) {
78 // successCallback
79 si (response.data.Code = = 500) {
80 _self.goodsList.push (response.data.Entity);
81}
82 else {
83 alert (response.data.Message);
84}
85},
Fonction 86 (réponse) {
87 // errorCallback
88}
89)
90 .catch (fonction (réponse) {
91 console.log (réponse);
92});
93}
94 else {
95 _self.GetAllGoods ();
96}
97}
98}
99}
100);
101 </ script>
2. Les modules frontaux Axios
1 @ {
2 Implantation = null;
3}
4
5 <! DOCTYPE html>
6
7 <html>
8 <head>
9 <meta name = "viewport" content = "width = dispositif largeur" />
10 <title> Vérifier </ title>
11 <script type = "text / javascript" src = "~ / Ressources / scripts / vue.js"> </ script>
12 <script type = "text / javascript" src = "~ / Ressources / scripts / axios.min.js"> </ script>
13 </ head>
14 <body>
15 <div id = "demo">
16 <div>
17 <table>
18 <tr>
23 <td> <input type = v-modèle "texte" = "newGoods.name" /> </ td>
24
25 <td> <label>类型: </ label> </ td>
26 <td>
27 < sélectionner v-model = "newGoods.type">
28 <option value = ""> --- tous --- </ option>
29 <option v-for = "type dans goodsType" v-bind: value = "Type « > {{type}} </ option>
30 </ select>
31 </ td>
32
33 <td> <label>售价: </ label> </ td>
34 <td> <input type = "text" v-modèle = "newGoods.price" /> </ td>
35
36 <td>
37 <input type = "soumettre" value = "查询" v-le: click = "GetGoods (newGoods.id)" />
38 <input type = "soumettre" value = "更新" V-le: clic = "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> ID </ td>
49 <TD> Nom </ td>
50 <td>类型</ td>
68 données {
51 <td>售价</ td>
52 </ tr>
53 <tr v-for = "(item , index) dans goodsList">
54 <td> {{index + 1}} </ td>
55 <td > {{item.ID}} </ td>
56 <td> {{item.Name}} </ td>
57 <td> {{item.Type}} </ td>
58 <td> {{item. Prix}} </ td>
59 </ tr>
60 </ table>
61 </ div>
62 </ div>
63
64
65 <script type = "text / javascript">
66 var vm = new Vue ({
67 el: "#demo",
69 goodsType: [],
70 goodsList: [],
71 newGoods: {id: '', nom: '', du type: '', prix: ''}
72}
73 monté () {
74 this.GetGoodsType () ;
75 this.GetAllGoods ();
76},
77 méthodes:
78 {
79 GetGoodsType: function () {
. 80 axios.get ( "../ marchandises / GetGoodsType") puis (
81 (réponse) => {
82 this.goodsType = [];
83 (pour var i = 0; i <response.data.length; i ++) {
84 this.goodsType.push (response.data [i]);
85}
86}
87 (réponse) => {
88 alerte (Response.Status);
89}
90)
91 .catch (fonction (réponse) {
92 console.log (réponse);
93});
94},
95 GetAllGoods: function () {
. 96 axios.get ( » ../ Produits / GetAllGoods') puis (
97 fonction (réponse) {
98 vm.goodsList = [];
99 for (var i = 0; i <response.data.length; i ++) {
100 vm.goodsList.push (response.data [i]);
101}
102 //vm.goodsList.splice(response.data.length);
103},
104 fonction (réponse) {
105 alerte (Response.Status);
106}
107)
108 .catch (
109 function (erreur) {
110 alerte (erreur);
111}
112)
113}
114 GetGoods: function (_id) {
115 if (_id.length> 0) {
127 (réponse) => {
116 axios.post ( ». ./Goods/GetGoods », {id: _id}.) puis (
117 (réponse) => {
118 this.goodsList = [];
119 si (response.data.Code == 500) {
120 this.goodsList.push (response.data.Entity);
121}
122 else {
123 alert (response.data.Message);
124}
125
126},
128 alerte (Response.Status);
129}
130)
131 .catch (fonction (réponse) {
132 console.log (réponse);
133});
134}
135 else {
136 this.GetAllGoods ();
137}
138},
139 UpdateGoods: fonction (_id, _name, _type, _price) {
140 axios.post ( "../ marchandises / UpdateGoods", {entité: {ID: _id, Nom: _name, Type: _type, Prix :. _price}}) puis (
141 (réponse) => {
142 this.goodsList = [];
143 if (response.data.Code == 500) {
157 console.log (réponse);
144 for (var i = 0; i <response.data.Entity.length; i ++) {
145 this.goodsList.push (response.data.Entity [i]);
146}
147}
148 else {
149 alert (response.data.Message);
150}
151},
152 (réponse) => {
153 alerte (Response.Status);
154}
155)
156 .catch (fonction (réponse) {
158});
159},
160 DelectGoods: function () {_id
161. Axios.post ( "../ Produits / DelectGoods", {id: _id}) puis (
162 (réponse) => {
163 this.goodsList = [];
164 if (response.data.Code == 500) {
165 for (var i = 0; i <response.data.Entity.length; i ++) {
166 this.goodsList.push (response.data.Entity [i]);
167}
168}
169 else {
170 alert (réponse .data.Message)
171}
172
173},
174 (réponse) => {
175 alert (Response.Status);
176}
177)
178 .catch (fonction (réponse) {
179 console.log (réponse);
180});
181}
182},
183
184});
185 </ script>
186 </ body>
187 </ html>
Compte tenu de ce qui précède, l'extrémité avant est remplie avec un tableau, il convient de noter que dans le tableau vue de surveiller celui-ci n'a pas particulièrement sympathique. Mais il fournit également une très sympathique api.
Si vous avez la mise à jour au- dessus du point de vue, reportez - vous à la vue d'exploitation sur un tableau fourni par le fonctionnaire méthode
péroraisons:
Dans ce qui précède Demo en utilisant le modèle MVC ASP.NET. Lors de l'écriture Voir partie de se sentir vraiment plus pratique, vous n'avez pas besoin d'aller pour obtenir les éléments de l'écriture de code, il suffit de se lier à des données sur les éléments de données variables concernent à ce sujet.
Bien sûr, vous pouvez également choisir la syntaxe Razor, mais ne semblait pas très sympathique.
Ce qui précède est un résumé de certaines personnes après avoir écrit cette Démonstrations. Si la description incorrecte, s'il vous plaît @author modifier, je vous remercie!