Контроли на ASP.NET: ПроверетеBox, RadioButton, ListBox, Текстово поле, Етикет
Добавяне на ASP.Net контроли към уеб формуляри
ASP.Net има способността да добавя контроли към формуляр като текстови полета и етикети.
Нека да разгледаме другите налични контроли за уеб формуляри и да видим някои от техните общи свойства.
В нашия пример ще създадем един формуляр, който ще има следната функционалност.
- Възможност потребителят да въведе своето име.
- Възможност за избор на град, в който потребителят живее
- Възможност потребителят да въведе опция за пола.
- Възможност за избор на курс, който потребителят иска да научи. Ще има избор и за двамата C# и ASP.Net
Нека разгледаме всеки контрол подробно. Нека ги добавим, за да изградим формуляра с горепосочената функционалност.
Стъпка 1) Първата стъпка е да отворите дизайнера на формуляри за демонстрационния уеб формуляр. След като направите това, ще можете да плъзгате контроли от кутията с инструменти към Уеб формуляр.
За да отворите уеб формуляра на Designer,
- Щракнете с десния бутон върху файла Demo.aspx в Solution Explorer и
- Изберете опцията от менюто View Designer.
След като изпълните горната стъпка, ще можете да видите своя дизайнер на формуляри, както е показано по-долу.
Сега нека започнем да добавяме нашите контроли един по един
Контрол на етикета
Контролата за етикет се използва за показване на текст или съобщение на потребителя във формуляра. Контролата етикет обикновено се използва заедно с други контроли. Често срещани примери са, когато етикет се добавя заедно с контролата на текстовото поле. Етикетът дава указание на потребителя какво се очаква да се запълни в текстовото поле. Нека видим как можем да приложим това с пример, показан по-долу. Ще използваме етикет, наречен „име“. Това ще се използва заедно с контролите на текстовото поле, които ще бъдат добавени в по-късния раздел.
Стъпка 1) Първата стъпка е да плъзнете контролата „етикет“ към уеб формуляра от кутията с инструменти, както е показано по-долу.
Стъпка 2) След като етикетът бъде добавен, изпълнете следните стъпки.
- Отидете до прозореца със свойства, като щракнете с десния бутон върху контролата на етикета
- Изберете опцията от менюто Свойства
Стъпка 3) От прозореца със свойства променете името на свойството Text на Name
По подобен начин променете стойността на свойството ID на контролата на lblName. Чрез указване на смислен идентификатор на контролите става по-лесно достъпът до тях по време на фазата на кодиране. Това е показано по-долу.
След като направите горните промени, ще видите следния резултат
Изход: -
Ще видите, че етикетът Име се появява на уеб формуляра.
Текстово поле
Текстовото поле се използва, за да позволи на потребителя да въведе текст в приложението за уеб формуляр. Нека видим как можем да приложим това с пример, показан по-долу. Ще добавим едно текстово поле към формата, в което потребителят може да въведе името си.
Стъпка 1) Първата стъпка е да плъзнете контролата на текстовото поле върху уеб формуляра от кутията с инструменти, както е показано по-долу
По-долу е показано как това ще изглежда в дизайнера на формуляри, след като контролата Textbox е във формуляра
Стъпка 2) След като текстовото поле бъде добавено, трябва да промените свойството ID.
- Отидете до прозореца със свойства, като щракнете с десния бутон върху контролата Textbox и
- След това изберете свойства
- Променете свойството id на текстовото поле на txtName.
След като направите горните промени, ще видите следния резултат.
Изход: -
Списъчно поле
Списъчно поле се използва за показване на списък с елементи в уеб формуляра. Нека видим как можем да приложим това с пример, показан по-долу. Ще добавим списъчно поле към формуляра за съхраняване на някои градски местоположения.
Стъпка 1) Първата стъпка е да плъзнете контролата на списъчното поле към уеб формуляра от кутията с инструменти, както е показано по-долу
Стъпка 2) След като плъзнете списъка към формуляра, ще се появи отделно странично меню. В това меню изберете менюто „Редактиране на елементи“.
Стъпка 3) Сега ще ви бъде представен диалогов прозорец, в който можете да добавите елементите от списъка към списъка.
- Щракнете върху бутона Добавяне, за да добавите елемент от списъка.
- Дайте име за текстовата стойност на елемента от списъка – в нашия случай Мумбай. Повторете стъпки 1 и 2, за да добавите елементи от списъка за Мангалор и Хайдерабад.
- Кликнете върху бутона OK
Стъпка 4) Отидете в прозореца със свойства и променете стойността на свойството ID на контролата на lstLocation.
След като направите горните промени, ще видите следния резултат
Изход: -
От изхода можете ясно да видите, че списъците са добавени към формуляра.
Радио бутон
Бутонът за избор се използва за показване на списък с елементи, от които потребителят може да избере един. Нека видим как можем да приложим това с пример, показан по-долу. Ще добавим радио бутон за опция мъж/жена.
Стъпка 1) Първата стъпка е да плъзнете контролата „radiobton“ върху уеб формуляра от кутията с инструменти. (вижте изображението по-долу). Уверете се, че сте добавили 2 бутона за избор, единият за опцията „Мъж“, а другият за „Жена“.
Стъпка 2) След като радиобутонът бъде добавен, променете свойството „текст“.
- Отидете до прозореца със свойства, като щракнете върху „Контрола с радиобутон“.
- Променете свойството за текст на бутона за избор на „Мъж“.
- Повторете същата стъпка, за да я промените на „Жена“.
- Също така променете свойствата на ID на съответните контроли на rdMale и rdFemale.
След като направите горните промени, ще видите следния резултат
Изход: -
От изхода можете ясно да видите, че радиобутонът е добавен към формуляра
Checkbox
Квадратчето за отметка се използва за предоставяне на списък с опции, в които потребителят може да избере множество възможности за избор. Нека видим как можем да приложим това с пример, показан по-долу. Ще добавим 2 квадратчета за отметка към нашите уеб формуляри. Тези квадратчета за отметка ще предоставят опция на потребителя дали иска да учи C# или ASP.Net.
Стъпка 1) Първата стъпка е да плъзнете контролата на квадратчето за отметка върху уеб формуляра от кутията с инструменти, както е показано по-долу
Стъпка 2) След като квадратчетата за отметка бъдат добавени, променете свойството ID на квадратчето за отметка на „chkASP“.
- Отидете до прозореца със свойства, като щракнете върху контролата в полето за отметка.
- Променете свойствата на ID на съответните контроли на „chkC“ и „chkASP“.
Освен това променете свойството за текст на контролата на полето за отметка на „C#“. Направете същото за другата контрола на полето за отметка и я променете на „ASP.Net“.
- Променете свойството ID на квадратчето за отметка на „chkASP“
- Променете свойството ID на квадратчето за отметка на chkC
След като направите горните промени, ще видите следния резултат
Изход: -
От изхода можете ясно да видите, че квадратчетата за отметка са добавени към формуляра.
Бутон
Използва се бутон, който позволява на потребителя да щракне върху бутон, който след това ще започне обработката на формуляра. Нека видим как можем да приложим това с настоящия ни пример, както е показано по-долу. Ще добавим прост бутон, наречен бутон „Изпращане“. Това ще се използва за изпращане на цялата информация във формуляра.
Стъпка 1) Първата стъпка е да плъзнете контролата на бутона върху уеб формуляра от кутията с инструменти, както е показано по-долу
Стъпка 2) След като бутонът бъде добавен, отидете до прозореца със свойства, като щракнете върху контролата на бутона. Променете свойството text на контролата на бутона на Submit. Също така променете свойството ID на бутона на „btnSubmit“.
След като направите горните промени, ще видите следния резултат
Изход: -
От изхода можете ясно да видите, че бутонът е добавен към формуляра.
Обработчик на събития в ASP.Net
Когато работите с уеб формуляр, можете да добавяте събития към контролите. Събитие е нещо, което се случва, когато се извършва действие. Вероятно най-често срещаното действие е щракването върху бутон във формуляр.
В уеб формуляри можете да добавите код към съответния файл aspx.cs. Този код може да се използва за извършване на определени действия при натискане на бутон във формуляра. Това обикновено е най-често срещаното събитие в уеб формуляри. Нека видим как можем да постигнем това.
Ще направим това просто. Просто добавете събитие към контролата на бутона, за да се покаже името, което е въведено от потребителя. Нека следваме стъпките по-долу, за да постигнем това.
Стъпка 1) Първо трябва да щракнете двукратно върху бутона на уеб формуляра. Това ще покаже кода на събитието за бутона във Visual Studio.
Събитието btnSubmit_Click се добавя автоматично от Visual Studio, когато щракнете два пъти върху бутона в дизайнера на уеб формуляри.
Стъпка 2) Нека сега добавим код към събитието за изпращане, за да покаже стойността на текстовото поле на името и местоположението, избрано от потребителя.
protected void btnSubmit_Click(object sender,EventArgs e) { Response.Write(txtName.Text + "</br>"); Response.Write(lstLocation.SelectedItem.Text + "</br>"); lblName.Visible = false; txtName.Visible = false; lstLocation.Visible = false; chkC.Visible = false; chkASP.Visible = false; rdFemale.Visible = false; btnSubmit.Visible = false; }
Обяснение на кода:-
- Горният ред код прави най-простото нещо. Той взема стойността на контролата на текстовото поле Name и я изпраща на клиента чрез обекта Response. Така че, ако искате да въведете низа „Guru99“ в текстовото поле за име, стойността на txtName. Текстът ще бъде „Guru99“.
- Следващият ред от код взема избраната стойност от списъчната кутия чрез свойството „lstLocation.SelectedItem.text“. След това записва тази стойност чрез метода Response.Write обратно на клиента.
- Накрая правим всички контроли на формата невидими. Ако не направим това, всички контроли плюс нашите стойности на отговор ще бъдат показани заедно. Обикновено, когато човек въведе цялата информация във формуляра, като име, местоположение, пол и т.н. Следващата страница, показана на потребителя трябва да има само информацията, която не е въведена. Потребителят не иска да вижда отново контролите за име, пол и местоположение. Но ASP.Net не знае това и следователно по подразбиране отново ще покаже всички контроли, когато потребителят щракне върху бутона Изпрати. Следователно трябва да напишем код, за да гарантираме, че всички контроли са скрити, така че потребителят да вижда само желания резултат.
След като направите горните промени, ще видите следния резултат
Изход: -
В екрана Изход изпълнете следните стъпки
- Дайте име Guru99 в текстовото поле за име
- Изберете местоположение в списъка на Бангалор
- Кликнете върху бутона Изпращане
След като направите това, ще видите 'Guru99' и местоположението 'Bangalore' се показва на страницата.
Oбобщение
- In ASP.Net, можете да добавите стандартните контроли към формуляр като етикети, текстови полета, списъци и др.
- Всяка контрола може да има събитие, свързано с нея. Най-често срещаното събитие е събитието щракване на бутон. Това се използва, когато информацията трябва да бъде изпратена до уеб сървъра.