Създаване на ваша собствена контрола CheckBoxList
Нека създадем празен проект ASP .NET MVC 3 и добавим контролерDemoControllerкъм него с методаIndexи изглед:
След като са направени минималните подготовки, преминаваме директно към контролния елемент.
Добавяне на елемент CheckBoxList
Добавете папкатаCoreкъм корена на проекта с файлаControls.csистатичниякласControls, който ще съдържа внедряването на нашия CheckBoxList.
В момента встатичниякласКонтроливече можем да създаваме наши собствени реализации на Html помощници, така че нека добавим необходимото количество код за това:
И нека се опитаме да го наречем в нашия изгледИндекс, контролерDemoController.
Забележка: Умишлено не пиша за включване на асембли и файлове с обхват в текста на статията, т.к. Надявам се, че ще можете да го направите и без моите споменавания. Единственото нещо, което си струва да се отбележи, е добавянето на ред към файла /Views/web.config, където MVC3Controls_H.Core е местоположението на вашия статичен клас с CheckBoxList.
За да извикате нашия елемент, добавете следния ред къмIndex.cshtml(ако сте посочили Razor Engine при добавяне на новия изглед):
и укажете във файлаGlobal.asax, който се намира в основата на проекта, че по подразбиране се изисква да се извика контролерътDemo, методътIndex:
Ако всички действия са извършени правилно, ще видите страница със следното съдържание:
Страхотен. Сега преминаваме към внедряването на структурата на нашия CheckBoxList'a.
Реализации на структурата CheckBoxList
Първо, нека добавим настройките му за показване към файлаControls.cs. В нашатаслучай, това ще бъдат 3 обекта от типenum:
И класътCheckBoxList_Settings, в който ще ги предадем в извикването на нашия контрол:
Като настройки по подразбиране ще изберем рамката-таблица, посоката на изхода-хоризонтално и дисплеят с пет колони. Свойствотоcbl_Nameще бъде обсъдено по-късно. Променете конструктора на нашия CheckBoxList, за да приема колекция от тип IDictionary и екземпляр на класа за настройки:
Стигнахме до извода, че в изгледа сега трябва не само да извикаме нашия елемент, но и да му предадем 2 параметъра, за това ще добавим колекция от данни към методаIndexна нашия контролер:
И предоставете нашето виждане с тези данни като модел:
В кода на нашия изглед ние посочваме, че моделът за него е типът данни на речника и извикваме нашия CheckBoxList:
Стартираме проекта и виждаме същия запис, познат ни:
Анализ на текущата структура на приложението
Добавяне на модел на изглед
Тъй като нашият модел на изглед служи не само за предаване на данни в него, но и за получаването им, ще трябва да добавим масив от избрани елементи в допълнение към прехвърлената колекция. Добавете папкаViewModelsкъм папкаModels, след което добавете файлаViewModel_Index.csкъмViewModels, както е показано по-долу:
и кода на нашия изглед на модела:
МетодътIndexна нашияDemoController'a ще се промени, за да изглежда така:
Тъй като променихме предавания модел в контролера, трябва да направим същото и в изгледа, свързан с него:
По този начин, ако трябва да предадете нещо друго на страницата в допълнение към събирането на данни за нашия контрол, можете да го направите,просто чрез промяна на модела на изглед/Models/ViewModels/ViewModels_Index.cs(добавяне на нови свойства към него) и добавяне на тяхната инициализация в метода на контролера.
Капсулиране на повикване към нашия CheckBoxList
В първата си статия вече използвах подобна схема за извикване на метод за разширение, но за малко по-различни цели. В текущия проект, за да направим извикването на нашия CheckBoxList'a в частичен изглед, ще добавим папкатаPartialкъм папката/Views, папкатаControlsкъм нея и новия частичен изгледCheckBoxList.cshtmlкъм папкатаControls:
Сега структурата на нашето приложение изглежда така:
Променяме нашияИндексизглед, като извикваме нашия частичен изглед вместо CheckBoxList:
Добавяне на модел на данни за CheckBoxList
Тъй като планираме да преместим повикването към нашия контрол в нашия частичен изглед, ние също трябва да предадем данни за него там, следователно трябва да добавим модел на данни за него. В папкатаModelsсъздайте нова папкаCheckBoxList, добавете класаCheckBoxList_Model.csкъм нея:
Нека променим извикването на частичен изглед в нашия изгледИндекс, предавайки добавения модел като данни:
и дефинирайте този модел като модел за нашия частичен изглед в/Views/Partial/Controls/CheckBoxList.cshtmlчрез извикване и предаване на стойности на нашия контрол:
Това завършва структурата на приложението. Обмислете основните му точки:
Добрата новина е, че най-накрая приключихме със структурата на нашето приложение, а лошата новина е, че все още не сме писали много за самия наш CheckBoxList.
Внедряване на CheckBoxList
Нека започнем с описанието на общия алгоритъмизграждане на нашия елемент: 1. Избор на граничен HTML таг (таблица, div) въз основа на параметъраcbl_Layout. 2. Определяне на броя итерации в колекцията въз основа на параметъраcbl_RepeatColumnsи броя на записите в колекцията. 3. Формиране на условие за избор на елементи от колекция въз основа на поредния номер на текущата итерация: 3.1. Ако изходът се извършва хоризонтално и броят на колоните = 4, тогава първият ред трябва да се състои от първите 4 елемента на колекцията, които вървят по ред, вторият от следните 4 и т.н.:
3.2. Ако изходът се извършва вертикално, броят на колоните = 4 и общият брой на елементите е 24, тогава първият ред трябва да се състои (!) от всеки шести елемент от колекцията, вторият от номер на итерация + 6 и т.н.:
3.3. Не забравяйте, когато изчислявате броя на повторенията (брой елементи / брой колони) за остатъка от делението != 0. В този случай се нуждаем от допълнителна итерация, за да покажем цялата колекция.
4. Формиране на линия от селекции, отговарящи на условието при всяка итерация, в зависимост от рамкиращия таг (div, таблица): 4.1. За div това ще бъдат само тирета в края на реда. 4.2. За таблицата е: 4.2.1.
Тъй като основната идея на статията не е кодът и алгоритмите, ще дам само част от функциите, можете да видите останалото, като изтеглите проекта в края на статията, като се спрете само малко повече на формирането на маркирането на CheckBox:
Формиране на HTML маркиране CheckBox'a и модел обвързване
Най-общо казано, това е най-простият код, който се предава на елемента за събиране и настройките на нашия контрол. Може би основното в товаКодът ще бъде, че атрибутът name се присвоява името на целия ни CheckBoxList'a. Това се прави, за да можем в бъдеще, когато получаваме данни от страна на сървъра в нашия методIndexна контролераDemoController, да можем да получим избраните стойности под формата на формиран масив - малко по-късно ще покажа това с пример.
Формиране на HTML маркиране Label'a
Изчисляване на броя повторения:
Условия за вземане на проби за всяка итерация:
където i е номерът на итерация. Когато показваме хоризонтално, вземаме елементи, чиито индекси, разделени на броя на колоните == i:
При вертикално показване вземаме елементите, остатъкът от разделянето на индекса на който и текущата итерация на броя на итерациите == 0:
Преглед на здравето
Нека да разгледаме примера на 3 CheckBoxList'ov, какво получихме в крайна сметка:
За да получим избраните стойности, трябва да добавим 3 масива с имената, които предаваме за нашите CheckBoxLists към нашия модел на изгледViewModel_Index:
и също така добавете метода на контролераIndex, който обработва заявките за публикации:
След като зададете точка на прекъсване, нека да видим резултата:
Ако сте абсолютно безразлични към дублирането на код, моделите на преглед и поддръжката, тогава можете също толкова лесно да извикате самия CheckBoxList в изгледа и да получите избраните стойности на сървъра директно в масива (обаче не трябва да забравяте, че името на CheckBoxList и параметърът, получен на сървъра, трябва да са еднакви):
Е, сега, след като завършихме напълно планираното, остава последното. Помислете за разширяване на нашия контрол с нови свойства, като използватеобект като примерhtmlАтрибути.
Разширяване на CheckBoxList
За да предадем ново свойство към кода на нашия елемент, трябва да преминем от конструктора към първоначалното извикване (или обратното, което предпочитате). Всичко започва с нашия конструктор вControls.cs- добавете нов обект параметър htmlAttributes:
Нашият конструктор се извиква в частичен изглед с имеCheckBoxList.cshtml. Добавете ново свойство за модела CheckBoxList:
И ние ще го предадем, когато бъде извикан в нашия частичен изглед:
Остава да добавим инициализацията на самото свойство в изгледаIndexи да допълним кода на нашия елемент:
Код за избор на рамка (таблица, div):
Както можете да видите по-долу, всичко работи:
Заключение
Като заключение бих искал да разбера какво все пак направихме:
- Разгледа възможността за създаване, използване и разширяване на собствен контрол, базиран на Html ASP .NET MVC помощници;
- Създадена рамка на проекта за по-нататъшно развитие на контролите;
- Внедрена структура на уеб приложението с разпределение на отговорностите на всяко функционално звено;
- Научихме за сайта, с който има с какво да се състезавате, когато пишете собствени контроли.
Списък на материалите
Hardcore conf в C++. Каним само професионалисти.