Предисловие: предыдущие две статьи инкапсулируют некоторые базовые компоненты формы, и эта статья продолжает инкапсулировать несколько других компонентов на основе начальной загрузки. В отличие от предыдущей статьи, в этой статье есть несколько компонентов, которые требуют поддержки определенных файлов JS.
Каталог статьи серии Bootstraphelper
C# Advanced Series - Инкапсулируйте свой собственный компонент HTMlHelper шаг за шагом: Bootstraphelper
C# Advanced Series - Инкапсулируйте свой собственный компонент HTMlHelper шаг за шагом: Bootstraphelper (II)
C# Advanced Series - Инкапсулируйте свой собственный компонент HTMlHelper шаг за шагом: Bootstraphelper (3: с исходным кодом)
1. Numberboxextensions
NumberBoxExtensions - это цифровое текстовое поле, основанное на стиле начальной загрузки. Он инкапсулируется Spinner, цифровым компонентом, представленным блоггером. Те, кто не понимает компонента Spinner, могут проверить второй компонент, представленный в http://www.vevb.com/article/88490.htm.
Благодаря предыдущему введению мы знаем, что инициализация самостоятельного спиннера компонента не требует написания кода JS. Он может быть инициализирован непосредственно путем настройки атрибута данных в HTML. Это приносит большое удобство в нашу инкапсуляцию. Нам нужно только передавать часто используемые параметры инициализации в качестве параметров метода расширения, а затем превратить его в соответствующий атрибут данных в фоновом режиме и вернуть его на переднюю часть.
Без лишних слов поместите инкапсулированный исходный код на первое место.
Использование System; с использованием system.collections.generic; с использованием system.linq; с использованием system.web; с использованием system.web.mvc; имен -пространство Bootstrapextensions {public Static Class numberboxextensions {/// <summary> /// Сгенерировать цифровое текстовое поле // </summary> /// <paramy name = "html"> Метод расширения <// </remary> // <param = "html" name = "id"> id </param> /// <return> возвращает номером текстовое поле </return> public static mvchtmlString NumberTextBox (этот Bouttraphelper HTML, String Id) {return numberTextbox (html, id, null, null, null, null); } //// <summary> /// Сгенерировать цифровое текстовое поле /// </summary> /// <param name = "html"> Пример метода расширения </param> /// <param name = "id"> id </param> /// <param name = "value"> значение текстового поля </param> // <returns> returer nerveric number numberStRepStr Bootstraphelper html, идентификатор строки, значение объекта) {return numbertextbox (html, id, значение, нулевое, нулевое, ноль); } /// <summary> /// Generate a numeric text box/// </summary> /// <param name="html">Extension method instance</param> /// <param name="value">The value of the text box</param> /// <param name="min">The minimum value of self-growth</param> /// <param name="max">Maximum value</param> /// <Возврат> вернуть числовое текстовое поле </return> public static mvchtmlString NumberTextbox (этот Bouttraphelper HTML, значение объекта, int? Min, int? Max) {return numberTextbox (html, null, значение, min, max, null, null); } /// <summary> /// Generate a numeric text box/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="value">text box value</param> /// <param name="min">min self-growth</param> /// <param name="max">maximum Self-Growth </param> /// <return> return The Number Text Box </return> public static mvchtmlString NumberTextbox (этот Bootstraphelper HTML, идентификатор строки, значение объекта, int? Min, int? Max) {return numberTextbox (html, id, значение, максимум, максимум, null, null, null); } //// <summary> /// Сгенерировать число текстового поклевания /// </summary> /// <param name = "html"> экземпляр метода расширения </param> /// <param name = "id"> id </param> /// <param name = "value"> Значение текстового поля </param> //// <param = "min"> min min min min min min min min min name " name = "max"> максимальный самостоятельный </param> /// <param name = "step"> number selftth </param> /// <return> возвращает номером текстовое поле </return> public static mvChtmlString numberTextBox (этот Boutboutstraphelper html, строка идентификатор объекта, int? Min, int? max, int? Макс, шаг, нуль); } /// <summary> /// Сгенерировать текстовое поле номера /// </summary> /// <param name = "html"> Пример метода расширения </param> /// <param name = "id"> id </param> /// <param name = "value"> value текстового поля </param> ///<param = "min"> min min self name <///memum name = "param =" param = "min"> min min min min min name = "</param> // <param =" min "> min min min min min min min min min min name =" min name = "min"> min min min min min name = "</param>///name" min name = "min". SelfSgrowth </param> /// <param name = "step"> number selftth </param> /// <param name = "rule"> правило самостоятельного роста </param> /// <return> return the Number Text-Box </return> public static mvChtmlString numberTextBox (этот Boutstrapherper html, String Id, intate, int, int, int? {Tagbuilder Tag = new Tagbuilder ("div"); tag.mergeattribute ("class", "Входная группа спиннер"); tag.mergeattribute ("Trigger Data", "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 'data-step =' 2 'data-rule =' количество '> "); SB.Append ("<<input type = 'text' class = 'текстовый центр управления формой'"); if (! string.isnullorempty (id)) {sb.append ("id = '"). Append (id) .append ("' '"); } if (value! = null) {sb.append ("value = '"). Append (value.toString ()). Append ("' '"); } else {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 (step) .append ("' '"); } if (rule! = null) {sb.append ("data-rule = '"). Append (rule.tostring ()). Append ("' '"); } else {sb.append ("data-rule = 'количество'"); } 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 = 'Spinound' data-spin = 'down'> <i class = 'fa fa-caret-down'> </i> </a>"); sb.append ("</span>"); tag.innerhtml = sb.toString (); return mvchtmlstring.create (tag.tostring ()); }} public enum spinningrule {по умолчанию, валюта, количество, процент, месяц, день, час, минута, второе,}}В дополнение к идентификатору и значению, параметры, необходимые для инициализации компонента, в основном мин, максимум, шагом, правилом и т. Д., Соответствующие передачам данных компонента, максимальной передачи данных, передачи данных, правил данных и других параметров.
Использование довольно просто. Сначала обратитесь к соответствующим файлам 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', // Китайская культура}; $. });});Затем напишите HTML -код, как это
<div class = 'Date Group Date' format = "yyyy-mm-dd" data-maxdate = "2017-01-10" data-mindate = "2010-01-10"> <input Type '/> <pan> <pan> </span> </span> </div>
Кажется, что нет проблем, и сначала блоггер думал, что проблем нет. Но все пошло против моих желаний! Есть одна вещь, которую блоггер не рассматривал, то есть имена атрибутов, полученные методом Data () в jQuery, будут преобразованы в строчные. То есть, данные данных, записанный в HTML, но результат, полученный с помощью метода DATA (), становится максимальным, как показано на рисунке ниже:
Затем, когда даттимепикер инициализируется, сообщается об исключении JS. Этот метод не работает.
2. План улучшения
Поскольку вышеупомянутый метод не работает, нам нужно его улучшить. Существуют ли какие -либо параметры в методе DATA (), которые могут предотвратить его с нижним регистом? После поиска я не мог найти никаких ответов. В конце концов, не было никакого пути, блоггер планировал преобразовать его самостоятельно, поэтому код JS стал таким:
$ (function () {var DateTimedefault = {Format: 'yyyy-mm-dd', // форматирование даты, только локаль даты: 'zh-cn', // китайская культура MaxDate: '2017-01-01', // максимальная дата Mindate: '2010-01-01, // Минимальная дата. ENADEDDATES: false,}; $ .extend ({}, DateTimedefault, Data || {});Принцип состоит в том, чтобы сравнить результаты, полученные методом Data () с именем атрибута DateTiMedeFault после конверсии нижнего регистра. Если то же самое верно, атрибут данных в HTML будет перезаписан. После отладки несколько раз я в основном не нашел никаких проблем.
Написание такого кода действительно может решить наши вышеупомянутые проблемы, но наша переменная DateTimeDefault должна содержать достаточное количество параметров по умолчанию для достижения цели покрытия. Конечно, есть только несколько параметров, которые обычно изменяются в проекте, и здесь добавляются только некоторые атрибуты по умолчанию, которые нам часто нуждаются в изменении.
Хорошо, с вышеизложенным в качестве теоретической основы, наш DataTimebox будет легко инкапсулирован. Просто загрузите код.
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace BootstrapExtensions{ public static class DateTimeBoxExtensions { /// <summary> /// Generate date control/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id of text Tag Box </param> /// <return> возвращает тег HTML, который отображает дату управления </return> public static mvChtmlString dateTimebox (этот Bootstraphelper HTML, String Id) {return DateTimeBox (HTML, ID, NULL, NULL, NULL, NULL, NULL); } /// <summary> /// Generate date control/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id of text box tag</param> /// <param name="value">Default value of text box tag</param> /// <returns>Return the html tag that renders the date control</returns> public static MVCHTMLSTRING DATETIMEBOX (This Bootstraphelper HTML, идентификатор строки, значение объекта) {return DateTimeBox (HTML, ID, значение, нулевое, ноль, нулевое, ноль); } /// <summary> /// Generate date control/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id of text box label</param> /// <param name="value">Default value of text box label</param> /// <param name="format">From format for display date</param> /// <param name = "format"> <param name = "maxDate"> минимальное значение даты </param> /// <param name = "mindate"> максимальное значение даты </param> /// <return> return the html -тег, который отображает Date Control </return> public Static MvChtMling DateTimeBox (этот Boutptraphel html, string -alture, string stricats, string stricatd, string stricatd, stringdate, stringdate, stringdate, stringdate, stringdate, stringdate, stric mindate) {return dateTimebox (html, id, значение, формат, maxdate, mindate, null, null); } //// <summary> /// Сгенерировать управление датой /// </summary> /// <param name = "html"> пример метода расширения </param> /// <param name = "id"> идентификатор текстового поля label </param> /// <paramate = "Значение"> Значение по умолчанию. name = "maxDate"> минимальное значение даты </param> /// <param name = "mindate"> максимальное значение даты </param> /// <param name = "viewmode"> Режим просмотра управления датой </param> /// <param name = "showclear"> Отображение кнопки «/param> // <returns> возвращает». MVCHTMLSTRING DATETIMEBOX (этот Bouttraphelper HTML, идентификатор строки, значение объекта, формат строки, строка MaxDate, String Mindate, String ViewMode, Bool? ShowClear) {TagBuilder Tag = new TagBuilder ("div"); tag.mergeattribute ("class", "Date Group Date"); if (! String.isnullorempty (format)) {Tag.mergeatTribute ("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 ("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 ("/>"). 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 = "stylesselete"/> <script src = "~/content/bootstrap-datetimepicker/js/with-locales.js"> </script> <script src = "~/content/bootstrap-dateTimepicker/js/bootstrap-datetimepicker-helper.js"> </script>
Затем используйте его напрямую
<div> @bootstrap.dateTimebox ("StartTime", NULL, NULL, NULL, NULL, NULL) </div> <div> @bootstrap.datetimebox ("endtime", null, null, null, null, null, null) </div>Получить результаты
3. TextAreextensions
Инкапсуляция текстового поля Textarea относительно проста, потому что его структура аналогична структуре Textbox. Давайте напрямую дадим исходный код инкапсуляции.
Использование System; с использованием system.collections.generic; с использованием system.linq; с использованием system.web; с использованием system.web.mvc; пространство имен Bountstrapextensions {public Static Class TextAreextensions {/// <Summary> //////mextare Text Parame // </summary> /// <param = "html"> ПАРАМЕТА <// // /// <param = "html" name = "id"> id </param> /// <return> html Tag </returns> public static mvchtmlstring textareabox (этот Bouttraphelper html, String id) {return textareabox (html, id, null, null, null); } /// <summary> /////10 текстового поля /// </summary> /// <param name = "html"> экземпляр метода расширения </param> /// <param name = "id"> id </param> /// <param name = "value"> value </param> /// <param name = "csssclass"> style </value "> value </param> /// <param =" csssclass "> warmats> // <naturals>/// <param name =" csssclass "> warmation> // <param name =" csssclass "> static mvchtmlstring textareabox (этот Bootstraphelper html, идентификатор строки, значение объекта, строка cssclass) {return textareabox (html, id, значение, cssclass, null, null); } /// <Summary> //////11. <// </summary> /// <param name = "html"> extension method </param> /// <param = "id"> id </param> /// <param name = "value"> value </param> /// <param name = "cssclass"> style </value "> value </param> /// <param =" cssclass "> al style </param> =" name = "an name =" as Param> = "as Param> =" oM. Rows </param> /// <returns> HTML Tag </returns> public static mvchtmlString textareabox (этот Bootstraphelper HTML, идентификатор строки, значение объекта, строка cssclass, int? } /// <Summary> //////11. <// </summary> /// <param name = "html"> extension method </param> /// <param = "id"> id </param> /// <param name = "value"> value </param> /// <param name = "cssclass"> style </value "> value </param> /// <param =" cssclass "> al style </param> =" name = "an name =" as Param> = "as Param> =" oM. Rows </param> /// <param name = "cols"> количество столбцов </param> /// <return> html Tag </return> public static mvChtmlString TextAreabox (этот Bootstraphelper html, String Id, объектное значение, строка cssclass, int? Rows, int? Cols) {TagBulder Taglder = TATBREA "; tag.addcssclass ("Контроль формы"); 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", row.tostring ()); } if (cols! = null) {tag.mergeatTribute ("cols", cols.tostring ()); } return mvchtmlString.create (tag.toString ()); }}}Только несколько простых параметров и Cols поддерживаются. Если в вашем проекте есть некоторые особые потребности, такие как инициализация в богатую коробку редактирования текста, вы также можете улучшить его самостоятельно.
Как использовать
<div> @bootstrap.textareabox ("id", "", "", 3, 5) </div>Здесь есть вопрос, то есть мы пишем это напрямую, но результат:
Кажется, что наши атрибуты Cols не работают. Оказывается, до тех пор, пока ваш тег добавляется в стиле Class = 'Form-Control', он заполнит весь DIV, а решение также очень простое. Например, мы можем сделать некоторую обработку на Div:
Скопируйте код следующим образом: <div> @bootstrap.textareabox ("", "", "", 3, 5) </div>
Поскольку атрибут Cols не работают, Cols в параметрах можно считать удаленными.
4. SelectExtensions
Пришло время снова запутать выбор выбора. Почему вы говорите, что это запутано? Потому что есть много проблем, которые следует учитывать при его инкапсулировании, например:
Как обрабатывать статические значения опции? Как передать их на задний план? Это инкапсулируют исходный выбор или инкапсулирован в методы выбора и события, основанные на определенных компонентах (например, Select2)?
Позже я подумал об этом, какова цель инкапсуляции? Разве это не просто удобнее использовать? Если он запечатан слишком сильно, будет ли это удобно использовать? К счастью, он был непосредственно инкапсулирован в самый простой выбор. Блогер намерен сделать это:
Если это статическая опция, напрямую напишите нативный тег Select; Если это динамическая опция, передайте соответствующий URL на фон и создайте опцию после получения данных. Инкапсулированный код выглядит следующим образом:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace BootstrapExtensions{ public static class SelectExtensions { /// <summary> /// Return select tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">Tag id</param> /// <return> выберите Tag </return> public static mvChtmlString selectbox (этот Bouttraphelper HTML, String Id) {return SelectBox (HTML, ID, NULL, NULL, NULL, NULL, NULL); } //// <summary> /// возвращаемое выбрать тег /// </summary> /// <param name = "html"> экземпляр метода расширения </param> /// <param name = "id"> идентификатор тега </param> /// <param name = "value"> Tagcepret value </param> /// <returns> select tag </returns> public static mvchtbox. html, идентификатор строки, значение объекта) {return selectbox (html, id, value, null, null, null, null); } //// <summary> /// возвращается выберите Tag /// </summary> /// <param name = "html"> экземпляр метода расширения </param> /// <param name = "id"> идентификатор тега </param> /// <param = "value"> Tagce value </param> /// </param = "cssclass"> tag <// -nermers> raters> restracts <// nectors> returns <// nectors>/cs -nectors <// nectors>/com static mvchtmlString selectbox (этот Bouttraphelper HTML, идентификатор строки, значение объекта, строка cssclass) {return selectbox (html, id, значение, cssclass, null, null, null); } /// <summary> /// возвращаемое выбрать тег /// </summary> /// <param name = "html"> экземпляр метода расширения </param> /// <param name = "id"> идентификатор тега </param> /// <name = "value"> Tags value </param> /// <param = "cssclass"> name <// param> = param name = "param> // <//1 </param name =" cssclass "> //1 </param name =" cssclass " requesting data</param> /// <param name="url">url for requesting data</param> /// <param name="textField">Show field</param> /// <param name="valueField">Value field</param> /// <returns>select tag</returns> public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass, string URL, String TextField, String ValueField) {return SelectBox (HTML, ID, значение, CSSClass, URL, NULL, TextField, Valuefield); } /// <summary> /// Return select tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">Tag id</param> /// <param name="value">Tag selected value</param> /// <param name="cssClass">Tag style</param> /// <param name="url">Request data url</param> /// <param name="param">Requested parameters</param> /// <param name="textField">Show fields</param> /// <param name="valueField">Value fields</param> /// <param name="valueField">Value fields</param> /// <param name="valueField">Value fields</param> /// <param name="valueField"> name = "Multy"> IS Maily Choice </param> /// <return> select Tag </return> public static mvChtmlString selectbox (этот Bouttraphelper HTML, String ID, значение объекта, String cssclass, строка url, String param, String Textfield, String Valuefield, BOOL Multy) {TagBUilder Tag = new TagBuil ("Select"); tag.addcssclass ("Контроль формы"); 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 ("Value-Field", Valuefield); } if (! string.isnullorempty (textfield)) {tag.mergeatTribute ("Data-Text-Field", TextField); } if (несколько) {tag.mergeatTribute ("multy", "multy"); } return mvchtmlString.create (tag.toString ()); }}}Затем фронт-энд использует JS для инициализации, и должна быть файловая утилита JS.combobox.js:
(Function ($) {// 1. Определить метод расширения jQuery ComboBox $ .fn.combobox = function (опции, параметры) {if (typeof options == 'string') {return $ .fn.combobox.methods [опции] (this, param);} // 2. $ .fn.combox.defaults, Option.Text (Options.Place Holder); Options.onbeforeLoad.call (Target, Options.Param); ITER) {var = $ ('<ploys> </option>'); Options.onchange (target.val ()); $ .getJson (url, function (data) {jq.empty (); var option = $ ('<ploict> </option>'); option.attr ('value', '' '); option.text (' Пожалуйста, выберите '); jq.append (опция); $. item [jq.attr ('valuefield')]; }}; // 6. Список параметров по умолчанию $ .fn.combobox.defaults = {url: null, param: null, data: null, valuefield: 'value', textfield: 'text', заполнитель: 'Пожалуйста, выберите', OnbeForeLoad: function (param) {}, OnloadSuccess: function () {}, OnChange: function (value)}; // Этот пункт добавлен вновь, и метод инициализации $ (document) .ready (function () {$ ('select'). Каждый (function () {var $ combobox = $ (this); $ .fn.combobox.call ($ combobox, $ combobox.data ());})});}) (jquery);Этот файл JS поступает из предыдущей статьи Blogger //www.vevb.com/article/92595.htm
Затем фронтальный звонок
<div> @bootstrap.selectbox ("sel", null, null, "/home/getdept", null, "name", "id") </div>5. Резюме
На этом этапе первая версия нашего Bootstraphelper была в основном завершена, а основные компоненты пакета заключаются в следующем:
Конечно, всем нравится обмен исходным кодом больше всего. Адрес исходного кода
Если вы думаете, что эта статья может вам помочь, рекомендуйте ее.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.