VueJs + MVC न्यूनतम कोड अधिकतम कार्यक्षमता

शुभ दोपहर

मैंने कई वर्षों तक WPF का उपयोग किया। MVVM पैटर्न संभवतः सबसे सुविधाजनक वास्तुशिल्प पैटर्न में से एक है। मैंने मान लिया कि एमवीसी लगभग एक ही है। जब मैंने एमवीसी के उपयोग को काम के एक नए स्थान पर देखा, तो मुझे जटिलता और उसी समय प्राथमिक प्रयोज्य की कमी पर आश्चर्य हुआ। सबसे अधिक कष्टप्रद यह है कि सत्यापन केवल तब होता है जब फॉर्म ओवरलोड होता है। जिस क्षेत्र में त्रुटि है, उसे उजागर करने वाले कोई लाल फ्रेम नहीं हैं, लेकिन त्रुटियों की एक सूची के साथ सिर्फ एक चेतावनी। यदि बहुत सी त्रुटियां हैं, तो आपको कुछ त्रुटियों को ठीक करना होगा और सत्यापन को दोहराने के लिए सहेजना होगा। सेव बटन हमेशा सक्रिय रहता है। लिंक की गई सूचियाँ वास्तव में js के माध्यम से कार्यान्वित की जाती हैं, लेकिन यह जटिल और भ्रामक है। मॉडल, दृश्य, और नियंत्रक को कसकर युग्मित किया जाता है ताकि यह सब परीक्षण कर सके महिमा बहुत मुश्किल है।
इससे कैसे निपटा जाए ?? यह किसके लिए दिलचस्प है मैं कैट के तहत पूछता हूं।

और इसलिए हमारे पास:
क्लासिक रूप में एमवीसी रूपों का निर्माण पूरे पृष्ठ को ओवरलोड करने के रूप में सर्वर के साथ बातचीत करने का एक और तरीका नहीं है, जो उपयोगकर्ता के लिए सुविधाजनक नहीं है।
Reart, Angular, Vue और TransPage के लिए SinglePageApplicatrion जैसे फ्रेमवर्क का पूर्ण उपयोग अधिक सुविधाजनक इंटरफेस बनाना संभव बना देगा, लेकिन दुर्भाग्य से, सिद्धांत रूप में, यह इस परियोजना के ढांचे के भीतर संभव नहीं है।
-मनी कोड को लिखा गया है, स्वीकार किया गया है, और कोई भी आपको इसे फिर से करने नहीं देगा।
-हम C # प्रोग्रामर हैं और सही मात्रा में js नहीं जानते हैं।

इसके अलावा, क्लाइंट पर जटिल तर्क लिखने के लिए Reart, Angular, Vue चौखटे को तेज किया जाता है, जो कि मेरे WPF लुक में सही नहीं है। सभी तर्क एक ही स्थान पर होने चाहिए और यह एक व्यावसायिक वस्तु और / या मॉडल वर्ग है। दृश्य को केवल मॉडल की स्थिति को प्रदर्शित नहीं करना चाहिए।
पूर्वगामी के आधार पर, मैंने एक दृष्टिकोण खोजने की कोशिश की, जो आपको न्यूनतम जेएस कोड के साथ अधिकतम कार्यक्षमता प्राप्त करने की अनुमति देता है। सबसे पहले, न्यूनतम कोड जिसे किसी विशिष्ट फ़ील्ड को आउटपुट और अपडेट करने के लिए लिखा जाना चाहिए।
मेरा प्रस्तावित VueJs + MVC बंडल इस तरह दिखता है:

• VueJs cdn के माध्यम से कनेक्शन के साथ सबसे सरल संस्करण में उपयोग किया जाता है। यदि आवश्यक हो तो घटक सीडीएन के माध्यम से जुड़े हो सकते हैं।
• लोड करने के बाद, Vue फॉर्म डेटा को अजाक्स के माध्यम से लोड करता है।
• हर बार जब प्रपत्र बदलता है, तो Vue सर्वर को सभी परिवर्तन भेजता है (पाठ फ़ील्ड के लिए, आप कॉन्फ़िगर कर सकते हैं कि फ़ोकस खो जाने पर परिवर्तन भेजे जाते हैं)।
• इकाई तंत्र के माध्यम से सर्वर पर वैधता होती है और अमान्य फ़ील्ड क्लाइंट को वापस कर दिए जाते हैं और एक संकेत है कि डेटाबेस के संबंध में मॉडल की स्थिति बदल गई है।
  -अगर अगला सत्यापन अनुरोध पिछले एक से पहले होता है, तो पिछला सत्यापन अनुरोध रद्द कर दिया जाएगा।
  एमवीसी मॉडल का उपयोग नहीं किया जाता है। WPF अर्थों में ViewModel फ़ंक्शन यहाँ vue और कंट्रोलर के बीच धुंधला है।
  क्लासिक रेजर पेज पर इस तरह के कार्यान्वयन के फायदे:
• इंटरफ़ेस Vue टूल का उपयोग करके तैयार किया गया है, जिसे ड्राइंग इंटरफेस के लिए डिज़ाइन किया गया है। मुख्य लाभ।
• ViewModel से अलग परतों को देखें।
• सत्यापन त्रुटियों को फॉर्म भरने के रूप में प्रदर्शित किया जाता है।
• सुविधा परीक्षण
  नुकसान:
• सत्यापन अनुरोधों के साथ सर्वर पर अत्यधिक भार।

• एक न्यूनतम करने के लिए प्रतिज्ञा और जेएस जानने की जरूरत है।

  
  

  मैं इस दृष्टिकोण को फॉर्म के साथ काम करने के लिए प्रारंभिक टेम्पलेट मानता हूं।
  एक विशिष्ट रूप के लिए एक वास्तविक आवेदन में, इसे अनुकूलित करना वांछनीय है:
  1) फ़ील्ड बदलते समय केवल एक सत्यापन अनुरोध भेजें, जो सर्वर पर मान्य होना चाहिए।
  2) सत्यापन लंबा है, क्षेत्र भरे हुए हैं, आदि। ग्राहक पर चलाएं।

  
  

तो चलिए चलते हैं।

अपने उदाहरण में, मैंने प्रशिक्षण डेटाबेस नॉर्थविंड का उपयोग किया, जिसे मैंने डेवेक्सट्रेम उदाहरणों में से एक के साथ डाउनलोड किया।
एप्लिकेशन निर्माण, इकाई का कनेक्शन और DbContext I का निर्माण पर्दे के पीछे छोड़ देगा। लेख के अंत में एक उदाहरण के साथ जीथब से लिंक करें।
एक नया खाली MVC 5 कंट्रोलर बनाएं। इसे OrdersController कहें। इसकी एक विधि अभी तक है।

public ActionResult Index() { return View(); } 

एक और जोड़ें

  public ActionResult Edit() { return View(); } 

अब आपको दृश्य / आदेश फ़ोल्डर में जाने और दो पेज Index.cshtml और Edit.cshtml जोड़ने की आवश्यकता है
एक महत्वपूर्ण ध्यान दें कि एक cshtml पृष्ठ बिना किसी मॉडल के काम करेगा, इसे विरासत के शीर्ष पर जोड़ा जाना चाहिए System.Web.Mvc.WebViewPage पृष्ठ।
यह माना जाता है कि Index.cshtml में एक तालिका है जिसमें से एक हाइलाइट की गई पंक्ति संपादन पृष्ठ पर जाएगी। अभी के लिए, बस लिंक बनाएँ जो संपादन पृष्ठ पर ले जाएगा।

 @inherits System.Web.Mvc.WebViewPage <table > @foreach (var item in ViewBag.Orders) { <tr><td><a href="Edit?id=@item.OrderID">@item.OrderID</a></td></tr> } </table> 

अब मैं किसी मौजूदा ऑब्जेक्ट के संपादन को लागू करना चाहता हूं।

नियंत्रक में एक विधि का वर्णन करने के लिए पहली बात यह है कि पहचानकर्ता द्वारा Json क्लाइंट के लिए एक वस्तु विवरण लौटाया जाएगा।

  [HttpGet] public ActionResult GetById(int id) { var order = _db.Orders.Find(id);//  string orderStr = JsonConvert.SerializeObject(order);//  return Content(orderStr, "application/json");// } 

आप यह सत्यापित कर सकते हैं कि ब्राउज़र में टाइप करके सब कुछ काम करता है (पोर्ट नंबर स्वाभाविक रूप से आपका है) http: // localhost: 63164 / आदेश / GetById? आईडी = 10501
आपको ब्राउज़र में ऐसा कुछ प्राप्त करना चाहिए

 { "OrderID": 10501, "CustomerID": "BLAUS", "EmployeeID": 9, "OrderDate": "1997-04-09T00:00:00", "RequiredDate": "1997-05-07T00:00:00", "ShippedDate": "1997-04-16T00:00:00", "ShipVia": 3, "Freight": 8.85, "ShipName": "Blauer See Delikatessen", "ShipAddress": "Forsterstr. 57", "ShipCity": "Mannheim", "ShipRegion": null, "ShipPostalCode": "68306", "ShipCountry": "Germany" } 

अच्छी तरह से (या) एक साधारण परीक्षा लिखना। हालाँकि, इस लेख के दायरे से परे परीक्षण छोड़ दें।

  [Test] public void OrderControllerGetByIdTest() { var bdContext = new Northwind(); var id = bdContext.Orders.First().OrderID; //    var orderController = new OrdersController(); var json = orderController.GetById(id) as ContentResult; var res = JsonConvert.DeserializeObject(json.Content,typeof(Order)) as Order; Assert.AreEqual(id, res.OrderID); } 

अगला, आपको एक Vue फॉर्म बनाने की आवश्यकता है।

 @inherits System.Web.Mvc.WebViewPage <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> </title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>A  </h1> <table > <tr v-for="(item,i) in order"> @*      *@ <td> {{i}}</td> <td> <input type="text" v-model="order[i]"/> </td> </tr> </table> </div> <script> new Vue({ el: "#app", data: { order: { OrderID: 10501, CustomerID: "BLAUS", EmployeeID: 9, OrderDate: "1997-04-09T00:00:00", RequiredDate: "1997-05-07T00:00:00", ShippedDate: "1997-04-16T00:00:00", ShipVia: 3, Freight: 8.85, ShipName: "Blauer See Delikatessen", ShipAddress: "Forsterstr. 57", ShipCity: "Mannheim", ShipRegion: null, ShipPostalCode: "68306", ShipCountry: "Germany" } } }); </script> </body> </html> 

यदि सब कुछ सही ढंग से किया जाता है, तो भविष्य के प्रारूप का प्रोटोटाइप ब्राउज़र में प्रदर्शित किया जाना चाहिए।

जैसा कि हम देख सकते हैं, Vue ने सभी फ़ील्ड ठीक उसी तरह प्रदर्शित किए जैसे मॉडल था। लेकिन मॉडल में डेटा अभी भी स्थिर है और इसके बाद पहली बात यह है कि डेटाबेस से लोड किए गए डेटा को केवल लिखी गई विधि के माध्यम से लागू करना है।
ऐसा करने के लिए, fetchOrder () विधि जोड़ें और इसे घुड़सवार अनुभाग में कॉल करें:

  new Vue({ el: "#app", data: { id: @ViewBag.Id, order: { OrderID: 0, CustomerID: "", EmployeeID: 0, OrderDate: "", RequiredDate: "", ShippedDate: "", ShipVia: 0, Freight: 0, ShipName: "0", ShipAddress: "", ShipCity: "", ShipRegion: null, ShipPostalCode: "", ShipCountry: "" }, }, methods: { //  fetchOrder() { var path = "../Orders/GetById?key=" + this.id; console.log(path); this.fetchJson(path, json => this.order = json); }, //    fetch fetchJson(path, collback) { try { fetch(path, { mode: 'cors' }) .then(response => response.json()) .then(function(json) { collback(json); } ); } catch (ex) { alert(ex); } } }, mounted: function() { this.fetchOrder(); } }); 

खैर, चूंकि ऑब्जेक्ट की पहचानकर्ता को अब नियंत्रक से आना चाहिए, फिर नियंत्रक में आपको पहचानकर्ता को गतिशील ViewBag ऑब्जेक्ट को पास करने की आवश्यकता होती है, ताकि इसे व्यू में प्राप्त किया जा सके।

  public ActionResult SimpleEdit(int id = 0) { ViewBag.Id = id; return View(); } 

यह बूट समय पर डेटा पढ़ने के लिए पर्याप्त है।
फॉर्म को कस्टमाइज़ करने का समय आ गया है।
लेख को अधिभार नहीं देने के लिए, मैंने न्यूनतम फ़ील्ड्स काटा। मैं शुरुआत के लिए सुझाव देता हूं कि लिंक की गई सूचियों के साथ कैसे काम करें।

  <table > <tr> <td> </td> <td > <input type="number" v-model="order.Freight" /> </td> </tr> <tr> <td>  </td> <td> <input type="text" v-model="order.ShipCountry" /> </td> </tr> <tr> <td> </td> <td> <input type="text" v-model="order.ShipCity" /> </td> </tr> <tr> <td> </td> <td> <input type="text" v-model="order.ShipAddress" /> </td> </tr> </table> 

शिपकाउंट्री और शिपअड्रेस फील्ड लिंक्ड लिस्ट के लिए सबसे अच्छे उम्मीदवार हैं।
यहाँ नियंत्रक विधियाँ हैं। जैसा कि आप देख सकते हैं, सब कुछ बहुत सरल है। सभी फ़िल्टरिंग Linq का उपयोग करके किया जाता है।

  /// <summary> ///    c     ///       ,    /// </summary> /// <param name="country"></param> /// <param name="region"></param> /// <returns></returns> [HttpGet] public ActionResult AvaiableCityList( string country,string region=null) { var avaiableCity = _db.Orders.Where(c => ((c.ShipRegion == region) || region == null)&& (c.ShipCountry == country) || country == null).Select(a => a.ShipCity).Distinct(); var jsonStr = JsonConvert.SerializeObject(avaiableCity); return Content(jsonStr, "application/json"); } /// <summary> ///    c   ///    ,    /// </summary> /// <param name="region"></param> /// <returns></returns> [HttpGet] public ActionResult AvaiableCountrys(string region=null) { var resList = _db.Orders.Where(c => (c.ShipRegion == region)||region==null).Select(c => c.ShipCountry).Distinct(); var json = JsonConvert.SerializeObject(resList); return Content(json, "application/json"); } 

लेकिन देखें कोड में काफी अधिक जोड़ा गया है।
देशों और शहरों के कार्यों के अलावा, आपको एक ऐसी घड़ी को जोड़ना होगा जो ऑब्जेक्ट के परिवर्तनों की निगरानी करता है, दुर्भाग्यवश, जटिल vue ऑब्जेक्ट का पुराना मूल्य नहीं बचाता है, इसलिए आपको इसे मैन्युअल रूप से सहेजने की आवश्यकता है, जिसके लिए मैं saveldldOrderValue विधि के साथ आया था: जबकि मैं इसमें केवल देश बचाता हूं। यह आपको शहरों की सूची को फिर से पढ़ने की अनुमति देता है जब देश बदलता है। अन्यथा, कोड समान है, मुझे लगता है। उदाहरण में, मैंने केवल एक-स्तरीय लिंक की गई सूची दिखाई (इस सिद्धांत द्वारा किसी भी स्तर का घोंसला बनाना मुश्किल नहीं है)।

 @inherits System.Web.Mvc.WebViewPage <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> </title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <table> <tr> <td>C </td> <td> <input type="number" v-model="order.Freight" /> </td> </tr> <tr> <td>  </td> <td> <select v-model="order.ShipCountry" class="input"> <option v-for="item in AvaialbeCountrys" :v-key="item">{{item}} </option> </select> </td> </tr> <tr> <td> </td> <td> <select v-model="order.ShipCity" > <option v-for="city in AvaialbeCitys" :v-key="city">{{city}} </option> </select> </td> </tr> <tr> <td> </td> <td> <input type="text" v-model="order.ShipAddress" /> </td> </tr> </table> </div> <script> new Vue({ el: "#app", data: { id: @ViewBag.Id, order: { OrderID: 0, CustomerID: "", EmployeeID: 0, OrderDate: "", RequiredDate: "", ShippedDate: "", ShipVia: 0, Freight: 0, ShipName: "0", ShipAddress: "", ShipCity: "", ShipRegion: null, ShipPostalCode: "", ShipCountry: "" }, oldOrder: { ShipCountry: "" }, AvaialbeCitys: [], AvaialbeCountrys: [] }, methods: { //  fetchOrder() { var path = "../Orders/GetById?Id=" + this.id; this.fetchJson(path, json => this.order = json); }, fetchCityList() { //     var country = this.order.ShipCountry; if (country == null || country === "") { country = ''; } var path = "../Orders/AvaiableCityList?country=" + country; this.fetchJson(path, json => {this.AvaialbeCitys = json;}); }, fetchCountrys() { var path = "../Orders/AvaiableCountrys"; this.fetchJson(path,jsonResult => {this.AvaialbeCountrys = jsonResult;}); }, //    fetch fetchJson(path, collback) { try { fetch(path, { mode: 'cors' }) .then(response => response.json()) .then(function(json) { collback(json); } ); } catch (ex) { alert(ex); } }, saveOldOrderValue:function(){ this.oldOrder.ShipCountry = this.order.ShipCountry; } }, watch: { order: { handler: function (after) { if (this.oldOrder.ShipCountry !== after.ShipCountry)//    { this.fetchCityList();//       } this.saveOldOrderValue(); }, deep: true } }, mounted: function () { this.fetchCountrys();//   //    ,      this.fetchOrder();//  this.saveOldOrderValue();//   } }); </script> </body> </html> 

एक अलग विषय मान्यता है। गति अनुकूलन के दृष्टिकोण से, निश्चित रूप से, आपको क्लाइंट पर सत्यापन करने की आवश्यकता है। लेकिन इससे कोड दोहराव हो जाएगा, इसलिए मैं एंटिटी स्तर पर सत्यापन के साथ एक उदाहरण दिखा रहा हूं (जैसा कि इसे आदर्श रूप से होना चाहिए)। एक ही समय में, न्यूनतम कोड, सत्यापन स्वयं बहुत जल्दी और अतुल्यकालिक रूप से भी होता है। जैसा कि अभ्यास ने दिखाया है, यहां तक ​​कि बहुत धीमी गति से इंटरनेट के साथ, सब कुछ सामान्य से अधिक काम करता है।
समस्या केवल तभी उत्पन्न होती है जब पाठ जल्दी से एक पाठ क्षेत्र में टाइप किया जाता है, और टाइपिंग की गति 260 वर्ण प्रति मिनट है। पाठ फ़ील्ड के लिए सबसे सरल अनुकूलन विकल्प है आलसी अद्यतन v-model .lazy = "order.ShipAddress" सेट करना, तब सत्यापन तब होगा जब फ़ोकस बदलता है। एक अधिक उन्नत विकल्प इन फ़ील्ड्स के लिए सत्यापन में देरी करना है + यदि प्रतिक्रिया प्राप्त करने से पहले अगला सत्यापन अनुरोध कहा जाता है, तो पिछले अनुरोध के प्रसंस्करण की उपेक्षा करें।
नियंत्रण में सत्यापन की प्रक्रिया के तरीके निम्नलिखित थे।

  [HttpGet] public ActionResult Validate(int id, string json) { var order = _db.Orders.Find(id); JsonConvert.PopulateObject(json, order); var errorsD = GetErrorsJsArrey(); return Content(errorsD.ToString(), "application/json"); } private String GetErrorsAndChanged() { var changed= _db.ChangeTracker.HasChanges(); var errors = _db.GetValidationErrors(); return GetErrorsAndChanged(errors,changed); } private static string GetErrorsAndChanged(IEnumerable<DbEntityValidationResult> errors,bool changed) { dynamic dynamic = new ExpandoObject(); dynamic.IsChanged = changed;//  IsChanged var errProperty = new Dictionary<string, object>();//      dynamic.Errors = new DynObject(errProperty);//        foreach (DbEntityValidationResult validationError in errors)//   { foreach (DbValidationError err in validationError.ValidationErrors)//   { errProperty.Add(err.PropertyName,err.ErrorMessage); } } var json = JsonConvert.SerializeObject(dynamic); return json; } 

     DynObject 

  public sealed class DynObject : DynamicObject { private readonly Dictionary<string, object> _properties; public DynObject(Dictionary<string, object> properties) { _properties = properties; } public override IEnumerable<string> GetDynamicMemberNames() { return _properties.Keys; } public override bool TryGetMember(GetMemberBinder binder, out object result) { if (_properties.ContainsKey(binder.Name)) { result = _properties[binder.Name]; return true; } else { result = null; return false; } } public override bool TrySetMember(SetMemberBinder binder, object value) { if (_properties.ContainsKey(binder.Name)) { _properties[binder.Name] = value; return true; } else { return false; } } } 

काफी क्रिया है, लेकिन यह कोड पूरे आवेदन के लिए एक बार लिखा जाता है और किसी विशिष्ट वस्तु या क्षेत्र के लिए ट्यूनिंग की आवश्यकता नहीं होती है। क्लाइंट पर काम करने के तरीके के परिणामस्वरूप, IsChanded और Errors गुणों के साथ json ऑब्जेक्ट। इन गुणों को स्वाभाविक रूप से हमारे Vue में निर्मित करने और ऑब्जेक्ट के प्रत्येक परिवर्तन के साथ भरने की आवश्यकता है।
सत्यापन त्रुटियों को प्राप्त करने के लिए, आपको इस सत्यापन को कहीं पर सेट करना होगा। ऑर्डर ऑब्जेक्ट की इकाई के हमारे विवरण में कुछ सत्यापन विशेषताओं को जोड़ने का समय है।

  [MinLength(10)] [StringLength(60)] public string ShipAddress { get; set; } [CheckCityAttribute(" ShipCity   ")] public string ShipCity { get; set; } 

MinLength और StringLength मानक गुण हैं, लेकिन ShipCity के लिए मैंने एक कस्टम विशेषता बनाई

  /// <summary> /// Custom Attribute Example /// </summary> [AttributeUsage(AttributeTargets.Property, AllowMultiple = false)] public class CheckCityAttribute : ValidationAttribute { public CheckCityAttribute(string message) { this.ErrorMessage = message; } protected override ValidationResult IsValid(object value, ValidationContext validationContext) { ValidationResult result = ValidationResult.Success; string[] memberNames = new string[] { validationContext.MemberName }; string val = value?.ToString(); Northwind _db = new Northwind(); Order order = (Order)validationContext.ObjectInstance; bool exsist = _db.Orders.FirstOrDefault(o => o.ShipCity == val && o.ShipCountry == order.ShipCountry)!=null; if (!exsist) { result = new ValidationResult(string.Format(this.ErrorMessage,order.ShipCity , val), memberNames); } return result; } } 

हालांकि, आइए इस लेख के दायरे के बाहर इकाई सत्यापन के विषय को भी छोड़ दें।
त्रुटियों को प्रदर्शित करने के लिए, आपको सीएसएस से लिंक जोड़ने और फ़ॉर्म को थोड़ा संशोधित करने की आवश्यकता है।
इस प्रकार से हमारे संशोधित रूप को अब देखना चाहिए:

 @inherits System.Web.Mvc.WebViewPage <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> id=@ViewBag.Id</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel="stylesheet" type="text/css" href="~/Content/vueError.css" /> </head> <body> <div id="app"> <table> <tr> <td> </td> <td class="tooltip"> <input type="number" v-model="order.Freight" v-bind:class="{error:!errors.Freight==''} " class="input" /> <span v-if="errors.Freight!==''" class="tooltiptext">{{errors.Freight}}</span> </td> </tr> <tr> <td>  </td> <td> <select v-model="order.ShipCountry" class="input"> <option v-for="item in AvaialbeCountrys" :v-key="item">{{item}} </option> </select> </td> </tr> <tr> <td> </td> <td class="tooltip"> <select v-model="order.ShipCity" v-bind:class="{error:!errors.ShipCity==''}" class="input"> <option v-for="city in AvaialbeCitys" :v-key="city">{{city}} </option> </select> <span v-if="!errors.ShipCity==''" class="tooltiptext">{{errors.ShipCity}}</span> </td> </tr> <tr> <td> </td> <td class="tooltip"> <input type="text" v-model.lazy="order.ShipAddress" v-bind:class="{error:!errors.ShipAddress=='' }" class="input" /> <span v-if="!errors.ShipAddress==''" class="tooltiptext">{{errors.ShipAddress}}</span> </td> </tr> <tr> <td> </td> <td> <button v-on:click="Save()" :disabled="IsChanged===false" || hasError class="alignRight">Save</button> </td> </tr> </table> </div> <script> new Vue({ el: "#app", data: { id: @ViewBag.Id, order: { OrderID: 0, CustomerID: "", EmployeeID: 0, OrderDate: "", RequiredDate: "", ShippedDate: "", ShipVia: 0, Freight: 0, ShipName: "0", ShipAddress: "", ShipCity: "", ShipRegion: null, ShipPostalCode: "", ShipCountry: "" }, oldOrder: { ShipCountry: "" }, errors: { OrderID: null, CustomerID: null, EmployeeID: null, OrderDate: null, RequiredDate: null, ShippedDate: null, ShipVia: null, Freight: null, ShipName: null, ShipAddress: null, ShipCity: null, ShipRegion: null, ShipPostalCode: null, ShipCountry: null }, IsChanged: false, AvaialbeCitys: [], AvaialbeCountrys: [] }, computed : { hasError: function () { for (var err in this.errors) { var error = this.errors[err]; if (error !== '' || null) return true; } return false; } }, methods: { //  fetchOrder() { var path = "../Orders/GetById?Id=" + this.id; this.fetchJson(path, json => this.order = json); }, fetchCityList() { //     var country = this.order.ShipCountry; if (country == null || country === "") { country = ''; } var path = "../Orders/AvaiableCityList?country=" + country; this.fetchJson(path, json => {this.AvaialbeCitys = json;}); }, fetchCountrys() { var path = "../Orders/AvaiableCountrys"; this.fetchJson(path,jsonResult => {this.AvaialbeCountrys = jsonResult;}); }, //    fetch Validate() {this.Action("Validate");}, Save() {this.Action("Save");}, Action(action) { var myJSON = JSON.stringify(this.order); var path = "../Orders/" + action + "?id=" + this.id + "&json=" + myJSON; this.fetchJson(path, jsonResult => { this.errors = jsonResult.Errors; this.IsChanged = jsonResult.IsChanged; }); }, fetchJson(path, collback) { try { fetch(path, { mode: 'cors' }) .then(response => response.json()) .then(function(json) { collback(json); } ); } catch (ex) { alert(ex); } }, saveOldOrderValue:function(){ this.oldOrder.ShipCountry = this.order.ShipCountry; } }, watch: { order: { handler: function (after) { this.IsChanged=true; if (this.oldOrder.ShipCountry !== after.ShipCountry)//    { this.fetchCityList();//       } this.saveOldOrderValue(); this.Validate(); }, deep: true } }, mounted: function () { this.fetchCountrys();//   //    ,      this.fetchOrder();//  this.saveOldOrderValue();//   } }); </script> </body> </html> 

यह सीएसएस जैसा दिखता है

 .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .error { color: red; border-color: red; border-style: double; } .input { width: 200px ; } .alignRight { float: right } 

और यहाँ काम का परिणाम है।

यह समझने के लिए कि सत्यापन कैसे काम करता है, आइए एक क्षेत्र का वर्णन करने वाले मार्कअप को ध्यान से देखें:

 <td class="tooltip"> <input type="number" **v-model="order.Freight" v-bind:class="{error:!errors.Freight==''} " **class="input" /> <span v-if="errors.Freight!==''" class="tooltiptext">{{errors.Freight}}</span> </td> 

यहाँ 2 महत्वपूर्ण मुख्य बिंदु हैं:

मार्कअप का यह हिस्सा v-bind एलिमेंट के आसपास की लाल बॉर्डर के लिए जिम्मेदार स्टाइल को जोड़ता है : class = "{error: Errors.Freight == ''} यहाँ vss css क्लास को कंडीशन से जोड़ता है।

और यहाँ यह पॉप-अप विंडो दिखाया गया है जब माउस कर्सर एक तत्व से अधिक है:

  <span v-if="errors.Freight!==''" class="tooltiptext">{{errors.Freight}}</span> 

इसके अतिरिक्त, तत्व मूल तत्व में विशेषता वर्ग = "टूलटिप" होना चाहिए।

अंतिम संस्करण में, सेव बटन को कॉन्फ़िगर किया गया है ताकि यह तभी उपलब्ध हो जब बचत संभव हो।
सत्यापन के लिए आवश्यक मार्कअप को आसान बनाने के लिए, मैं सबसे सरल घटक लिखने का प्रस्ताव करता हूं जो सभी सत्यापन को अपने ऊपर ले ले।

 Vue.component('error-aborder', { props: { error: String }, template: '<div class="tooltip" >' + '<div v-bind:class="{error:!error==\'\' }" >' + '<slot>test</slot>' + '</div>' + '<p class="tooltiptext" v-if="!error==\'\'" >{{error}}</p>' + '</div>' }); 

अब मार्कअप अधिक साफ-सुथरा दिखता है।

  <error-aborder v-bind:error="errors.Freight"> <input type="number" v-model="order.Freight" class="input" /> </error-aborder> 

विकास एक फॉर्म पर फ़ील्ड्स की व्यवस्था करने, एन्टीटी में सत्यापन स्थापित करने और सूची बनाने के लिए नीचे आता है। यदि सूचियां स्थिर हैं और बड़ी नहीं हैं, तो उन्हें पूरी तरह से कोड में सेट किया जा सकता है।

कोड का C # भाग अच्छी तरह से परीक्षण किया गया है। आगामी योजनाएं Vue परीक्षण से संबंधित हैं।

यही सब मैं बताना चाहता था।
मैं रचनात्मक आलोचना की बहुत सराहना करूंगा।

यहां सोर्स कोड का लिंक दिया गया है ।

उदाहरण में, फॉर्म को SimpleEdit कहा जाता है और इसमें नवीनतम संस्करण होता है। प्रारंभिक विकल्पों में रुचि रखने वाला कोई भी व्यक्ति कमिट्स के माध्यम से जा सकता है।
उदाहरण में, मैंने अनुकूलन लागू किया: सत्यापन के अनुरोध को रद्द करते हुए, यदि सत्यापन प्रतिक्रिया की प्रतीक्षा किए बिना, सत्यापन दूसरी बार हो।