المقدمة: تتغلف المادتان السابقتان لبعض مكونات النماذج الأساسية ، وتستمر هذه المقالة في تغليف العديد من المكونات الأخرى على أساس bootstrap. على عكس المقال السابق ، هناك العديد من المكونات في هذه المقالة التي تتطلب دعمًا لبعض ملفات JS.
كتالوج مقالة سلسلة bootstraphelper
سلسلة C# المتقدمة - تغليف مكون HTMLHelper الخاص بها خطوة بخطوة: Bootstraphelper
سلسلة C# المتقدمة - تغليف مكون HTMLHelper الخاص بها خطوة بخطوة: Bootstraphelper (II)
C# Series Advanced Series - تغليف مكون HTMLHelper الخاص به خطوة بخطوة: BOOTSTRAPHELPER (3: مع رمز المصدر)
1. NumberBoxExtensions
NumberBoxExtensions هو مربع نص رقمي يعتمد على نمط bootstrap. يتم تغليفه بواسطة Spinner ، وهو مكون رقمي ذاتي المدونين الذي قدمه المدون. يمكن لأولئك الذين لا يفهمون مكون الدوار الاطلاع على المكون الثاني الذي تم تقديمه في http://www.vevb.com/article/88490.htm.
من خلال المقدمة السابقة ، نعلم أن تهيئة مكون المكون الذاتي لا يتطلب كتابة أي رمز JS. يمكن تهيئتها مباشرة عن طريق تكوين سمة البيانات في HTML. هذا يجلب الراحة الكبيرة لتغليفنا. نحتاج فقط إلى تمرير معلمات التهيئة شائعة الاستخدام كمعلمات لطريقة التمديد ، ثم تحويلها إلى سمة البيانات المقابلة في الخلفية وإعادتها إلى الواجهة الأمامية.
بدون مزيد من اللغط ، ضع رمز المصدر المغطى أولاً.
باستخدام النظام ؛ باستخدام system.collections.generic ؛ استخدام system.linq ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ مساحة الاسم bootstrapextensions {public static class numboxextensions {/// <summary> /// إنشاء مربع نص رقم // name = "id"> معرف </param> /// <returns> إرجاع مربع نص الرقم </returns> public mvchtmlstring numbertebox (هذا bootstraphelper html ، string id) {return numbertextbox (html ، id ، null ، null ، null ، null) ؛ } /// <summary> /// إنشاء مربع نص رقمي /// </summary> /// <param name = "html"> طريقة التمديد مثال </param> /// <param name = "id" BOOTSTRAPHELPER HTML ، معرف السلسلة ، قيمة الكائن) {numbertextbox الإرجاع (html ، id ، value ، null ، null ، null) ؛ } /// <summary> /// إنشاء مربع نص رقمي /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "value"> قيمة مربع النص </param> /// <param name = "min" <returns> إرجاع مربع النص الرقمي </returns> public mvchtmlstring numbertextbox (هذا bootstraphelper html ، قيمة الكائن ، int؟ min ، int؟ max) {return numbertextbox (html ، null ، value ، min ، max ، null ، null) ؛ } /// <summary> /// إنشاء مربع نص رقمي /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "id" النمو الذاتي </param> /// <retentions> إرجاع مربع نص الرقم </returns> public static mvchtmlstring numberbox (هذا bootstraphelper html ، string id ، قيمة الكائن ، int؟ min ، int؟ max) } /// <summary> /// إنشاء مربع نص رقم /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "id" name = "max"> الحد الأقصى للنمو الذاتي </param> /// <param name = "step"> النمو الذاتي </param> /// مين ، ماكس ، خطوة ، فارغة) ؛ } /// <summary> /// إنشاء مربع نص الرقم /// </summary> /// <param name = "html"> مثال على طريقة التمديد </param> /// <param name = "id" name = "max"> القيمة القصوى للنمو الذاتي </param> /// <param name = "step"> عدد النمو الذاتي </param> /// <param name = "step" BootStraphelper HTML ، معرف الكائن ، int؟ tag.mergeattribute ("class" ، "input-group spinner") ؛ tag.mergeattribute ("data-trigger" ، "spinner") ؛ System.Text.StringBuilder SB = new System.Text.StringBuilder () ؛ //sb.append("<input type = 'text' class = 'form-control text-center' value = '1' 'data-min ='-10 'data-max = '10' -step = '2' data-rule = 'Quantity> ") ؛ sb.append ("<input type = 'text' class = 'form-control text-cener'") ؛ if (! string.isnullorempty (id)) {sb.append ("id = '"). append (id) .Append ("'") ؛ } if (value! = null) {sb.append ("value = '"). append (value.toString ()). append ("'") ؛ } آخر {sb.append ("value = '1'") ؛ } if (min! = null) {sb.append ("data-min = '"). append (min) .Append ("'") ؛ } if (max! = null) {sb.append ("data-max = '"). append (max) .Append ("'") ؛ } if (step! = null) {sb.append ("data-step = '"). append (الخطوة) .append ("'") ؛ } if (rule! = null) {sb.append ("data-rule = '"). append (rule.toString ()). إلحاق ("'") ؛ } آخر {sb.append ("data-rule = 'Quantity'") ؛ } sb.append ("/>") ؛ sb.append ("<span class = 'input-group-addon'>") ؛ sb.append ("<a href = 'javaScript ؛؛' class = 'spin-up' data-spin = 'up'> <i class = 'fa fa-caret up'> </i> </a>") ؛ sb.append ("<a href = 'javaScript: ؛' class = 'spin-down' data-spin = 'down'> <i class = 'fa fa-caret-down'> </i> </a>") ؛ sb.append ("</span>") ؛ tag.innerhtml = sb.toString () ؛ return mvchtmlstring.create (tag.toString ()) ؛ }} التعداد العام spinningrule {الافتراضيات ، العملة ، الكمية ، النسبة المئوية ، الشهر ، اليوم ، ساعة ، دقيقة ، ثانية ،}}بالإضافة إلى المعرف والقيمة ، فإن المعلمات المطلوبة لتهيئة المكون هي أساسًا Min و Max و Step و Rule ، وما إلى ذلك ، المقابلة لبيانات البيانات ، وبيانات--خطوة البيانات ، وقاعدة البيانات وغيرها من المعلمات.
الاستخدام بسيط للغاية. أولاً ، ارجع إلى ملفات JS و CSS ذات الصلة على الصفحة المقابلة ، ثم نسميها مثل هذا في CSHTML:
انسخ الرمز كما يلي: @bootstrap.numbertextbox (null ، "1" ، 1 ، 10 ، 2 ، null)
احصل على النتيجة:
هذا أكثر ملاءمة من نسخ قطعة كبيرة من رمز HTML في كل مرة. هل تشعر بقليل من التحرك؟
2. DateTimeBoxExtensions
مع المكونات الرقمية أعلاه كأساس ، فإن الخطوة التالية هي تغليف مكونات الوقت. يخطط المدون أيضًا لاستخدام سمة البيانات لتهيئتها ، ولكن بعد البحث لفترة طويلة ، لا توجد طريقة لتهيئة سمة البيانات في DatatimePicker. لا توجد طريقة ، لذلك سيقوم المدون بتهيئة سمة البيانات بنفسه فقط.
1. الخطة الأولية
دعنا ننشئ ملفًا جديدًا: bootstrap-datetimepicker-helper.js. الرمز في الداخل كما يلي
$ (function () {var datetimedefault = {locale: 'zh-cn' ، // internal culture} ؛ $ .each ($ (". date") ، function (index ، item) {var data = $ (item) .data () ؛ var param = $ .extend ({} ، dateTimedEfault ، data || }) ؛}) ؛ثم اكتب رمز HTML مثل هذا
<div class = 'date-group date' 'data-format = "yyyy-mm-dd" data-maxdate = "2017-01-10" mindate = "2010-01-10"> <input
يبدو أنه لا توجد مشكلة ، وفي البداية اعتقد المدون أنه لا توجد مشكلة. لكن الأمور سارت ضد تمنياتي! هناك شيء واحد لم يفكر فيه المدون ، أي أن أسماء السمات التي تم الحصول عليها بواسطة طريقة البيانات () في jQuery سيتم تحويلها إلى أحرف صغيرة. بمعنى أن معايير البيانات المكتوبة في HTML ، ولكن النتيجة التي تم الحصول عليها من خلال طريقة البيانات () تصبح الحد الأقصى ، كما هو موضح في الشكل أدناه:
ثم ، عند تهيئة DateTimePicker ، يتم الإبلاغ عن استثناء JS. هذه الطريقة لا تعمل.
2. خطة التحسين
نظرًا لأن الطريقة أعلاه لا تعمل ، نحتاج إلى تحسينها. هل هناك أي معلمات في طريقة البيانات () التي يمكن أن تمنعها من أن تكون صغيرة؟ بعد البحث حولها ، لم أتمكن من العثور على أي إجابات. في النهاية ، لم يكن هناك أي طريقة ، خطط المدون لتحويله بمفرده ، لذلك أصبح رمز JS مثل هذا:
$ (function () {var datetimedefault = {format: 'yyyy-mm-dd' ، // date tonmatting ، فقط لغة التاريخ: 'Zh-cn' ، // culture culture maxdate: '2017-01-01' ، // maint mindate: "2010-01-01 ' EnupplyDates: false ،} ؛ $ .extend ({} ، datetimedefault ، data || {}) ؛المبدأ هو مقارنة النتائج التي تم الحصول عليها بواسطة طريقة البيانات () مع اسم سمة DateTimEdefault بعد التحويل الصغير. إذا كان الشيء نفسه صحيحًا ، فسيتم كتابة سمة البيانات في HTML. بعد تصحيح الأخطاء عدة مرات ، لم أجد أي مشاكل بشكل أساسي.
يمكن أن تحل كتابة الكود مثل هذا بالفعل مشكلاتنا المذكورة أعلاه ، ولكن يحتاج متغير DateTimEdefault الخاص بنا إلى احتواء معلمات افتراضية كافية لتحقيق الغرض من التغطية. بالطبع ، لا يوجد سوى عدد قليل من المعلمات التي يتم تعديلها بشكل عام في المشروع ، وبعض فقط من السمات الافتراضية التي نحتاج غالبًا إلى تغييرها هنا.
حسنًا ، مع ما سبق كأساس نظري ، سيتم تغليف DatatimeBox الخاص بنا بسهولة. فقط قم بتحميل الكود.
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.linq ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ مساحة الاسم bootstrapextensions {public static class dateTimeBoxExtensions {/// <summary> علامة المربع </param> /// <returns> إرجاع علامة HTML التي تجعل التحكم في التاريخ </returns> public static mvchtmlstring dateTimeBox (هذا bootstraphelper html ، string id) } /// <summary> /// إنشاء التحكم في التاريخ /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// MVCHTMLString DateTimeBox (هذا bootstraphelper html ، معرف السلسلة ، قيمة الكائن) {return dateTimeBox (html ، id ، value ، null ، null ، null ، null) ؛ } /// <summary> /// إنشاء التحكم في التاريخ /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// <param name = "id" name = "format"> <param name = "maxDate"> الحد الأدنى لقيمة التاريخ </param> /// <param name = "mindate" String Mindate) {return dateTimeBox (html ، id ، value ، التنسيق ، maxdate ، mindate ، null ، null) ؛ } ///] name = "maxDate"> الحد الأدنى لقيمة التاريخ </param> /// <param name = "mindate"> الحد الأقصى لقيمة التاريخ </param> /// <param name = "viewmode"> تصفح وضع التحكم في التاريخ </param> // <param name = "showclear"> MVCHTMLSTRING DATETIMEBOX (هذا bootstraphelper html ، معرف السلسلة ، قيمة الكائن ، تنسيق السلسلة ، سلسلة maxdate ، mindate سلسلة ، string viewmode ، bool؟ showclear) {tagBuilder tag = new tagbuilder ("div") ؛ tag.mergeattribute ("class" ، "Date-Group Date") ؛ if (! string.isnullorEmpty (format)) {tag.merGeAttribute ("data-format" ، format) ؛ } if (! string.isnullorEmpty (maxDate)) {tag.merGeAttribute ("data-maxdate" ، maxDate) ؛ } if (! string.isnullorEmpty (mindate)) {tag.merGeAttribute ("data-mindate" ، mindate) ؛ } if (! string.isnullorEmpty (viewMode)) {tag.merGeAttribute ("data-viewmode" ، viewMode) ؛ } if (showclear! = null) {tag.mergeAttribute ("data-showclear" ، showclear.toString ()) ؛ } System.Text.StringBuilder SB = new System.Text.StringBuilder () ؛ sb.append ("<input type = 'text' class = 'form-control'") ؛ if (! string.isnullorempty (id)) {sb.append ("id = '"). append (id) .Append ("'") ؛ } if (value! = null) {sb.append ("value = '"). append (value.toString ()). append ("'") ؛ } sb.append ("/>"). إلحاق ("<span class = 'input-group-addon'>") .append ("<span class = 'glyphicon glyphicon-calendar'> </span>") .Append ("</span>") ؛ tag.innerhtml = sb.toString () ؛ return mvchtmlstring.create (tag.toString ()) ؛ }}}ثم تحتاج صفحة CSHTML الخاصة بنا فقط إلى الرجوع إلى JS و CSS
<link href = "~/content/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel = "stylesheet src = "~/content/bootstrap-datetimepicker/js/bootstrap-datetimepicker-helper.js"> </script>
ثم استخدمه مباشرة
<div> @bootstrap.dateTimeBox ("starttime" ، null ، null ، null ، null ، null) </viv> <viv> @bootstrap.datetimebox ("Endtime" ، null ، null ، null ، null ، null ، null) </div>الحصول على النتائج
3. TextAreextensions
يعد تغليف حقل نص Textarea بسيطًا نسبيًا ، لأن بنيته يشبه بنية TextBox. دعونا نعطي مباشرة رمز مصدر التغليف.
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.linq ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ مساحة الاسم bootstrapextensions {public static class textareextensions {/// <summary> /// text text field /// </summary> name = "id"> معرف </param> /// <returns> علامة html </returns> public static mvchtmlstring textareabox (هذا bootstraphelper html ، string id) {return textareabox (html ، id ، null ، null ، null ، null ، null ، null) ؛ } /// <summary> /// textarea text field /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// MVCHTMLSTRING TEXTAREABOX (هذا bootstraphelper html ، معرف السلسلة ، قيمة الكائن ، السلسلة cssclass) {return textareabox (html ، id ، value ، cssclass ، null ، null) ؛ } /// <summary> /// textarea text field /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// /// <returns> html tag </ropressings> public static mvchtmlstring textareabox (هذا bootstraphelper html ، معرف السلسلة ، قيمة الكائن ، سلسلة cssclass ، int؟ rows) } /// <summary> /// textarea text field /// </summary> /// <param name = "html"> مثيل طريقة التمديد </param> /// ] TAG.ADDCSSCLASS ("Form-Control") ؛ if (! string.isnullorEmpty (id)) {tag.merGeAttribute ("id" ، id) ؛ } if (value! = null) {tag.merGeAttribute ("value" ، value.toString ()) ؛ } if (! string.isnullorempty (cssclass)) {tag.addcssclass (cssclass) ؛ } if (rows! = null) {tag.merGeatTribute ("rows" ، rows.toString ()) ؛ } if (cols! = null) {tag.mergeAttribute ("cols" ، cols.toString ()) ؛ } return mvchtmlstring.create (tag.toString ()) ؛ }}}يتم دعم عدد قليل من أبسط صفوف المعلمات والكولز. إذا كان لمشروعك بعض الاحتياجات الخاصة ، مثل التهيئة إلى مربع تحرير نص غني ، يمكنك أيضًا تحسينه بنفسك.
كيفية استخدام
<viv> @bootstrap.textareabox ("id" ، "" ، "" ، 3 ، 5) </viv>هناك سؤال يذكر هنا ، أي أن نكتبه مباشرة ، لكن النتيجة هي:
يبدو أن سمة كولزنا لا تعمل. اتضح أنه طالما تتم إضافة العلامة الخاصة بك بأسلوب Class = '-Control' ، فسيتم ملء Div بأكمله ، كما أن الحل بسيط للغاية. على سبيل المثال ، يمكننا القيام ببعض المعالجة على div:
انسخ الرمز كما يلي: <div> @bootstrap.textareabox ("" ، "" ، "" ، 3 ، 5) </div>
نظرًا لأن سمة Cols لا تعمل ، يمكن اعتبار Cols في المعلمات.
4
حان الوقت إلى مربع SELECT SELED TANGLET مرة أخرى. لماذا تقول أنها متشابكة؟ لأن هناك العديد من المشكلات التي يجب مراعاتها عند تغليفه ، مثل:
كيف تتعامل مع قيم الخيار الثابتة؟ كيف تمريرهم إلى الخلفية؟ هل تم تغليفه الأصلي المحدد أو المغلف في طرق وأحداث محددة بناءً على مكونات معينة (مثل Select2)؟
في وقت لاحق ، فكرت في الأمر ، ما هو الغرض من التغليف؟ أليس فقط أكثر ملاءمة للاستخدام؟ إذا كانت مختومة بشدة ، فهل سيكون من المناسب استخدامه؟ لحسن الحظ ، تم تغليفه مباشرة إلى أبسط اختيار. يعتزم المدون القيام بذلك:
إذا كان خيارًا ثابتًا ، فاكتب مباشرة علامة SELECT الأصلية ؛ إذا كان خيارًا ديناميكيًا ، فمرر عنوان URL المقابل إلى الخلفية ، وقم بإنشاء الخيار بعد الحصول على البيانات. الرمز المغلف كما يلي:
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.linq ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ مساحة الاسم bootstrapextensions {selectensions selectensions public static {/// /// <returns> حدد العلامة </returns> selectbox public static mvchtmlstring (هذا bootstraphelper html ، string id) {return selectbox (html ، id ، null ، null ، null ، null ، null) ؛ } /// <summary> /// إرجاع حدد علامة /// </summary> /// <param name = "html" html ، معرف السلسلة ، قيمة الكائن) {return selectbox (html ، id ، value ، null ، null ، null ، null) ؛ } /// <summary> /// إرجاع حدد علامة /// </summary> /// <param name = "html" MVCHTMLString SelectBox (هذا bootstraphelper html ، معرف السلسلة ، قيمة الكائن ، السلسلة cssclass) {return selectbox (html ، id ، value ، cssclass ، null ، null ، null) ؛ } /// <summary> /// إرجاع حدد علامة /// </summary> /// <param name = "html" البيانات </param> /// <param name = "url"> url لطلب البيانات </param> /// <param name = "textfield"> إظهار الحقل </param> /// <param name = "valuefield" url ، string textfield ، string valuefield) {return selectbox (html ، id ، value ، cssclass ، url ، null ، textfield ، valuefield) ؛ } ///] url </param> /// <param name = "param"> المعلمات المطلوبة </param> /// <param name = "textfield"> إظهار الحقول </param> /// name = "multible"> هو الاختيار من متعدد </param> /// <returns> حدد العلامة </returns> public static mvchtmlstring selectbox (هذا bootstraphelper html ، معرف السلسلة ، قيمة الكائن ، السلسلة cssclass ، url url ، string param ، سلسلة سلسلة ، TAG.ADDCSSCLASS ("Form-Control") ؛ if (! string.isnullorEmpty (id)) {tag.merGeAttribute ("id" ، id) ؛ } if (value! = null) {tag.merGeAttribute ("value" ، value.toString ()) ؛ } if (! string.isnullorempty (cssclass)) {tag.addcssclass (cssclass) ؛ } if (! string.isnullorempty (url)) {tag.mergeAttribute ("data-url" ، url) ؛ } if (! string.isnullorEmpty (param)) {tag.merGeAttribute ("data-param" ، param) ؛ } if (! string.isnullorEmpty (param)) {tag.merGeAttribute ("data-param" ، param) ؛ } if (! string.isnullorempty (valuefield)) {tag.mergeAttribute ("حقل قيمة البيانات" ، valuefield) ؛ } if (! string.isnullorempty (textfield)) {tag.mergeAttribute ("data-text-field" ، textfield) ؛ } if (multip) {tag.mergeAttribute ("mostle" ، "multip") ؛ } return mvchtmlstring.create (tag.toString ()) ؛ }}}ثم يستخدم الواجهة الأمامية JS للتهيئة ، ويجب أن يكون هناك ملف js
(الدالة ($) {// 1. تحديد طريقة تمديد jQuery comboBox $ .fn.combobox = function (الخيارات ، param) {if (typeof ortions == 'string') {return $ .fn.combobox.methods [Options] (this ، param) ؛ $. ottrom.text. Options.onbeforeLoad. (I ، Option) (Options.Oncles Options). url) {$ .getjson (url ، function (data) {jq.empty () ؛ var ortive = $ ('<spoint> </potion>') ؛ Option.Attr ('value' ، '') ؛ Option.text ('flease select') ؛ jq.append (report) jq.attr ('valuefield')) ؛ }} ؛ // 6. قائمة المعلمة الافتراضية $ .fn.combobox.defaults = {url: null ، param: null ، data: null ، valuefield: 'value' ، textfield: 'text' ، placeholder: 'free select' ، onbeforeload: function (param) {} ، onloadsucess: function () {} ، onchange: // تتم إضافة هذه الفقرة حديثًا ، وطريقة التهيئة $ (document) .Ready (function () {$ ('select'). كل (function () {var $ combobox = $ (this) ؛ $ .fn.combobox.call ($ comboBox ، $ combobox.data ()) ؛})}) ؛}) (jquery) ؛يأتي ملف JS هذا من مقالة سابقة من قبل المدون //www.vevb.com/article/92595.htm
ثم المكالمة الأمامية
<viv> @bootstrap.selectbox ("sel" ، null ، null ، "/home/getDept" ، null ، "name" ، "id") </div>5. ملخص
في هذه المرحلة ، تم الانتهاء من الإصدار الأول من Bootstraphelper بشكل أساسي ، ومكونات الحزمة الرئيسية هي كما يلي:
بالطبع ، يحب الجميع رمز المصدر الذي يشارك أكثر. عنوان رمز المصدر
إذا كنت تعتقد أن هذه المقالة يمكن أن تساعدك ، فيرجى التوصية بها.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.