AJAX का उपयोग करके क्लाइंट पर .NET मेटाडेटा प्राप्त करना

ASP.NET MVC वातावरण में प्रोग्राम करने वाले सभी को अच्छी तरह से पता है कि सामान्य रूप से .NET में और विशेष रूप से MVC में व्यापक रूप से मेटाडेटा का उपयोग कैसे किया जाता है। MVC में, विशेषताओं का उपयोग मार्कअप उत्पन्न करने और क्लाइंट से प्राप्त डेटा को मान्य करने में दोनों किया जाता है।
क्लासिक साइट प्रोग्रामिंग मॉडल का उपयोग करना, यह बहुत अच्छा काम करता है। लेकिन क्या होगा अगर आप ajax का उपयोग करके काम करते हैं और क्लाइंट पर गतिशील रूप से html मार्कअप उत्पन्न करते हैं? क्या आप ग्राहक पर मॉडल मेटाडेटा (बाद में एमडीएम के रूप में संदर्भित) करना चाहते हैं? मैं - हाँ!

इसका सीधा तरीका यह है कि डेटा और एमडीएम दोनों को मिलाकर जोंस तैयार किया जाए। हम हमेशा कंट्रोलर में कुछ लिख सकते हैं जैसे:

public ActionResult GetData() { return Json(new { data = new {  }, meta = new {  } }); } 

यह एक ब्राउज़र में मॉडल के साथ काम करते समय सरल, लेकिन सुविधाजनक नहीं है और यह किसी भी तरह भद्दा दिखता है।
यह मेरे साथ हुआ है कि एमडीएम को उसी तरह से प्रसारित किया जाना चाहिए जैसे कि सर्वर या ब्राउज़र http हेडर में करता है। चलो निम्नलिखित प्रयास करें:

1. आइए मेटा ऑब्जेक्ट बनाते हैं।
2. हम इसे एक जस स्ट्रिंग में क्रमबद्ध करते हैं।
3. हम स्ट्रिंग को बेस 64 में एन्कोड या परिवर्तित करेंगे (यह आवश्यक है क्योंकि http हैडर एएससीआईआई में पारित हो गया है)।
4. चलो "मेटा-डेटा" नाम के साथ http हेडर बनाते हैं।

अगला, मैंने सरल कोड लिखा जो इस विचार को लागू करता है।
सबसे पहले, मॉडल को परिभाषित करें और गुणों पर विशेषता सेट करें।

 public class Data { [ReadOnly(true)] [DisplayName("")] public int Id { get; set; } [DisplayName("")] public string Name { get; set; } } 

हम एक सरल क्रिया विधि लिखेंगे जो ग्राहक को डेटा और एमडीएम लौटाएगी।

 public ActionResult GetData() { var data = new Data { Id = 1, Name = "Test" }; var meta = ModelMetadataProviders.Current.GetMetadataForType(() => data, typeof(Data)); var metaForJS = meta.Properties.ToDictionary( p => p.PropertyName, p => new { displayName = p.GetDisplayName(), readOnly = p.IsReadOnly }); var jsonMeta = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(metaForJS); // Uri.EscapeDataString -    .     base64. Response.Headers.Add("data-meta", Uri.EscapeDataString(jsonMeta)); return Json(data, JsonRequestBehavior.AllowGet); } 

ब्राउज़र के एड्रेस बार में लोकलहोस्ट टाइप करें: 67578 / हब / गेटडाटा और http हेडर को देखें।

 HTTP/1.1 200 OK Cache-Control: private Content-Type: application/json; charset=utf-8 Server: Microsoft-IIS/8.0 X-AspNetMvc-Version: 4.0 data-meta:5B%7B%22displayName%22%3A%22%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD %D0%B8%D0%B5%22%2C%22readOnly%22%3Afalse%7D%2C%7B%22displayName%22%3A%22%D0%9D %D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%22%2C%22readOnly%22%3Atrue%7D%5D X-AspNet-Version: 4.0.30319 ... 

सुनिश्चित करें कि सब कुछ जैसा होना चाहिए, वैसा ही काम करें और कोड के क्लाइंट की तरफ बढ़ें।

 function createField(name, value, meta) { //      return $('<div/>').append( $("<label/>").attr('for', name).text(meta[name].displayName), $("<input type='text'/>").attr("name", name).attr("readonly", meta[name].readOnly).val(value) ); } $(function () { $.getJSON("/Hab/GetData") .done(function (data, s, xhr) { // ,    js  meta var meta = $.parseJSON(decodeURIComponent(xhr.getResponseHeader("data-meta"))); //       for (var p in data) $('body').append(createField(p, data[p], meta)); }) .error(function(d,s){alert(s);}); }); 

नतीजतन, हमें सर्वर पर मॉडल के मेटाडेटा को ध्यान में रखते हुए दो इनपुट फ़ील्ड मिलते हैं।

बैकबोन क्लाइंट पर उपयोग किए जाने पर यह दृष्टिकोण विशेष रूप से सुरुचिपूर्ण दिखता है। हम पार्स विधि का पालन करके एमडीएम प्राप्त कर सकते हैं:

 var model= Backbone.Model.extend({ .... parse: function(data, xhr){ this.meta = $.parseJSON(decodeURIComponent(xhr.getResponseHeader("data-meta"))); return data; }, ...... }); 

एक जेएस वस्तु के रूप में model.meta में एमडीएम प्राप्त किया है, हम मॉडल को प्रस्तुत करने के लिए देखने में एमडीएम का उपयोग कर सकते हैं

 var view = Backbone.View.extend({ render: functoin(){ var m = this.model.toJSON(); this.$el.html(this.template(_.extend(m, { meta: this.model}))); } }); 

tempalte के लिए कुछ का उपयोग कर की तरह:

 <script > ... <label><%-meta.name.displayName%></label> <input type='text' value="<%name%>" <%-meta.readOnly ?"readonly":"" %> />" ... </script> 

अंत में, मैं यह कहता हूं कि क्लाइंट पर मॉडल को मान्य करने के लिए वर्णित दृष्टिकोण को आसानी से लागू किया जा सकता है।