Елементи керування ASP.NET: перевіртеBox, RadioButton, СписокBox

Додавання елементів керування ASP.Net до веб-форм

ASP.Net має можливість додавати до форми елементи керування, такі як текстові поля та підписи.

Давайте розглянемо інші елементи керування, доступні для веб-форм, і деякі з їхніх спільних властивостей.

У нашому прикладі ми створимо одну форму, яка матиме такі функції.

1. Можливість користувача ввести своє ім'я.
2. Можливість вибрати місто, в якому проживає користувач.
3. Можливість для користувача ввести параметр для статі.
4. Можливість вибору курсу, який бажає вивчити користувач. Вибір буде для обох C# та ASP.Net.

Розглянемо кожен елемент керування докладніше. Давайте додамо їх, щоб створити форму з вищезгаданою функціональністю.

Крок 1) Першим кроком є ​​відкриття конструктора форм для демонстраційної веб-форми. Зробивши це, ви зможете перетягувати елементи керування з панелі інструментів у Веб-форма.

Щоб відкрити веб-форму Designer:

• Клацніть правою кнопкою миші файл Demo.aspx у Solution Explorer і
• Виберіть пункт меню View Designer.

Виконавши вищевказаний крок, ви зможете побачити свій конструктор форм, як показано нижче.

Тепер давайте почнемо додавати наші елементи керування один за одним.

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

Елемент керування «Label» використовується для відображення тексту або повідомлення користувачеві у формі. Елемент керування «Label» зазвичай використовується разом з іншими елементами керування. Типовим прикладом є додавання мітки разом з елементом керування «textbox». Мітка вказує користувачеві, що має бути заповнено в текстовому полі. Давайте подивимося, як ми можемо реалізувати це на прикладі, наведеному нижче. Ми використовуватимемо мітку під назвою «name». Вона буде використовуватися разом з елементами керування «textbox», які будуть додані в наступному розділі.

Крок 1) Перший крок – перетягнути елемент керування «мітка» з панелі інструментів на веб-форму, як показано нижче.

Крок 2) Додавши мітку, виконайте наступні дії.

1. Перейдіть до вікна властивостей, клацнувши правою кнопкою миші на елементі керування "Підпис".
2. Виберіть пункт меню «Властивості».

Крок 3) У вікні властивостей змініть значення властивості Text на Name.

Подібним чином також змініть значення властивості ID елемента керування на lblName. Якщо вказати значущий ідентифікатор для елементів керування, стає легше отримати до них доступ на етапі кодування. Це показано нижче.

Після внесення вищезазначених змін ви побачите наступний результат.

Вихід:-

Ви побачите, що на веб-формі з’явиться мітка Ім’я.

Текстове вікно

Текстове поле використовується для того, щоб дозволити користувачеві ввести певний текст у програму веб-форми. Давайте подивимося, як ми можемо реалізувати це на прикладі, показаному нижче. Ми додамо одне текстове поле до форми, в якому користувач може ввести своє ім'я.

Крок 1) Перший крок – перетягнути елемент керування текстовим полем на веб-форму з панелі інструментів, як показано нижче.

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

Крок 2) Після додавання текстового поля вам потрібно змінити властивість ID.

• Перейдіть до вікна властивостей, клацнувши правою кнопкою миші на елементі керування Textbox та
• Виберіть «Властивості», а потім
• Змініть властивість ID текстового поля на txtName.

Після внесення вищевказаних змін ви побачите наступний результат.

Вихід:-

Поле списку

Listbox використовується для демонстрації списку елементів у веб-формі. Давайте подивимося, як ми можемо реалізувати це на прикладі, показаному нижче. Ми додамо список до форми для зберігання деяких місць розташування міст.

Крок 1) Перший крок – перетягнути елемент керування списком на веб-форму з панелі інструментів, як показано нижче.

Крок 2) Після перетягування списку на форму з’явиться окреме бічне меню. У цьому меню виберіть пункт «Редагувати елементи».

Крок 3) Тепер вам буде запропоновано діалогове вікно, у якому ви можете додати елементи списку до списку.

1. Натисніть кнопку «Додати», щоб додати елемент списку.
2. Введіть назву текстового значення елемента списку – у нашому випадку, Мумбаї. Повторіть кроки 1 і 2, щоб додати елементи списку для Мангалура та Хайдарабаду.
3. Натисніть кнопку ОК.

Крок 4) Перейдіть до вікна властивостей і змініть значення властивості ID елемента керування на lstLocation.

Після внесення вищезазначених змін ви побачите наступний результат.

Вихід:-

З виводу чітко видно, що список було додано до форми.

RadioButton

Перемикач використовується для демонстрації списку елементів, з яких користувач може вибрати один. Давайте подивимося, як ми можемо реалізувати це на прикладі, показаному нижче. Ми додамо перемикач для варіанту чоловік/жінка.

Крок 1) Перший крок – перетягнути елемент керування «радіокнопка» з панелі інструментів на веб-форму (див. зображення нижче). Обов’язково додайте 2 радіокнопки: одну для опції «Чоловік», а іншу – для «Жінка».

Крок 2) Після додавання радіокнопки змініть властивість «text».

• Перейдіть до вікна властивостей, клацнувши на перемикач керування.
• Змініть текстову властивість перемикача на «Чоловічий».
• Повторіть той самий крок, щоб змінити його на «Жіночий».
• Крім того, змініть властивості ID відповідних елементів керування на rdMale і rdFemale.

Після внесення вищезазначених змін ви побачите наступний результат.

Вихід:-

З виводу чітко видно, що радіокнопку було додано до форми.

прапорець

Прапорець використовується для надання списку опцій, з яких користувач може вибрати кілька варіантів. Давайте розглянемо, як ми можемо реалізувати це на прикладі, наведеному нижче. Ми додамо 2 прапорці до наших веб-форм. Ці прапорці нададуть користувачеві можливість вибрати, чи хоче він навчатися. C# або ASP.Net.

Крок 1) Перший крок – перетягнути прапорець з панелі інструментів на веб-форму, як показано нижче.

Крок 2) Після додавання прапорців змініть властивість ідентифікатора прапорця.

• Перейдіть до вікна властивостей, клацнувши елемент керування Checkbox.
• Змініть властивості ID відповідних елементів керування на "chkC" і "chkASP".

Крім того, змініть властивість text елемента керування Checkbox на «C#». Зробіть те саме для іншого елемента керування Checkbox і змініть його на «ASP.Net».

1. Змініть властивість ID прапорця на «chkASP».

2. Змініть властивість ID прапорця на chkC.

Після внесення вищезазначених змін ви побачите наступний результат.

Вихід:-

З виводу чітко видно, що прапорці були додані до форми.

Button

Кнопка використовується для того, щоб користувач міг натиснути на кнопку, яка потім розпочне обробку форми. Давайте подивимося, як ми можемо реалізувати це на нашому поточному прикладі, як показано нижче. Ми додамо просту кнопку під назвою «Надіслати». Вона буде використовуватися для надсилання всієї інформації у формі.

Крок 1) Перший крок – перетягнути елемент керування кнопкою на веб-форму з панелі інструментів, як показано нижче.

Крок 2) Після додавання кнопки перейдіть до вікна властивостей, натиснувши елемент керування кнопкою. Змініть властивість text елемента керування кнопкою на Надіслати. Також змініть властивість ID кнопки на «btnSubmit».

Після внесення вищезазначених змін ви побачите наступний результат.

Вихід:-

З результату ви можете чітко побачити, що кнопку додано до форми.

Обробник подій в ASP.Net

Працюючи з веб-формою, ви можете додавати події до елементів керування. Подія — це те, що відбувається під час виконання дії. Мабуть, найпоширенішою дією є натискання кнопки у формі.

У веб-формах ви можете додати код до відповідного файлу aspx.cs. Цей код можна використовувати для виконання певних дій при натисканні кнопки на формі. Зазвичай це найпоширеніша подія у веб-формах. Давайте подивимося, як ми можемо цього досягти.

Ми збираємося зробити це простим. Просто додайте подію до кнопки керування, щоб відобразити назву, яку ввів користувач. Щоб досягти цього, виконайте наведені нижче дії.

Крок 1) Спочатку вам потрібно двічі клацнути кнопку на веб-формі. Це призведе до появи коду події для кнопки у Visual Studio.

Подія btnSubmit_Click автоматично додається Visual Studio, коли ви двічі клацнете кнопку в конструкторі веб-форм.

Крок 2) Давайте тепер додамо код до події submit для відображення значення текстового поля імені та розташування, вибраного користувачем.

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

Code Пояснення:

1. Наведений вище рядок коду виконує найпростішу річ. Він приймає значення текстового поля Name та надсилає його клієнту через об'єкт Response. Отже, якщо ви хочете ввести рядок «Guru99” у текстовому полі імені, значення txtName.Text буде 'Guru99'.
2. Наступний рядок коду приймає вибране значення списку через властивість 'lstLocation.SelectedItem.Text'. Потім він записує це значення через метод Response.Write назад клієнту.
3. Нарешті, ми робимо всі елементи керування на формі невидимими. Якщо ми цього не зробимо, всі елементи керування разом із значеннями наших відповідей відображатимуться разом. Зазвичай, коли людина вводить у форму всю інформацію, таку як ім'я, місцезнаходження, стать тощо, наступна сторінка, що відображається користувачеві, повинна містити лише інформацію, яка не була введена. Користувач не хоче знову бачити елементи керування ім'ям, статтю та місцезнаходженням. Але ASP.Net цього не знає, і тому за замовчуванням він знову покаже всі елементи керування, коли користувач натискає кнопку «Надіслати». Отже, нам потрібно написати код, щоб забезпечити прихування всіх елементів керування, щоб користувач бачив лише бажаний результат.

Після внесення вищезазначених змін ви побачите наступний результат.

Вихід:-

На екрані «Вивід» виконайте такі дії:

1. Дайте ім'я Guru99 у текстовому полі імені.
2. Виберіть місцезнаходження у списку Бангалору.
3. Натисніть кнопку Надіслати.

Як тільки ви це зробите, ви побачите «Guru99' та місцезнаходження 'Бангалор', що відображається на сторінці.

Поширені запитання