Контроли на ASP.NET: ПроверетеBox, RadioButton, ListBox, Текстово поле, Етикет

Добавяне на ASP.Net контроли към уеб формуляри

ASP.Net има способността да добавя контроли към формуляр като текстови полета и етикети.

Нека да разгледаме другите налични контроли за уеб формуляри и да видим някои от техните общи свойства.

В нашия пример ще създадем един формуляр, който ще има следната функционалност.

  1. Възможност потребителят да въведе своето име.
  2. Възможност за избор на град, в който потребителят живее
  3. Възможност потребителят да въведе опция за пола.
  4. Възможност за избор на курс, който потребителят иска да научи. Ще има избор и за двамата C# и ASP.Net

Нека разгледаме всеки контрол подробно. Нека ги добавим, за да изградим формуляра с горепосочената функционалност.

Стъпка 1) Първата стъпка е да отворите дизайнера на формуляри за демонстрационния уеб формуляр. След като направите това, ще можете да плъзгате контроли от кутията с инструменти към Уеб формуляр.

За да отворите уеб формуляра на Designer,

  • Щракнете с десния бутон върху файла Demo.aspx в Solution Explorer и
  • Изберете опцията от менюто View Designer.

Добавяне на ASP.Net контроли към уеб формуляри

След като изпълните горната стъпка, ще можете да видите своя дизайнер на формуляри, както е показано по-долу.

Добавяне на ASP.Net контроли към уеб формуляри

Сега нека започнем да добавяме нашите контроли един по един

Контрол на етикета

Контролата за етикет се използва за показване на текст или съобщение на потребителя във формуляра. Контролата етикет обикновено се използва заедно с други контроли. Често срещани примери са, когато етикет се добавя заедно с контролата на текстовото поле. Етикетът дава указание на потребителя какво се очаква да се запълни в текстовото поле. Нека видим как можем да приложим това с пример, показан по-долу. Ще използваме етикет, наречен „име“. Това ще се използва заедно с контролите на текстовото поле, които ще бъдат добавени в по-късния раздел.

Стъпка 1) Първата стъпка е да плъзнете контролата „етикет“ към уеб формуляра от кутията с инструменти, както е показано по-долу.

Контрол на етикета

Стъпка 2) След като етикетът бъде добавен, изпълнете следните стъпки.

  1. Отидете до прозореца със свойства, като щракнете с десния бутон върху контролата на етикета
  2. Изберете опцията от менюто Свойства

Контрол на етикета

Стъпка 3) От прозореца със свойства променете името на свойството Text на Name

Контрол на етикета

По подобен начин променете стойността на свойството ID на контролата на lblName. Чрез указване на смислен идентификатор на контролите става по-лесно достъпът до тях по време на фазата на кодиране. Това е показано по-долу.

Контрол на етикета

След като направите горните промени, ще видите следния резултат

Изход: -

Контрол на етикета

Ще видите, че етикетът Име се появява на уеб формуляра.

Текстово поле

Текстовото поле се използва, за да позволи на потребителя да въведе текст в приложението за уеб формуляр. Нека видим как можем да приложим това с пример, показан по-долу. Ще добавим едно текстово поле към формата, в което потребителят може да въведе името си.

Стъпка 1) Първата стъпка е да плъзнете контролата на текстовото поле върху уеб формуляра от кутията с инструменти, както е показано по-долу

Текстово поле

По-долу е показано как това ще изглежда в дизайнера на формуляри, след като контролата Textbox е във формуляра

Текстово поле

Стъпка 2) След като текстовото поле бъде добавено, трябва да промените свойството ID.

  • Отидете до прозореца със свойства, като щракнете с десния бутон върху контролата Textbox и
  • След това изберете свойства
  • Променете свойството id на текстовото поле на txtName.

Текстово поле

След като направите горните промени, ще видите следния резултат.

Изход: -

Текстово поле

Списъчно поле

Списъчно поле се използва за показване на списък с елементи в уеб формуляра. Нека видим как можем да приложим това с пример, показан по-долу. Ще добавим списъчно поле към формуляра за съхраняване на някои градски местоположения.

Стъпка 1) Първата стъпка е да плъзнете контролата на списъчното поле към уеб формуляра от кутията с инструменти, както е показано по-долу

Списъчно поле

Стъпка 2) След като плъзнете списъка към формуляра, ще се появи отделно странично меню. В това меню изберете менюто „Редактиране на елементи“.

Списъчно поле

Стъпка 3) Сега ще ви бъде представен диалогов прозорец, в който можете да добавите елементите от списъка към списъка.

  1. Щракнете върху бутона Добавяне, за да добавите елемент от списъка.
  2. Дайте име за текстовата стойност на елемента от списъка – в нашия случай Мумбай. Повторете стъпки 1 и 2, за да добавите елементи от списъка за Мангалор и Хайдерабад.
  3. Кликнете върху бутона OK

Списъчно поле

Стъпка 4) Отидете в прозореца със свойства и променете стойността на свойството ID на контролата на lstLocation.

Списъчно поле

След като направите горните промени, ще видите следния резултат

Изход: -

Списъчно поле

От изхода можете ясно да видите, че списъците са добавени към формуляра.

Радио бутон

Бутонът за избор се използва за показване на списък с елементи, от които потребителят може да избере един. Нека видим как можем да приложим това с пример, показан по-долу. Ще добавим радио бутон за опция мъж/жена.

Стъпка 1) Първата стъпка е да плъзнете контролата „radiobton“ върху уеб формуляра от кутията с инструменти. (вижте изображението по-долу). Уверете се, че сте добавили 2 бутона за избор, единият за опцията „Мъж“, а другият за „Жена“.

Радио бутон

Стъпка 2) След като радиобутонът бъде добавен, променете свойството „текст“.

  • Отидете до прозореца със свойства, като щракнете върху „Контрола с радиобутон“.
  • Променете свойството за текст на бутона за избор на „Мъж“.
  • Повторете същата стъпка, за да я промените на „Жена“.
  • Също така променете свойствата на ID на съответните контроли на rdMale и rdFemale.

Радио бутон

След като направите горните промени, ще видите следния резултат

Изход: -

Радио бутон

От изхода можете ясно да видите, че радиобутонът е добавен към формуляра

Checkbox

Квадратчето за отметка се използва за предоставяне на списък с опции, в които потребителят може да избере множество възможности за избор. Нека видим как можем да приложим това с пример, показан по-долу. Ще добавим 2 квадратчета за отметка към нашите уеб формуляри. Тези квадратчета за отметка ще предоставят опция на потребителя дали иска да учи C# или ASP.Net.

Стъпка 1) Първата стъпка е да плъзнете контролата на квадратчето за отметка върху уеб формуляра от кутията с инструменти, както е показано по-долу

Checkbox

Стъпка 2) След като квадратчетата за отметка бъдат добавени, променете свойството ID на квадратчето за отметка на „chkASP“.

  • Отидете до прозореца със свойства, като щракнете върху контролата в полето за отметка.
  • Променете свойствата на ID на съответните контроли на „chkC“ и „chkASP“.

Освен това променете свойството за текст на контролата на полето за отметка на „C#“. Направете същото за другата контрола на полето за отметка и я променете на „ASP.Net“.

  1. Променете свойството ID на квадратчето за отметка на „chkASP“

Checkbox

  1. Променете свойството ID на квадратчето за отметка на chkC

Checkbox

Checkbox

След като направите горните промени, ще видите следния резултат

Изход: -

Checkbox

От изхода можете ясно да видите, че квадратчетата за отметка са добавени към формуляра.

Бутон

Използва се бутон, който позволява на потребителя да щракне върху бутон, който след това ще започне обработката на формуляра. Нека видим как можем да приложим това с настоящия ни пример, както е показано по-долу. Ще добавим прост бутон, наречен бутон „Изпращане“. Това ще се използва за изпращане на цялата информация във формуляра.

Стъпка 1) Първата стъпка е да плъзнете контролата на бутона върху уеб формуляра от кутията с инструменти, както е показано по-долу

Бутон

Стъпка 2) След като бутонът бъде добавен, отидете до прозореца със свойства, като щракнете върху контролата на бутона. Променете свойството text на контролата на бутона на Submit. Също така променете свойството ID на бутона на „btnSubmit“.

Бутон

След като направите горните промени, ще видите следния резултат

Изход: -

Бутон

От изхода можете ясно да видите, че бутонът е добавен към формуляра.

Обработчик на събития в ASP.Net

Когато работите с уеб формуляр, можете да добавяте събития към контролите. Събитие е нещо, което се случва, когато се извършва действие. Вероятно най-често срещаното действие е щракването върху бутон във формуляр.

В уеб формуляри можете да добавите код към съответния файл aspx.cs. Този код може да се използва за извършване на определени действия при натискане на бутон във формуляра. Това обикновено е най-често срещаното събитие в уеб формуляри. Нека видим как можем да постигнем това.

Ще направим това просто. Просто добавете събитие към контролата на бутона, за да се покаже името, което е въведено от потребителя. Нека следваме стъпките по-долу, за да постигнем това.

Стъпка 1) Първо трябва да щракнете двукратно върху бутона на уеб формуляра. Това ще покаже кода на събитието за бутона във Visual Studio.

Обработчик на събития в ASP.Net

Събитието btnSubmit_Click се добавя автоматично от Visual Studio, когато щракнете два пъти върху бутона в дизайнера на уеб формуляри.

Стъпка 2) Нека сега добавим код към събитието за изпращане, за да покаже стойността на текстовото поле на името и местоположението, избрано от потребителя.

Обработчик на събития в ASP.Net

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;
}

Обяснение на кода:-

  1. Горният ред код прави най-простото нещо. Той взема стойността на контролата на текстовото поле Name и я изпраща на клиента чрез обекта Response. Така че, ако искате да въведете низа „Guru99“ в текстовото поле за име, стойността на txtName. Текстът ще бъде „Guru99“.
  2. Следващият ред от код взема избраната стойност от списъчната кутия чрез свойството „lstLocation.SelectedItem.text“. След това записва тази стойност чрез метода Response.Write обратно на клиента.
  3. Накрая правим всички контроли на формата невидими. Ако не направим това, всички контроли плюс нашите стойности на отговор ще бъдат показани заедно. Обикновено, когато човек въведе цялата информация във формуляра, като име, местоположение, пол и т.н. Следващата страница, показана на потребителя трябва да има само информацията, която не е въведена. Потребителят не иска да вижда отново контролите за име, пол и местоположение. Но ASP.Net не знае това и следователно по подразбиране отново ще покаже всички контроли, когато потребителят щракне върху бутона Изпрати. Следователно трябва да напишем код, за да гарантираме, че всички контроли са скрити, така че потребителят да вижда само желания резултат.

След като направите горните промени, ще видите следния резултат

Изход: -

Обработчик на събития в ASP.Net

В екрана Изход изпълнете следните стъпки

  1. Дайте име Guru99 в текстовото поле за име
  2. Изберете местоположение в списъка на Бангалор
  3. Кликнете върху бутона Изпращане

Обработчик на събития в ASP.Net

След като направите това, ще видите 'Guru99' и местоположението 'Bangalore' се показва на страницата.

Oбобщение

  • In ASP.Net, можете да добавите стандартните контроли към формуляр като етикети, текстови полета, списъци и др.
  • Всяка контрола може да има събитие, свързано с нея. Най-често срещаното събитие е събитието щракване на бутон. Това се използва, когато информацията трябва да бъде изпратена до уеб сървъра.