C # का उपयोग करके HTML टैग को कैस्केडिंग करना

ASP.NET MVC के लिए बूटस्ट्रैप का उपयोग करते हुए एक वेब एप्लिकेशन लिखने की अगली प्रक्रिया में, मैंने खुद को यह सोचते हुए पकड़ा कि HTML टैग्स की अपरिहार्य रचना को घटाया जा सकता है। यह एचटीएमएल का विस्तार करने के लिए उपयोगकर्ता नियंत्रण के एक सेट के बारे में नहीं है। * अंतरिक्ष, लेकिन इसके बारे में थोड़ा बहुत झूठ है। जल्दबाजी के लिए, मेरा सुझाव है कि आप यहां (GitHub) देखें , और बाकी के लिए, बिल्ली का स्वागत करें।

कार्य

एक HTML टैग है जिसमें नाम, कक्षाएं, शैली, विशेषताएँ आदि हैं। .NET में, इस सुंदरता के "मैनुअल" निर्माण के लिए, यह माना जाता है कि TagBuilder वर्ग का उपयोग करें और धीरे-धीरे इसे आवश्यक मेटा और बस डेटा के साथ भरें।

लेकिन!

इस वर्ग का नियमित उपयोग मुझे बहुत नीरस लग रहा था। लगातार।

यहाँ एक मानक बटन तत्व जैसा दिखता है उसका एक उदाहरण है:

<!-- HTML --> <button type="button" class="btn btn-success">Success</button> 

 // C# var tb = new TagBuilder("button"); tb.Attributes.Add("type", "button"); tb.AddCssClass("btn"); tb.AddCssClass("btn-success"); tb.SetInnerText("Success"); var htmlString = tb.ToString(TagRenderMode.Normal); 

हम यहां जोड़ते हैं कि कभी-कभी HTML टैग के लिए नेस्टिंग की आवश्यकता होती है, जिसका अर्थ है कि आपको एक या कई * की आवश्यकता है। एक पैरामीटर के साथ InnerHtml, जिनमें से प्रत्येक को बदले में एक ही तरह से बनाया जाना चाहिए - लंबे समय तक-चरण-दर-चरण - यह स्पष्ट है कि आप कुछ चाहते हैं कुछ कम दिनचर्या।

इस तरह से टैगडॉक्टर वर्ग का जन्म हुआ।

बताई गई समस्या जिसे मैं हल करना चाहूंगा, वह इस प्रकार है - HTML टैग्स के निर्माण को आसान बनाने के लिए, चरण-दर-चरण से दूर जाएं और HTML पदानुक्रम के प्राकृतिक घोंसले को व्यवस्थित करें।

निर्णय

लिंक: TagDecorator

प्रारंभिक चरण में, समाधान में दो वर्ग शामिल थे, लेकिन बाद में उनमें एक और जोड़ा गया:

TagDecorator मुख्य श्रमिक वर्ग है, जो एक टैग (TagWrapper) का प्रतिनिधित्व करने वाले वर्ग में सादे पाठ को बदलने के लिए जिम्मेदार है, जिससे अतिरिक्त एक्सटेंशन संलग्न किए जा सकते हैं। मौजूदा उदाहरण में, दोनों सामान्य फ़ंक्शंस हैं AddAttribute, AddCss और निजी फ़ंक्शंस AddType, AddName, AddId - विशिष्ट विशेषताएँ बना रहे हैं।

TagWrapper एक वर्ग है जो एक टैग का प्रतिनिधित्व करता है। जब भी संभव हो पूरी तरह से टैगबर्स्ट से दूर जाने के लिए इसे बनाया गया था और इन्टेलिविज़न में नए एक्सटेंशन टैगब्यूलर वर्ग के गुणों के साथ भ्रमित नहीं थे।

टैग - रेजर व्यू में इस्तेमाल किए जाने वाले फ्रेमिंग एचटीएमएल ब्लॉक को लागू करने के लिए संभव बनाने के लिए शुरू / समाप्ति टैग को अलग करने के लिए आवश्यक वर्ग

 @using(Html.SuchExtension) { //... }. 

उदाहरण

संकेतित बटन उदाहरण में, TagDecorator का उपयोग करने के फायदे इतने स्पष्ट नहीं हैं:

 var htmlString = "button".ToTag() .AddType("button") .AddCss(new[] {"btn", "btn-success"}) .SetText("Success") .ToString(); 

लेकिन अब बूटस्ट्रैप कार्ड के उदाहरण के साथ - सब कुछ पहले से ही आंख को अधिक भाता है:

TagBuilder का उपयोग करना

 var divMain = new TagBuilder("div"); divMain.AddCssClass("card"); divMain.Attributes.Add("style", "width: 18rem;"); var img = new TagBuilder("img"); img.AddCssClass("card-img-top"); img.Attributes.Add("src", "..."); img.Attributes.Add("alt", "Card image cap"); var divBody = new TagBuilder("div"); divBody.AddCssClass("card-body"); var h = new TagBuilder("h5"); h.AddCssClass("card-title"); h.SetInnerText("Card title"); var p = new TagBuilder("p"); p.AddCssClass("card-text"); p.SetInnerText("Some quick example text to build on the card title and make up the bulk of the card's content."); var a = new TagBuilder("a"); a.Attributes.Add("href", "#"); a.AddCssClass("btn"); a.AddCssClass("btn-primary"); a.SetInnerText("Go somewhere"); divBody.InnerHtml += h.ToString(TagRenderMode.Normal); divBody.InnerHtml += p.ToString(TagRenderMode.Normal); divBody.InnerHtml += a.ToString(TagRenderMode.Normal); divMain.InnerHtml += img.ToString(TagRenderMode.Normal); divMain.InnerHtml += divBody.ToString(TagRenderMode.Normal); return divMain.ToString(TagRenderMode.Normal); 

TagDecorator के साथ संस्करण

 var htmlString = "div".ToTag() .AddCss("card") .AddAttribute("style", "width: 18rem;") .InnerHtml(new [] { "img".ToTag() .AddCss("card-img-top") .AddAttributes(new[] {new[] {"src", "..."}, new[] {"alt", "Card image cap"}}), "div".ToTag() .AddCss("card-body") .InnerHtml(new [] { "h5".ToTag().AddCss("card-title").SetText("Card title"), "p".ToTag().AddCss("card-text").SetText("Some quick example text to build on the card title and make up the bulk of the card's content."), "a".ToTag().AddCss(new[] {"btn", "btn-primary"}).AddAttribute("href", "#").SetText("Go somewhere") }) }).ToString(); 

परिणाम

विपक्ष

मुख्य रूप से मेरा मानना ​​है कि कैस्केडिंग कार्यान्वयन कभी-कभी कोड को दाईं ओर स्थानांतरित कर देता है, अक्सर डेवलपर की दृष्टि से आगे बढ़ता है, और पदानुक्रम जितना जटिल होता है, उतना ही मजबूत होता है

आकर्षण आते हैं

+ कोड की रेखा - कम हो गई। सरलतम तत्वों में, एक जटिल HTML ट्री में लगभग 1-2 पंक्तियों का लाभ होता है - यदि आप TagBuilder का उपयोग करते हैं तो सादृश्य द्वारा लगभग 1/3।

+ दृश्यता - आप स्पष्ट रूप से देख सकते हैं कि कहाँ और किस तरह के घोंसले के शिकार हैं। सब कुछ पदानुक्रमिक रूप से सहज और समझने में आसान है।

+ एक्स्टेंसिबिलिटी - कुछ विशिष्ट मामले / विशेषता की आवश्यकता है - बस एक्सटेंशन जोड़ें। एक शर्त जांच की आवश्यकता है - एक्सटेंशन जोड़ें।

संभव सुधार

सबसे पहले, मैंने इन वर्गों के आधार पर पूरी तरह से विशिष्ट टैग बनाने के बारे में सोचा था जो टूलटिप में केवल कुछ एक्सटेंशन की अनुमति देगा - उदाहरण के लिए, बटन टैग में AddReference एक्सटेंशन टूलटिप को हटा दें, लेकिन बाद में सार्वभौमिकता के लिए इन योजनाओं को छोड़ दिया। लेकिन सामान्य तौर पर - यह समाधान अब मेरी परियोजनाओं में मेरी बहुत मदद करता है।

यह भी एक NuGet पैकेज बनाने के लिए माना जाता था, लेकिन समय की कमी के लिए - सब कुछ स्थगित है।