Елементи керування ASP.NET: перевіртеBox, RadioButton, СписокBox, текстове поле, мітка
Джейкоб Лі
Додавання елементів керування ASP.Net до веб-форм
ASP.Net має можливість додавати елементи керування до форми, такі як текстові поля та мітки.
Давайте розглянемо інші елементи керування, доступні для веб-форм, і розглянемо деякі їхні загальні властивості.
У нашому прикладі ми створимо одну форму, яка матиме такі функції.
- Можливість користувача ввести своє ім'я.
- Можливість вибору міста, в якому проживає користувач
- Можливість для користувача ввести параметр для статі.
- Можливість вибору курсу, який бажає вивчити користувач. Вибір буде для обох C# і ASP.Net
Розглянемо кожен елемент керування докладніше. Давайте додамо їх, щоб створити форму з вищезгаданою функціональністю.
Крок 1) Першим кроком є відкриття конструктора форм для демонстраційної веб-форми. Зробивши це, ви зможете перетягувати елементи керування з панелі інструментів у Веб-форма.
Щоб відкрити веб-форму Designer,
- Клацніть правою кнопкою миші файл Demo.aspx у провіднику рішень і
- Виберіть пункт меню View Designer.
Виконавши вищевказаний крок, ви зможете побачити свій конструктор форм, як показано нижче.
Тепер давайте почнемо додавати наші елементи керування один за іншим
Контроль етикеток
Елемент керування міткою використовується для відображення тексту або повідомлення для користувача у формі. Елемент керування міткою зазвичай використовується разом з іншими елементами керування. Типовими прикладами є додавання мітки разом із елементом керування текстовим полем. Мітка вказує користувачеві на те, що очікується заповнити в текстовому полі. Давайте подивимося, як ми можемо реалізувати це на прикладі, показаному нижче. Ми будемо використовувати мітку під назвою "ім'я". Це використовуватиметься разом із елементами керування текстовим полем, які буде додано в наступному розділі.
Крок 1) Перший крок — перетягнути елемент керування «мітка» до веб-форми з панелі інструментів, як показано нижче.
Крок 2) Додавши мітку, виконайте наступні дії.
- Перейдіть до вікна властивостей, клацнувши правою кнопкою миші на елементі керування міткою
- Виберіть пункт меню «Властивості».
Крок 3) У вікні властивостей змініть назву властивості Text на Name
Подібним чином також змініть значення властивості ID елемента керування на lblName. Якщо вказати значущий ідентифікатор для елементів керування, стає легше отримати до них доступ на етапі кодування. Це показано нижче.
Щойно ви внесете вищевказані зміни, ви побачите наступний результат
Вихід:-
Ви побачите, що на веб-формі з’явиться мітка Ім’я.
Текстове вікно
Текстове поле використовується для того, щоб дозволити користувачеві ввести певний текст у програму веб-форми. Давайте подивимося, як ми можемо реалізувати це на прикладі, показаному нижче. Ми додамо одне текстове поле до форми, в якому користувач може ввести своє ім'я.
Крок 1) Першим кроком є перетягування елемента керування текстовим полем на веб-форму з панелі інструментів, як показано нижче
Нижче показано, як це виглядатиме в дизайнері форм, коли на формі буде розміщено елемент керування Textbox
Крок 2) Після додавання текстового поля вам потрібно змінити властивість ID.
- Перейдіть до вікна властивостей, клацнувши правою кнопкою миші елемент керування Textbox і
- Потім виберіть властивості
- Змініть властивість ідентифікатора текстового поля на txtName.
Після внесення вищевказаних змін ви побачите наступний результат.
Вихід:-
Поле списку
Listbox використовується для демонстрації списку елементів у веб-формі. Давайте подивимося, як ми можемо реалізувати це на прикладі, показаному нижче. Ми додамо список до форми для зберігання деяких місць розташування міст.
Крок 1) Перший крок — перетягнути елемент керування списком у веб-форму з панелі інструментів, як показано нижче
Крок 2) Після того, як ви перетягнете список у форму, з’явиться окреме бічне меню. У цьому меню виберіть меню «Редагувати елементи».
Крок 3) Тепер вам буде запропоновано діалогове вікно, у якому ви можете додати елементи списку до списку.
- Натисніть кнопку «Додати», щоб додати елемент списку.
- Дайте назву для текстового значення елемента списку – у нашому випадку Mumbai. Повторіть кроки 1 і 2, щоб додати елементи списку для Mangalore і Hyderabad.
- Натисніть кнопку ОК
Крок 4) Перейдіть до вікна властивостей і змініть значення властивості ідентифікатора елемента керування на lstLocation.
Щойно ви внесете вищевказані зміни, ви побачите наступний результат
Вихід:-
З результату ви можете чітко побачити, що Listboxes було додано до форми.
RadioButton
Перемикач використовується для демонстрації списку елементів, з яких користувач може вибрати один. Давайте подивимося, як ми можемо реалізувати це на прикладі, показаному нижче. Ми додамо перемикач для варіанту чоловік/жінка.
Крок 1) Першим кроком є перетягування елемента керування «радіокнопка» на веб-форму з панелі інструментів. (див. зображення нижче). Обов’язково додайте 2 перемикачі: одну для опції «Чоловік», а іншу — «Жінка».
Крок 2) Після додавання радіокнопки змініть властивість «text».
- Перейдіть до вікна властивостей, клацнувши на перемикач керування.
- Змініть текстову властивість перемикача на «Чоловічий».
- Повторіть той самий крок, щоб змінити його на «Жіночий».
- Крім того, змініть властивості ID відповідних елементів керування на rdMale і rdFemale.
Щойно ви внесете вищевказані зміни, ви побачите наступний результат
Вихід:-
З результату ви можете чітко побачити, що перемикач додано до форми
прапорець
Прапорець використовується для надання списку параметрів, у якому користувач може вибрати кілька варіантів. Давайте подивимося, як ми можемо реалізувати це на прикладі, показаному нижче. Ми додамо 2 прапорці до наших веб-форм. Ці прапорці нададуть користувачеві можливість вибрати, чи хочуть вони вчитися C# або ASP.Net.
Крок 1) Першим кроком є перетягування елемента керування прапорцем на веб-форму з панелі інструментів, як показано нижче
Крок 2) Після додавання прапорців змініть властивість ідентифікатора прапорця на "chkASP".
- Перейдіть до вікна властивостей, клацнувши елемент керування Checkbox.
- Змініть властивості ID відповідних елементів керування на "chkC" і "chkASP".
Крім того, змініть властивість text елемента керування Checkbox на «C#». Зробіть те саме для іншого елемента керування Checkbox і змініть його на «ASP.Net».
- Змініть властивість ідентифікатора прапорця на "chkASP"
- Змініть властивість 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;
}
Пояснення коду: -
- Наведений вище рядок коду робить найпростішу річ. Він приймає значення елемента керування текстовим полем імені та надсилає його клієнту через об’єкт Response. Отже, якщо ви хочете ввести рядок «Guru99» у текстове поле імені, значення txtName. Текст буде "Guru99".
- Наступний рядок коду приймає вибране значення списку через властивість 'lstLocation.SelectedItem.text'. Потім він записує це значення через метод Response.Write назад до клієнта.
- Нарешті, ми робимо всі елементи керування на формі невидимими. Якщо ми цього не зробимо, усі елементи керування та наші значення відповідей відображатимуться разом. Зазвичай, коли особа вводить у форму всю інформацію, таку як ім’я, місцезнаходження, стать тощо. Наступна сторінка, показана користувачеві має містити лише ту інформацію, яка не була введена. Користувач не хоче знову бачити елементи керування ім’ям, статтю та розташуванням. Але ASP.Net цього не знає, тому за замовчуванням він знову показує всі елементи керування, коли користувач натискає кнопку «Надіслати». Отже, нам потрібно написати код, щоб переконатися, що всі елементи керування приховані, щоб користувач бачив лише бажаний результат.
Якщо ви внесете вищевказані зміни, ви побачите наступний результат
Вихід:-
На екрані «Вивід» виконайте наступні дії
- Введіть ім’я Guru99 у текстовому полі імені
- Виберіть місце зі списку Бангалор
- Натисніть кнопку Надіслати
Коли ви це зробите, ви побачите «Guru99», а на сторінці відобразиться місцезнаходження «Бангалор».
Підсумки
- In ASP.Net, ви можете додати стандартні елементи керування до форми, такі як мітки, текстові поля, списки тощо.
- З кожним елементом керування може бути пов’язана подія. Найпоширенішою подією є подія натискання кнопки. Це використовується, коли інформацію потрібно надіслати на веб-сервер.
