जटिल ASP.NET MVC नियंत्रण बनाने का एक सरल तरीका

निश्चित रूप से सभी ने अपने asp.net mvc control बनाए (बेशक, हम asp.net mvc encoders के बारे में बात कर रहे हैं)। आपको टैगब्यूलर का उपयोग करके नियंत्रण बनाने की विधि से परिचित होना चाहिए? क्या आपने वास्तव में जटिल नियंत्रण लिखने की कोशिश की है (उदाहरण के लिए, बहुत से जावास्क्रिप्ट या मार्कअप के साथ, जो विकल्पों पर निर्भर करता है)? तब आप शायद उद्धरणों से बच निकलने, तार को जोड़ने (या कॉलिंग .फॉर्म) (कार्यों), आदि के नरक को जानते हैं। "असुविधा"। मेरा सुझाव है कि एक काफी सरल तकनीक को देखें जो ऐसी चीजों से बचने की अनुमति देगा और साथ ही नियंत्रण के कार्यात्मक पक्ष पर ध्यान केंद्रित करेगा, न कि भूसी की प्रोग्रामिंग पर।

त्याग

यहाँ कहा जाएगा कि बहुत कुछ जंगली बटन और गोवानोकॉड हो सकता है। इसके अलावा, इस पोस्ट को उन लोगों के लिए बनाया गया है जो पहले पैराग्राफ में वर्णित समस्याओं से काफी हैरान हैं। यह एक पाठ्यपुस्तक नहीं है, न ही कार्रवाई के लिए एक मार्गदर्शिका। यह केवल अभियान का विवरण है, और अधिक कुछ नहीं।

ASP.NET MVC नियंत्रण क्लासिक

हम संक्षेप में बताएंगे कि कैसे नियंत्रण अब मूर्तिकला कर रहे हैं।
आमतौर पर वे इस तरह से एक HtmlHelper एक्सटेंशन करते हैं:

public static string InputExControl(this HtmlHelper @this) { StringBuilder sb = new StringBuilder(); sb.Append("<input type=\"text\">.......blablabla.........."); return sb.ToString(); } 

या तो एक ही उद्देश्य के लिए TagBuilder का उपयोग करें:

 public static string InputExControl(this HtmlHelper @this) { TagBuilder tagBuilder = new TagBuilder("input"); //.....blablabla.... return tagBuilder.ToString(); 

व्यक्तिगत रूप से, यह मुझे इस कोड से बंद कर देता है: कम से कम इस कोड को बनाए रखना मुश्किल है (IMHO), और इससे भी अधिक, अद्यतन करना भी आसान नहीं है।

कार्य

आइए इस कार्य को सेट करें: हमें सर्वर साइड पर AJAX सत्यापन के साथ इनपुट नियंत्रण बनाने की आवश्यकता है (दिए गए Regexp के आधार पर), सत्यापन परिणाम का एक संकेत है, और इसलिए कि नियंत्रण एक अलग विधानसभा में है। यह एक सरल नियंत्रण है जो सामान्य विचार दिखाएगा।

दूसरे कैसे करते हैं?

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

• MVC नियंत्रण टूलकिट HtmlHelper सहायकों से StringBuilder वापसी विधि का उपयोग करता है।
• MVCContrib प्रोजेक्ट TagBuilder का उपयोग करता है।
  

अन्य वाणिज्यिक नियंत्रण मुख्य रूप से "StringBuilder.Format ()" दृष्टिकोण (शुद्ध asp.net mvc नियंत्रण के लिए) का उपयोग करते हैं, लेकिन (DevExpress की तरह) asp.net webForms नियंत्रण खींच सकते हैं।

विचार

नियंत्रण में .cshtml का वर्णन करने के लिए रेज़र सिंटैक्स asp.net mvc आंशिक दृश्य का उपयोग करने का विचार है, लेकिन अपने साथ .cshtml फ़ाइलों को न खींचें, अवश्य।

चलो स्टूडियो में एक सरल asp.net mvc 4 परियोजना बनाते हैं, पुस्तकालय समाधान में जोड़ते हैं (चलो इसे MyControlLib कहते हैं), जिसमें हम मूल asp.net mvc 4 lib पर ध्यान केंद्रित करेंगे।

MyControlLib में InputExControl.cshtml lib में रिक्त सामग्री के साथ एक फ़ाइल जोड़ें। यह हमारे नियंत्रण का एक हिस्सा होगा जिसे हमने पहले टैगब्यूलर तकनीक का उपयोग करके लिखा था। इस cshtml फ़ाइल को C # कोड में अनुवाद करने के लिए, हम रेजर जेनरेटर का उपयोग करेंगे। यह हमें उत्पन्न करने की अनुमति देगा कि रेजर इंजन एक asp.net mvc एप्लिकेशन में फ्लाई पर क्या उत्पन्न करेगा। अनिवार्य रूप से, यह आवश्यक है ताकि .shtml फ़ाइलों को न ले जाएं और ऐसा प्रतीत हो कि "वयस्क नियंत्रण" (वाणिज्यिक वाले खींच नहीं सकते हैं, इसलिए हम नहीं जीते)। ठीक है, InputExControl.cshtml की सामग्री में निम्नलिखित डालें:

 @* Generator: MvcView *@ 

, और इसके गुणों में हम RazorGenerator के रूप में कस्टम टूल निर्दिष्ट करेंगे।

System.Web.Mvc.WebViewPage से उत्पन्न उत्तराधिकारी वर्ग मिला। पीढ़ी बहुत सुविधाजनक नहीं है, क्योंकि एक गैर-आंशिक वर्ग बनाता है (जेनरेटर के स्रोत कोड में या केवल जनरेट की गई फ़ाइल में हाथ से तय किया जा सकता है), अर्थात। इस तरह के वर्ग को उन तरीकों से विस्तारित करना कठिन है, जिनकी हमें ज़रूरत है

चलो वर्ग InputExControlSettings बनाएँ , जो हमारे नियंत्रण की सेटिंग्स का प्रतिनिधित्व करेगा। यह बहुत सरल होगा:

  public class InputExControlSettings { public string Name { get; set; } //  public dynamic CallbackRouteValues { get; set; } //  ajax callback- public string ValidationRegexp { get; set; } //   } 

सादगी के लिए, मैंने नाम फ़ील्ड में प्रवेश किया, जो नियंत्रण क्लाइंट कोड (तत्व के DOM की संपत्ति) में अपनी आईडी को सत्यापित करेगा। साथ ही, यह क्षेत्र हमारे नियंत्रण (सत्यापन परिणाम का संकेतक) द्वारा आवश्यक उप-नाम के नामों की पीढ़ी में भाग लेगा।

Uri पाने के लिए हमें CallbackRouteValues प्रॉपर्टी की आवश्यकता होगी जहां हम क्लाइंट जावास्क्रिप्ट से सत्यापन अनुरोध भेजेंगे। यह आमतौर पर नियंत्रक और नियंत्रक विधि को इंगित करता है।

अब सेटिंग्स वर्ग को हमारे नियंत्रण- cshtml फ़ाइल के लिए एक मॉडल के रूप में निर्दिष्ट किया जा सकता है:

 @* Generator: MvcView *@ @model InputExControlSettings @{ //     ,       string controlId = Model.Name; string controlResultId = Model.Name + "_Result"; } 

कोड को आगे लिखने के लिए, हमें एक सरल बात समझने की आवश्यकता है: कॉलबैक आमतौर पर हमारे नियंत्रण को खींच लेगा, इसलिए हमें नियंत्रण की उपस्थिति प्राप्त करने के लिए किसी साधारण GET अनुरोध से कॉलबैक को अलग करने की आवश्यकता है। हमारे लिए निर्धारित करने की एक सरल विधि द्वारा, मैंने हेडर में एक "विशेष" (हमारे) मूल्य की उपस्थिति को चुना। इस प्रकार हमें एक छोटा सहायक मिला। इसके अलावा, मैंने इसका इस्तेमाल किया (बुरा कोड!) कॉलबैकRouteValues मूल्यों से उरी पाने के लिए एक सहायक के रूप में:

  internal static class InputExControlHelper { public static bool IsCallback() { return !string.IsNullOrEmpty(HttpContext.Current.Request.Headers["InputExControAjaxRequest"]); } public static MvcHtmlString CallbackHeaderName { get { return MvcHtmlString.Create("InputExControAjaxRequest"); } } public static string GetUrl(dynamic routeValues) { if (HttpContext.Current == null) throw new InvalidOperationException("no context"); RequestContext context; if (HttpContext.Current.Handler is MvcHandler) { context = ((MvcHandler) HttpContext.Current.Handler).RequestContext; } else { var httpContext = new HttpContextWrapper(HttpContext.Current); context = new RequestContext(httpContext, new RouteData()); } var helper = new UrlHelper(context, RouteTable.Routes); return helper.RouteUrl(string.Empty, new RouteValueDictionary(routeValues)); } } 

ठीक है, यह हमारे नियंत्रण का प्रतिनिधित्व करने के लिए एक कोड लिखने का समय है:


यह कोड यथासंभव सरल है: यदि हमें कॉलबैक प्राप्त नहीं हुआ, तो हम जावास्क्रिप्ट सहित मुख्य दृश्य प्रदर्शित करते हैं, जो यह कॉलबैक करेगा। कॉलबैक के मामले में, हम ContentType को JSON के रूप में रखते हैं और नियंत्रण सत्यापन विधि InternalValidate(string) ।

वास्तव में, ViewData.Model की मान्यता और स्थापना का कोड खुद एक आंशिक InputExControl विधि के रूप में सजाया जाएगा और बहुत सरल होगा:

 partial class InputExControl { public InputExControl(InputExControlSettings settings) { ViewData.Model = settings; } private MvcHtmlString InternalValidate(string value) { Thread.Sleep(2000); //long validation emulator... var settings = ViewData.Model; var regexp = new Regex(settings.ValidationRegexp, RegexOptions.Compiled); var res = regexp.IsMatch(value); var scriptSerializer = new JavaScriptSerializer(); var rv = scriptSerializer.Serialize(new { result = res }); return MvcHtmlString.Create(rv); } } 

ठीक है, हमने एक नियंत्रण लिखा था, लेकिन हम अभी भी अपने एमवीसी प्रोजेक्ट में इसका उपयोग नहीं कर सकते हैं। असली लड़के HtmlHelper विस्तारक के नियंत्रण में लिखते हैं, जो हम करेंगे:

 namespace MyControlLib { public static class HtmlExtensions { public static HtmlString InputEx(this HtmlHelper @this, Action<InputExControlSettings> setupFn) { var options = new InputExControlSettings(); //   setupFn(options); //  var view = new InputExControl(options); //   var tempWriter = new StringWriter(CultureInfo.InvariantCulture); //       Razor view.PushContext(new WebPageContext(), tempWriter); //   view.Execute(); //  View -     view.PopContext(); //   return MvcHtmlString.Create(tempWriter.GetStringBuilder().ToString()); //    View } } } 

ठीक है, अब हमारे पास एक विस्तारक विधि है। यह हमारे नियंत्रण को मुख्य अनुप्रयोग में एकीकृत करने का समय है। बस एक आंशिक दृश्य MyInputCtrlPartial (और एक एक्शन विधि जिसे नाम दिया गया है) बनाएं, जहां कुछ लिखें

 @using MyControlLib @Html.InputEx(s=> { s.Name = "MyInputCtrl"; s.CallbackRouteValues = new { Controller = "Home", Action = "MyInputCtrlPartial" }; s.ValidationRegexp = @"^\d+$"; }) 

और इसे कॉल करें (मुख्य दृश्य में Html .Partial ("MyInputCtrlPartial") का उपयोग करके)।

हमें PartialView में नियंत्रण का वर्णन करने की आवश्यकता है, क्योंकि "रेंडरिंग" का परिणाम अलग-अलग होगा - प्रेषित हेडर इंडिकेटर के आधार पर जिसे जाँचने के लिए हमारे पास कॉलबैक है।

यह केवल निष्पादन के लिए परियोजना शुरू करने के लिए बनी हुई है और सुनिश्चित करें कि सब कुछ काम करता है (या काम नहीं करता है, क्योंकि किसी ने गड़बड़ कर दी) (नोट: बदले हुए घटना को उठाने के लिए आपको नियंत्रण से पहले माउस को पोक करने की आवश्यकता है)।

परिणाम

नीचे पंक्ति: हम एक कठिन नियंत्रण लिखने में सक्षम थे, जबकि हमारे पास रेजर टेम्पलेट (जावास्क्रिप्ट सहित) में काम करने वाली इंटेलीसेन्स है, जो अच्छी खबर है।

एक उदाहरण परियोजना http://rghost.ru/42818685 ( दर्पण ) से डाउनलोड किया जा सकता है।

टिप्पणियों का स्वागत है।