تتالي علامات HTML باستخدام C #

في العملية التالية لكتابة تطبيق ويب لـ ASP.NET MVC باستخدام Bootstrap ، أدركت نفسي أفكر في أنه يمكن طرح إنشاء علامات HTML الحتمية. لا يتعلق الأمر بمجموعة من عناصر تحكم المستخدم لتوسيع Html. * Space ، ولكن حول ما يكمن أبعد قليلاً. على عجل ، أقترح عليك أن تنظر هنا (جيثب) ، وبالنسبة للبقية ، مرحبا بك في القط.

التحدي

هناك علامة HTML تحتوي على الاسم والفئات والأنماط والسمات وما إلى ذلك. في .NET ، من أجل الإنشاء "اليدوي" لهذا الجمال ، يُفترض استخدام فئة TagBuilder وملئها تدريجيًا بالبيانات الوصفية والبيانات العادلة.

لكن!

بدا لي الاستخدام المنتظم لهذه الفئة كئيبًا جدًا. ثابت * .AddCssClass و * .Attributes.Add و * .MergeAttribute و * .ToString (TagRenderMode.SelfClosing) - في مرحلة ما يبدأ في إزعاجهم خطوة بخطوة.

في ما يلي مثال على شكل عنصر زر قياسي:

<!-- 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 مع معلمة مطلوبة ، ويجب إنشاء كل منها بنفس الطريقة - خطوة بخطوة طويلة الأبعاد - يصبح من الواضح أنك تريد شيئًا شيء أقل روتينية.

هذه هي الطريقة التي ولدت بها فئة TagDecorator .

إن المشكلة المعلنة التي أود حلها هي كما يلي - لتبسيط إنشاء علامات HTML ، والابتعاد عن الخطوة خطوة وتنظيم التداخل الطبيعي لتسلسل HTML.

الحل

الرابط: TagDecorator

في المرحلة الأولية ، كان الحل يتكون من فئتين ، ولكن تم إضافة فئة أخرى إليهما بعد ذلك:

TagDecorator هي الطبقة العاملة الرئيسية ، وهي المسؤولة عن تحويل النص العادي إلى فئة تمثل علامة (TagWrapper) ، والتي يمكن إرفاق ملحقات إضافية بها. في المثال الموجود ، هناك وظائف عامة AddAttribute و AddCss ووظائف خاصة AddType و AddName و AddId - إنشاء سمات محددة.

TagWrapper هي فئة تمثل علامة. تم إنشاؤه للابتعاد تمامًا عن TagBuilder كلما أمكن ذلك ، ولم يتم الخلط بين الامتدادات الجديدة في IntelliSense مع خصائص فئة TagBuilder.

العلامات - يحتاج الفصل إلى فصل علامات البداية / النهاية ليصبح من الممكن تنفيذ كتل HTML المؤطرة المستخدمة في RazorView

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

أمثلة

في مثال الزر المشار إليه ، مزايا استخدام TagDecorator ليست واضحة جدًا:

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

ولكن الآن مع مثال بطاقة Bootstrap - أصبح كل شيء أكثر إرضاء للعين بالفعل:

باستخدام 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(); 

النتائج

سلبيات

الأمر الرئيسي الذي أعتقد أنه هو أن التنفيذ المتتالي أحيانًا ينقل الشفرة إلى اليمين ، وغالبًا ما يتجاوز رؤية المطور ، وكلما كان التسلسل الهرمي أكثر تعقيدًا ، كلما كان أقوى

الايجابيات

+ سطر من الرموز - مخفض. في أبسط العناصر ، هناك مكسب حوالي 1-2 سطر في شجرة HTML معقدة - حوالي 1/3 عن طريق القياس إذا كنت تستخدم TagBuilder.

+ الرؤية - يمكنك أن ترى بوضوح أين ونوع التعشيش. كل شيء بديهي ويسهل فهمه.

+ القابلية للتوسعة - هناك حاجة إلى حالة / سمة معينة - فقط قم بإضافة ملحق. يلزم التحقق من الحالة - إضافة ملحق.

التحسينات الممكنة

في البداية ، فكرت في إنشاء علامات متخصصة تمامًا استنادًا إلى هذه الفئات التي ستسمح فقط بتمديدات معينة في تلميح الأداة - على سبيل المثال ، قم بإزالة تلميح ملحق AddReference في علامة الزر ، ولكن بعد ذلك تخلت عن هذه الخطط من أجل العالمية. ولكن بشكل عام - هذا الحل يساعدني كثيرًا في مشاريعي.

كان من المفترض أيضًا إنشاء حزمة NuGet ، ولكن لضيق الوقت - تم تأجيل كل شيء.