المقدمة: تقدم المقالة السابقة بعض المعرفة الأساسية حول تغليف bootstraphelper ، ولا يزال يتم تحسين هذه المقالة. بالإشارة إلى طريقة HTMLHelper ، سيقوم هذا المدون أولاً بتغليف بعض مكونات النماذج الشائعة الاستخدام. كان هناك الكثير من النقاش في التعليقات السابقة حول أهمية تغليف bootstraphelper ، ولا أريد أن أقلق كثيرًا بشأنه. باختصار ، كل شيء له مكاسب وخسائر ، وهذا يعتمد على كيفية اختيارك. إذا كنت مهتمًا ، فيمكنك إلقاء نظرة. إذا لم تكن مهتمًا ، فيمكنك فقط قول "نكتة" من قبل المدون.
كتالوج مقالة سلسلة bootstraphelper
سلسلة C# المتقدمة - تغليف مكون HTMLHelper الخاص بها خطوة بخطوة: Bootstraphelper
سلسلة C# المتقدمة - تغليف مكون HTMLHelper الخاص بها خطوة بخطوة: Bootstraphelper (II)
C# Series Advanced Series - تغليف مكون HTMLHelper الخاص به خطوة بخطوة: BOOTSTRAPHELPER (3: مع رمز المصدر)
1. إضافة bootstraphelper عام جديد
في المقالة السابقة ، حدد المدون فقط نوعًا عاديًا من bootstraphelper لروث htmlhelper. منذ النظر في الحاجة إلى استخدام LAMADA لتحديد المكونات ، أضاف المدون نوعًا عامًا bootstraphelper. لذلك أصبح bootstraphelper هكذا.
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.linq ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ باستخدام system.web.routing ؛ namespace bootstrapextensions {public class bootstraphelper: system.web.mvc.htmlper {// <summary> حاوية. /// </summary> /// <param name = "viewContext"> viewContainer </param> /// <param name = "viewDataContainer"> viewDataContainer </param> public bootstraphelper (viewContext viewContex مثيل جديد لفئة bootstraphelper مع سياق العرض المحدد ، ViewDataContainer ، وجمع المسار. /// </summary> /// <param name = "viewContext"> عرض السياق </param> /// <param name = "viewDataContainer" Base (ViewContext ، viewDataContainer ، Routecollection) {}} /// <summary> /// يشير إلى أن عناصر التحكم في bootstrap مدعومة في طرق عرض مكتوبة بقوة. /// </summary> /// <typeparam name = "tmodel"> </typeparam> فئة عامة bootstraphelper <tmodel>: bootstraphelper {/// <summary> // class initive the enclue the enclue the enclue the the the the the the the the the the the the the the the the the time the class class class include the the the the the the the the the time the the the the the the the time. /// </summary> /// <param name = "viewContext"> عرض العرض. </param> /// <param name = "viewDataContainer"> عرض حاوية البيانات. </param> public bootstraphelper (viewContext viewContext ، iviewDataContainer): base (viewContext ، viewDataContainer) {} /// <summary> /// collize classe intex intext inclupt incluge inclupt inclupt inclugle. /// </summary> /// <param name = "viewContext"> عرض العرض. </param> /// <param name = "viewDataContainer"> عرض حاوية البيانات. </param> /// <param name = "RouteCollection"> مجموعة الطريق. </param> public bootstraphelper (viewContext viewContext ، iviewDataContainer ViewDataContainer ، Routecollection Routecollection): base (viewContext ، viewDataContainer ، Routecollection) {}}}}}}}}}}}يتم تعريف كائن bootstrap الخاص بنا أيضًا ككائن عام
public class class bootstrapwebviewpage <Tmodel>: system.web.mvc.webviewpage <Tmodel> {// variables المستخدمة في صفحة cshtml public bootstraphelper <Tmodel> bootstrap {get ؛ تعيين؛ } /// <summary> /// تهيئة bootstrap object /// </summary> تجاوز public inithelpers () {base.inithelpers () ؛ bootstrap = new Bootstraphelper <Tmodel> (viewContext ، this) ؛ } override void execute () {// رمي netimplementedException () ؛ }}معنى ذلك هو استخدام @bootstrap.textboxfor (x => x.name) في صفحة CSHTML. تم تقديم هذا لاحقًا ، دعنا نضع تنبؤًا هنا.
2. TextBoxExtensions
رمز التنفيذ الخاص بـ TextBoxExtensions.CS كما يلي:
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.linq ؛ باستخدام system.linq.endressions ؛ باستخدام system.reflection ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ باستخدام system.web.mvc.html ؛ /// باستخدام html المحدد اسم حقل المساعد والنموذج ، قم بإرجاع علامة مربع النص /// </summary> /// <param name = "html" bootstraphelper html ، اسم السلسلة) {return inputextensions.helper (html ، inputType.text ، null ، name ، null ، false ، null) ؛ } ///] type = 'text' tag </returns> public static mvchtmlstring sextbox (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة) {return inputextensions.helper (html ، inputtype.text ، id ، name ، null ، false ، null) ؛ } /// <summary> /// إرجاع علامة مربع النص باستخدام HTML Helper و NAME المحدد اسم حقل /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "name" TAG </REPSTRENTS> مربع نص MVCHTMLSTRING ثابت عام (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن) {return inputextensions.helper (html ، inputType.text ، id ، name ، value ، false ، null) ؛ } ///] name = "placeholder"> قيمة إدخال موجه Bootstrap </param> /// <retters> إرجاع إدخال نوع = 'Text' Tag </returns> public static mvchtmlstring textbox (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن ، صاحب السلسلة) if (! string.isnullorEmpty (leptholder)) {attributes.add ("placeholder" ، leacholder) ؛ } return inputextensions.helper (html ، inputType.Text ، id ، name ، value ، false ، entributes) ؛ }. name = "htmlattributes"> سمة إضافية </param> /// <retters> إرجاع type type = 'text' tag </returns> public static mvchtmlstring textbox (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن htmlattributes) BOOTSTRAPHELPER.ANONDONDOUSOBFORMOTHTMLATTRIBUTES (htmlattributes) ؛ إرجاع inputextensions.helper (html ، inputType.text ، id ، name ، value ، false ، entributes) ؛ } ///] name = "placeholder"> قيمة إدخال المطالبة لمربع النص الذي يأتي مع bootstrap </param> /// <param name = "htmlattributes"> سمات إضافية </param> /// htmlattributes) {idictionary <string ، Object> entributes = botstraphelper.anynowOndObjectToHtmLattributes (htmlattributes) ؛ if (! string.isnullorEmpty (leptholder)) {attributes.add ("placeholder" ، leacholder) ؛ } return inputextensions.helper (html ، inputType.Text ، id ، name ، value ، false ، entributes) ؛ } public static mvchtmlstring textboxfor <tmodel ، tproperty> (هذا bootstraphelper <Tmodel> html ، التعبير <func <tmodel ، tproperty >> التعبير) {var model = (tmodel) html.viewdata.model ؛ String PropertyName ؛ قيمة الكائن inputextensions.getValueByExpression <tmodel ، tproperty> (التعبير ، النموذج ، out propertyName ، القيمة الخارجية) ؛ إرجاع inputextensions.helper (html ، inputType.text ، propertyName ، propertyName ، value ، false ، null) ؛ }}}inputextensions.cs
باستخدام النظام ؛ باستخدام system.collections.generic ؛ استخدام system.linq ؛ باستخدام system.linq.endressions ؛ باستخدام system.reflection ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ مساحة الاسم bootstrapextions {/// HERPER (BOOTSTRAPHELPER HTML ، InputType inputType ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن ، bool ischeck ، idictionary <string ، Object> htmlattributes) {// تحديد اسم علامة tagbuilder tag = new tagBuilder ("المدخلات") ؛ if (htmlattributes == null) {htmlattributes = new dictionary <string ، object> () ؛ } // إضافة اسم if (! string.isnullorempty (name)) {htmlattributes.add ("name" ، name) ؛ } // إضافة معرف if (! string.isnullorempty (id)) {htmlattributes.add ("id" ، id) ؛ } // إضافة قيمة if (value! = null) {htmlattributes.add ("value" ، value.toString ()) ؛ }. // إضافة نمط افتراضي tag.addcssclass ("Form-Control") ؛ tag.mergeattributes (htmlattributes) ؛ if (inputType == inputType.radio || inputType == inputType.Checkbox) {if (iScheck) tag.mergeattribute ("checked" ، "checked") ؛ } return mvchtmlstring.create (tag.toString ()) ؛ } /// <summary> /// إرجاع علامة الراديو النموذج /// </summary> /// <param name = "html"> مثيل التمديد </param> /// <param name = "labelclass"> نمط علامة التسمية </param> /// <param name = "isCheck"> ما إذا كان تم تحديده </param> /// html ، inputType inputType ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن ، نص السلسلة ، تسمية السلسلة ، bool ischeck ، bool isdisabled ، idictionary <string ، object> htmlattributes) {// تحديد اسم علامة tagbuilder = new tagbuilder ("التسمية") ؛ if (! string.isnullorempty (labelclass)) {htmlattributes.add ("class" ، labelClass) ؛ } system.text.stringBuilder sbinput = new System.Text.StringBuilder () ؛ var strinputtype = htmlhelper.getInputTypestring (inputType) ؛ sbinput.append ("<input type = '"). append (trinputType) .Append ("' '") ؛ if (! string.isnullorempty (name)) {sbinput.append ("name = '") .Append (name) .Append ("'") ؛ } if (! string.isnullorEmpty (id)) {sbinput.append ("id = '") .Append (id) .Append ("'") ؛ } if (value! = null) {sbinput.append ("value = '") .append (value.toString ()). إلحاق ("'") ؛ } if (iScheck) {sbinput.append ("checked = 'checked'") ؛ } if (iSdisabled) {sbinput.append ("uppled") ؛ } sbinput.append (" />") ؛ if (! string.isnullorempty (text)) {sbinput.append (text) ؛ } tag.innerhtml = sbinput.toString () ؛ tag.mergeattributes (htmlattributes) ؛ return mvchtmlstring.create (tag.toString ()) ؛ } // احصل على قيمة الخاصية الحالية من خلال تعبير باطل ثابت عام getValuebyExpression <tmodel ، tproperty> (التعبير <func <tmodel ، tproperty >> التعبير ، نموذج tmodel ، out string propertyName ، قيمة الكائن) var lamadaname = (body.member هو propertyInfo)؟ body.member.name: null ؛ propertyName = lamadaname ؛ القيمة = فارغة ؛ system.reflection.propertyinfo [] lstPropertyInfo = typeof (tmodel) .getProperties (bindingflags.public | bindingflags.instance) ؛ var ofind = lstPropertyInfo.firstordefault (x => x.name == lamadaname) ؛ if (ofind! = null) {value = ofInd.getValue (model ، null) ؛ }}}}1. بالنظر إلى أن جميع مربعات نص النص المستندة إلى bootstrap في المشروع لها نمط class = "control" ، لذلك عند تغليف مربع النص ، يتم وضعه مباشرة في الملصق. بالطبع ، إذا لم يكن مشروعك بحاجة إلى استخدام هذا ، أو قمت بتخصيص نمط مربع النص ، فيمكنك أيضًا كتابة أسلوبك الخاص هنا ، بحيث لا تحتاج إلى إضافة هذه الأنماط في كل مرة تعلن فيها مربع النص.
2. طريقة textboxfor () تجمع بين استخدام Lamada لإنشاء مربعات نصية. كائن نوع bootstraphelper العام المعلن أعلاه يأتي في متناول يدي. تتم قراءة اسم السمة وقيمة السمة في Lamada من خلال الانعكاس والعوائق. يتم تعريف طريقة واحدة فقط هنا. إذا كانت هناك حاجة إلى أحمال زائدة أخرى ، فيمكنك إضافة طرق جديدة بنفسك.
3. تمت مواجهة مشكلة أخرى عند استخدامها. نظرًا لأن bootstraphelper يرث إلى نوع htmlhelper ، يمكن أيضًا استدعاء بعض أساليب تمديد htmlhelper المغطاة أصلاً في MVC مباشرة لكائن Bootstrap الخاص بنا. لذلك ، قد يتم تكرار العديد من الأحمال الزائدة ولا يمكن العثور على الحمل الزائد المقابل ، مثل:
وبهذه الطريقة ، يمكن بسهولة حدوث الأخطاء التالية:
لذلك ، منذ أن نشأت المشكلة ، نحتاج إلى إيجاد طريقة لحلها. أحد الحلول التي فكر فيها المدون هو: التعليق على مساحة الاسم حيث يكون كائن HTML في Web.config للعرض. على سبيل المثال:
وبهذه الطريقة ، يمكننا حل المشكلات المذكورة أعلاه وتشغيل التأثير التالي:
بعد التعليق على مساحة الاسم أعلاه ، لن نتمكن من استخدام أساليب التمديد ذات الصلة لمتغير HTML في صفحة CSHTML. إذا كان المساعد الخاص بك كافيًا ، فلا ينبغي أن يكون مشكلة كبيرة بدون طرق التمديد الأصلية.
3.
فيما يتعلق بمكونات الراديو ومربع الاختيار في Bootstrap ، أشار المدون إلى طريقة الكتابة في http://v3.bootcss.com/css/ وتغليفه على النحو التالي:
Radioxtensions.CS
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.linq ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ مساحة الاسم bootstrapextensions {public static class radioxtensions {/// <summary> /// return form tag /// </summary> السمة </param> /// <returns> علامة الراديو الإرجاع </returns> راديو MVCHTMLString ثابت عام (هذا bootstraphelper html ، اسم السلسلة) {return Radio (html ، null ، name ، null ، null ، null ، false ، false ، null) ؛ } ///] html ، معرف السلسلة ، اسم السلسلة) {return Radio (html ، id ، name ، null ، null ، null ، null ، false ، false ، null) ؛ } /// <summary> /// إرجاع علامة الراديو النموذج /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "id"> معرف </param> /// Radio MVCHTMLString ثابت (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، bool ischeck) {return Radio (html ، id ، name ، null ، null ، null ، ischeck ، false ، null) ؛ } /// <summary> /// إرجاع علامة الراديو النموذج /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// MVCHTMLString Radio (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن) {return Radio (html ، id ، name ، value ، null ، null ، false ، false ، null) ؛ } /// <summary> /// إرجاع نموذج الراديو علامة الراديو /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "id"> معرف </param> /// <returns> إرجاع علامة الراديو </returns> راديو MVCHTMLSTRING ثابت (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن ، نص السلسلة) {return Radio (html ، id ، name ، text ، null ، false ، false ، null) ؛ } /// <summary> /// إرجاع نموذج الراديو علامة الراديو /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "id"> معرف </param> /// name = "iScheck"> ما إذا كان تم تحديده </param> /// <returns> علامة الراديو الإرجاع </returns> راديو MVCHTMLString الثابتة العامة (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن ، نص السلسلة ، bool ischeck) } /// <summary> /// إرجاع نموذج الراديو علامة الراديو /// </summary> /// <param name = "html"> مثال على الإرشاد </param> /// <param name = "id"> معرف </param> /// name = "labelclass"> نمط علامة التسمية </param> /// <Rettreps> علامة الراديو الإرجاع </returns> راديو MVCHTMLString الثابت العام (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن ، نص السلسلة ، ملصق السلسلة) } /// <summary> /// إرجاع نموذج الراديو علامة الراديو /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "id"> معرف </param> /// name = "text"> name = "labelclass"> نمط علامة التسمية </param> /// <param name = "iScheck"> ما إذا كان يجب تحديد </param> /// الاسم ، القيمة ، النص ، labelclass ، ischeck ، false ، null) ؛ } /// <summary> /// إرجاع نموذج الراديو علامة الراديو /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "id"> معرف </param> /// name = "labelclass"> نمط التسمية </param> /// <param name = "isCheck"> هل تم تحديده </param> /// <param name = "iSdisabled"> تعطيل </param> /// bool isDisabled) {return Radio (html ، id ، name ، value ، text ، labelclass ، ischeck ، isdisabled ، null) ؛ } /// <summary> /// return to form radio tag /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "id"> معرف </param> ///<param name = "name" <param name = "labelclass"> نمط التسمية </param> /// <param name = "isCheck"> ما إذا كان </param> /// <param name = "iSdisabled"> disable </param> /// المعرف ، اسم السلسلة ، قيمة الكائن ، نص السلسلة ، سلسلة التسمية ، bool ischeck ، bool isdisabled ، الكائن oattributes) {idictionary <string ، object> htmlattributes = null ؛ if (oattributes! = null) {htmlattributes = bootstraphelper.anynowOndObjectToHtmLattributes (oattributes) ؛ } آخر {htmlattributes = new dictionary <string ، object> () ؛ } الإرجاع inputextensions.checkbox (html ، inputType.radio ، id ، name ، value ، text ، labelclass ، ischeck ، isdisabled ، htmlattributes) ؛ }}}checksextensions.cs
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.linq ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ مساحة الاسم bootstrapextensions {public static class checkextensions {/// السمة </param> /// <Rettrols> إرجاع علامة الاختيار TAG </RETRRESTS> مربع الاختيار MVCHTMLSTRING ثابت (هذا bootstraphelper html ، اسم السلسلة) {مربع المراجعة (html ، null ، null ، null ، null ، false ، false ، null) ؛ } ///] BOOTSTRAPHELPER HTML ، معرف السلسلة ، اسم السلسلة) {مربعات الإرجاع (html ، id ، name ، null ، null ، null ، false ، false ، null) ؛ } ///] TAG </REPSTRESS> مربع اختيار MVCHTMLSTRING ثابت (هذا bootstraphelper HTML ، معرف السلسلة ، اسم السلسلة ، BOOL ISCHECK) {مربعات الاختيار الإرجاع (HTML ، ID ، NULL ، NULL ، NULL ، ISCHECK ، FALSE ، NULL) ؛ } /// <summary> /// إرجاع نموذج مربع الاختيار ////</summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// مربع الاختيار MVCHTMLSTRING (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن) {مربع الاختيار الإرجاع (html ، id ، name ، value ، null ، null ، false ، false ، null) ؛ } /// <summary> /// إرجاع نموذج مربع الاختيار ////</summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <returns> علامة مربع الإرجاع </returns> مربع الاختيار MVCHTMLSTRING ثابت عام (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن ، نص السلسلة) {مربع الاختيار الإرجاع (html ، id ، name ، text ، null ، false ، false ، null) ؛ } /// <summary> /// إرجاع نموذج مربع الاختيار ////</summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "iScheck"> ما إذا كان تم تحديده </param> /// <returns> علامة مربع الاختيار الإرجاع </returns> مربع اختيار MVCHTMLSTRING ثابت (هذا bootstraphelper هذا ، معرف المعرف ، اسم السلسلة ، قيمة الكائن ، نص السلسلة ، bool ischeck) } /// <summary> /// إرجاع نموذج مربع الاختيار ////</summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "text"> name = "labelclass"> نمط علامة التسمية </param> /// <retentials> علامة مربع الإرجاع </returns> public static mvchtmlstring checkbox (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن ، نص السلسلة) } /// <summary> /// إرجاع نموذج مربع الاختيار ////</summary> /// <param name = "html"> مثال على طريقة التمديد </param> /// <param name = "labelclass"> نمط التسمية </param> /// <param name = "iScheck"> ما إذا كان للتحقق من </param> /// القيمة ، النص ، labelclass ، ischeck ، false ، null) ؛ } /// <summary> /// إرجاع نموذج مربع الاختيار ////</summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "labelclass"> نمط علامة التسمية </param> /// <param name = "iScheck"> هل تم تحديده </param> /// <param name = "iSdisabled"> disable </param> /// Bool Ischeck ، Bool Isdisabled) {مربع اختيار الإرجاع (html ، id ، الاسم ، القيمة ، النص ، labelclass ، ischeck ، isDisabled ، null) ؛ } /// <summary> /// return to form checkbox tag /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "id"> معرف </param> /// <param name = "labelclass"> نمط التسمية </param> /// <param name = "labelclass"> نمط التسمية </param> /// <param name = "iScheck"> هل تم تحديده </param> /// مربع الاختيار MVCHTMLSTRING (هذا bootstraphelper html ، معرف السلسلة ، اسم السلسلة ، قيمة الكائن ، نص السلسلة ، ملصق السلسلة ، ischeck bool ، bool isdisabled ، الكائن oattributes) {idictionary <string ، Object> htmlattributes = null ؛ if (oattributes! = null) {htmlattributes = bootstraphelper.anynowOndObjectToHtmLattributes (oattributes) ؛ } آخر {htmlattributes = new dictionary <string ، object> () ؛ } إرجاع inputextensions.checkbox (html ، inputtype.checkbox ، id ، name ، value ، text ، labelclass ، ischeck ، isdisabled ، htmlattributes) ؛ }}}يضع المدون تسمية ومربع اختيار معًا ، ويمرر نص التسمية المقابل عند الاتصال ، ويستخدمه على النحو التالي:
<div> @bootstrap.radio ("aa" ، "bb" ، "cc" ، "dd" ، null ، true ، false ، null) </viv> <viv> @bootstrap.radio ("fd" ، "cc" ، "cc" ، "ccc" ، "CC" ، "CC" ، "UK" ، "Radio-Inline" ، true ، false ، null) </div> <viv> @bootstrap.checkbox ("fd" ، "cc2" ، "cc" ، "france" ، false ، null) @bootstrap.checkbox ("erer" ، "CC2" ، "CC" ، "Italian" ، "Checkbox-Inline" ، True ، False ، Null) </viv>النتائج التي تم الحصول عليها:
4. buttonextensions
فيما يتعلق بأسلوب الزر في Bootstrap ، هناك تعليمات مفصلة على الموقع الرسمي لـ Bootstrap. على سبيل المثال ، تتضمن أنواع الأزرار الشائعة أزرارًا عادية ، وأزرار إرسال ، وأزرار إعادة تعيين ؛ أنماط الأزرار الشائعة هي أساسا على النحو التالي:
بالإضافة إلى ذلك ، يتم تصنيف حجم الزر أيضًا:
بناءً على ذلك ، قمنا بتغليف زر نوع bootstrap على النحو التالي
buttonextensions.cs
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.linq ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ مساحة الاسم bootstrapextensions {public static class buttonextensions {/// <summary> /// إرجاع عنصر زر bootstrap النص باستخدام اسم الحقل HTML المحدد. /// </summary> /// <param name = "html"> تم تمديد مثيل HTML Helper بواسطة هذه الطريقة. </param> /// <param name = "text"> النص المعروض على الزر. </param> /// <param name = "icon"> icon css class. </param> /// <returns> عنصر زر bootstrap. </rovens> زر MVCHTMLString ثابت عام (هذا bootstraphelper html ، نص السلسلة ، أيقونة السلسلة) {إرجاع زر (html ، النص ، أيقونة ، null) ؛ } /// <summary> /// إرجاع عنصر زر bootstrap النص باستخدام اسم HTML المحدد واسم حقل النموذج. /// </summary> /// <param name = "html"> تم تمديد مثيل HTML Helper بواسطة هذه الطريقة. </param> /// <param name = "text"> النص المعروض على الزر. </param> /// <param name = "icon"> icon css class. </param> /// <param name = "type"> نوع الزر. </param> /// <returns> عنصر زر bootstrap. </rovens> زر MVCHTMLSTRING الثابت العام (هذا bootstraphelper html ، نص السلسلة ، أيقونة السلسلة ، نوع buttontype) {إرجاع زر (html ، النص ، أيقونة ، اكتب ، null) ؛ } /// <summary> /// إرجاع عنصر زر bootstrap النص باستخدام اسم HTML المحدد واسم حقل النموذج. /// </summary> /// <param name = "html"> تم تمديد مثيل HTML Helper بواسطة هذه الطريقة. </param> /// <param name = "text"> النص المعروض على الزر. </param> /// <param name = "icon"> icon css class. </param> /// <param name = "htmlattributes"> كائن يحتوي على سمات HTML لتعيين العنصر. </param> /// <returns> عنصر زر bootstrap. </rovens> زر MVCHTMLSTRING الثابت العام (هذا bootstraphelper html ، نص السلسلة ، أيقونة السلسلة ، الكائن htmlattributes) {زر الإرجاع (html ، text ، icon ، buttontype.button ، htmlattributes) ؛ } /// <summary> /// إرجاع عنصر زر bootstrap النص باستخدام اسم HTML المحدد واسم حقل النموذج. /// </summary> /// <param name = "html"> تم تمديد مثيل HTML Helper بواسطة هذه الطريقة. </param> /// <param name = "text"> النص المعروض على الزر. </param> /// <param name = "icon"> icon css class. </param> /// <param name = "type"> نوع الزر. </param> /// <param name = "htmlattributes"> كائن يحتوي على سمات HTML لتعيين العنصر. </param> /// <returns> عنصر زر bootstrap. </rovens> زر MVCHTMLSTRING الثابت العام (هذا bootstraphelper html ، نص السلسلة ، أيقونة السلسلة ، نوع buttontype ، الكائن htmlattributes) {زر الإرجاع (html ، النص ، أيقونة ، اكتب ، buttonclass.default ، null) ؛ } /// <summary> /// إرجاع عنصر زر bootstrap النص باستخدام اسم HTML المحدد واسم حقل النموذج. /// </summary> /// <param name = "html"> تم تمديد مثيل HTML Helper بواسطة هذه الطريقة. </param> /// <param name = "text"> النص المعروض على الزر. </param> /// <param name = "icon"> icon css class. </param> /// <param name = "cssclass"> نمط الزر. </param> /// <returns> عنصر زر bootstrap. </rovens> زر MVCHTMLString ثابت عام (هذا bootstraphelper html ، نص السلسلة ، أيقونة السلسلة ، buttonclass cssclass) {return button (html ، text ، icon ، cssclass ، null) ؛ } /// <summary> /// إرجاع عنصر زر bootstrap النص باستخدام اسم HTML المحدد واسم حقل النموذج. /// </summary> /// <param name = "html"> تم تمديد مثيل HTML Helper بواسطة هذه الطريقة. </param> /// <param name = "text"> النص المعروض على الزر. </param> /// <param name = "icon"> icon css class. </param> /// <param name = "cssclass"> نمط الزر. </param> /// <param name = "htmlattributes"> كائن يحتوي على سمات HTML لتعيين العنصر. </param> /// <returns>A Bootstrap Button element. </returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonClass cssClass, object htmlAttributes) { return Button(html, text, icon, ButtonType.Button, cssClass, null); } /// <summary> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">The HTML helper instance extended by this method. </param> /// <param name="text">Text displayed on the button. </param> /// <param name="icon">icon css class. </param> /// <param name="type">button type. </param> /// <param name="cssClass">Button style. </param> /// <returns>A Bootstrap Button element. </returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type, ButtonClass cssClass) { return Button(html, text, icon, type, cssClass, null); } /// <summary> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">Extension method instance. </param> /// <param name="text">Text displayed on the button. </param> /// <param name="icon">icon css class. </param> /// <param name="type">button type. </param> /// <param name="cssClass">Button style. </param> /// <param name="htmlAttributes"> An object containing the HTML attributes to set for the element. </param> /// <returns>A Bootstrap Button element. </returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type, ButtonClass cssClass, object htmlAttributes, ButtonSize size = ButtonSize.nm) { TagBuilder tag = new TagBuilder("button"); IDictionary<string, object> attributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(htmlAttributes); attributes.Add("type", type.ToString().ToLower()); tag.AddCssClass("btn btn-" + cssClass.ToString().ToLower()); tag.MergeAttributes(attributes); TagBuilder span = new TagBuilder("span"); span.AddCssClass(icon.Substring(0, icon.IndexOf('-')) + " " + icon); if (size != ButtonSize.nm) { tag.AddCssClass("btn-" + size.ToString()); } span.Attributes.Add("aria-hidden", "true"); tag.InnerHtml = span.ToString() + text; return MvcHtmlString.Create(tag.ToString()); } } /// <summary> /// bootstrap button style/// </summary> public enum ButtonClass { /// <summary> /// // // </summary> Default, /// <summary> /// // // </summary> Primary, /// <summary> /// // // </summary> Success, /// <summary> /// /// </summary> Info, /// <summary> /// /// </summary> Warning, /// <summary> /// /// </summary> Danger, /// <summary> /// // // </summary> Link } /// <summary> /// bootstrap button type//// </summary> public enum ButtonType { /// <summary> /// Normal button/// </summary> Button, /// <summary> /// Submit button/// </summary> Submit, /// <summary> /// Reset button/// </summary> Reset } public enum ButtonSize { lg, nm, sm, xs }}1、将按钮的类型、样式、大小定义成了枚举类型，这样使用起来更加方便；
2、生成按钮必须的参数有text和icon，保证按钮的基本构成。
3、使用
<div>@Bootstrap.Button("测试按钮", "glyphicon-ok",ButtonClass.Primary)@Bootstrap.Button("提交", "glyphicon-ok", ButtonType.Submit, ButtonClass.Success, null, ButtonSize.lg) </div>五、总结
以上封装了几个常用的表单组件，还剩下几个留在下篇吧。上文只是一个初始版本，很多地方可能并不完善，如果有什么不当或者可以优化的地方，还望斧正。
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.