Элементы управления ASP.NET: проверьтеBox, Радиокнопка, СписокBox, Текстовое поле, Метка
Джейкоб Ли
Добавление элементов управления ASP.Net в веб-формы
ASP.Net имеет возможность добавлять в форму элементы управления, такие как текстовые поля и метки.
Давайте посмотрим на другие элементы управления, доступные для веб-форм, и рассмотрим некоторые из их общих свойств.
В нашем примере мы создадим одну форму, которая будет иметь следующие функции.
- Возможность для пользователя ввести свое имя.
- Возможность выбора города, в котором проживает пользователь.
- Возможность для пользователя ввести вариант пола.
- Возможность выбрать курс, который хочет изучить пользователь. Будет выбор для обоих C# и ASP.Net
Давайте рассмотрим каждый элемент управления подробно. Давайте добавим их, чтобы построить форму с вышеупомянутым функционалом.
Шаг 1) Первым шагом является открытие конструктора форм для демонстрационной веб-формы. Как только вы это сделаете, вы сможете перетаскивать элементы управления с панели инструментов на панель инструментов. Веб-форма.
Чтобы открыть веб-форму дизайнера,
- Щелкните правой кнопкой мыши файл Demo.aspx в обозревателе решений и
- Выберите пункт меню View Designer.
Выполнив вышеуказанный шаг, вы сможете увидеть свой конструктор форм, как показано ниже.
Теперь давайте начнем добавлять наши элементы управления один за другим.
Метка управления
Элемент управления меткой используется для отображения текста или сообщения пользователю в форме. Элемент управления Label обычно используется вместе с другими элементами управления. Типичные примеры: метка добавляется вместе с элементом управления текстовым полем. Метка сообщает пользователю, что именно должно быть заполнено в текстовом поле. Давайте посмотрим, как мы можем это реализовать, на примере, показанном ниже. Мы будем использовать метку под названием «имя». Он будет использоваться вместе с элементами управления текстовым полем, которые будут добавлены в следующем разделе.
Шаг 1) Первый шаг — перетащить элемент управления «Ярлык» на веб-форму из панели инструментов, как показано ниже.
Шаг 2) После добавления метки выполните следующие действия.
- Перейдите в окно свойств, щелкнув правой кнопкой мыши по элементу управления меткой.
- Выберите пункт меню «Свойства».
Шаг 3) В окне свойств измените имя свойства «Текст» на «Имя».
Аналогично измените значение свойства ID элемента управления на lblName. Указав значимый идентификатор для элементов управления, становится проще получить к ним доступ на этапе кодирования. Это показано ниже.
После внесения вышеуказанных изменений вы увидите следующий вывод
Выход:-
Вы увидите, что в веб-форме появится метка «Имя».
Текстовое окно
Текстовое поле используется для того, чтобы позволить пользователю вводить текст в приложении веб-формы. Давайте посмотрим, как мы можем это реализовать, на примере, показанном ниже. Мы добавим в форму одно текстовое поле, в котором пользователь сможет ввести свое имя.
Шаг 1) Первый шаг — перетащить элемент управления текстовым полем на веб-форму из панели инструментов, как показано ниже.
Ниже показано, как это будет выглядеть в дизайнере форм, если в форме находится элемент управления Textbox.
Шаг 2) После добавления текстового поля вам необходимо изменить свойство ID.
- Перейдите в окно свойств, щелкнув правой кнопкой мыши элемент управления «Текстовое поле» и
- Выберите недвижимость, затем
- Измените свойство id текстового поля на txtName.
После внесения вышеуказанных изменений вы увидите следующий результат.
Выход:-
Окно списка
Listbox используется для отображения списка элементов в веб-форме. Давайте посмотрим, как мы можем это реализовать, на примере, показанном ниже. Мы добавим в форму список для хранения некоторых городов.
Шаг 1) Первый шаг — перетащить элемент управления списком на веб-форму из панели инструментов, как показано ниже.
Шаг 2) Как только вы перетащите список в форму, появится отдельное боковое меню. В этом меню выберите меню «Редактировать элементы».
Шаг 3) Теперь вам будет представлено диалоговое окно, в котором вы можете добавить элементы списка в список.
- Нажмите кнопку «Добавить», чтобы добавить элемент списка.
- Дайте имя текстовому значению элемента списка — в нашем случае Мумбаи. Повторите шаги 1 и 2, чтобы добавить элементы списка для Мангалора и Хайдарабада.
- Нажмите на кнопку ОК
Шаг 4) Перейдите в окно свойств и измените значение свойства ID элемента управления на lstLocation.
После внесения вышеуказанных изменений вы увидите следующий вывод
Выход:-
Из вывода вы можете ясно видеть, что в форму были добавлены списки.
RadioButton
Радиокнопка используется для отображения списка элементов, из которых пользователь может выбрать один. Давайте посмотрим, как мы можем это реализовать, на примере, показанном ниже. Мы добавим переключатель для мужского/женского варианта.
Шаг 1) Первый шаг — перетащить элемент управления «переключатель» на веб-форму из панели инструментов. (см. изображение ниже). Обязательно добавьте два переключателя: один для параметра «Мужской», а другой — для «Женский».
Шаг 2) После добавления радиокнопки измените свойство text.
- Перейдите в окно свойств, нажав на кнопку «Радиокнопка».
- Измените текстовое свойство переключателя на «Мужской».
- Повторите тот же шаг, чтобы изменить его на «Женский».
- Кроме того, измените свойства ID соответствующих элементов управления на rdMale и rdFemale.
После внесения вышеуказанных изменений вы увидите следующий вывод
Выход:-
Из вывода ясно видно, что переключатель был добавлен в форму.
флажок
Флажок используется для предоставления списка опций, из которых пользователь может выбрать несколько вариантов. Давайте посмотрим, как мы можем это реализовать, на примере, показанном ниже. Мы добавим 2 флажка в наши веб-формы. Эти флажки предоставят пользователю возможность узнать, хотят ли они учиться. C# или ASP.Net.
Шаг 1) Первый шаг — перетащить элемент управления флажком на веб-форму из панели инструментов, как показано ниже.
Шаг 2) После добавления флажков измените свойство идентификатора флажка на «chkASP».
- Перейдите в окно свойств, щелкнув элемент управления «Флажок».
- Измените свойства идентификатора соответствующих элементов управления на «chkC» и «chkASP».
Кроме того, измените текстовое свойство элемента управления Checkbox на «C#». Сделайте то же самое для другого элемента управления Checkbox и измените его на «ASP.Net».
- Измените свойство ID флажка на «chkASP».
- Измените свойство ID флажка на chkC
После внесения вышеуказанных изменений вы увидите следующий вывод
Выход:-
Из вывода вы можете ясно видеть, что в форму были добавлены флажки.
Button
Кнопка используется, чтобы позволить пользователю нажать на кнопку, которая затем начнет обработку формы. Давайте посмотрим, как мы можем реализовать это на нашем текущем примере, как показано ниже. Мы добавим простую кнопку под названием «Отправить». Это будет использоваться для отправки всей информации в форме.
Шаг 1) Первый шаг — перетащить элемент управления «Кнопка» на веб-форму из панели инструментов, как показано ниже.
Шаг 2) После добавления кнопки перейдите в окно свойств, щелкнув элемент управления «Кнопка». Измените свойство text элемента управления «Кнопка» на «Отправить». Также измените свойство 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;
}
Code Объяснение:-
- Приведённая выше строка кода делает самую простую вещь. Она берёт значение текстового поля "Имя" и отправляет его клиенту через объект Response. Таким образом, если вы хотите ввести строку "GuruВ текстовом поле имени введите значение txtName, равное 99. Текст будет выглядеть так: 'Guru99'.
- Следующая строка кода принимает выбранное значение списка через свойство lstLocation.SelectedItem.text. Затем он записывает это значение через метод Response.Write обратно клиенту.
- Наконец, мы делаем все элементы управления формы невидимыми. Если мы этого не сделаем, все элементы управления, а также значения наших ответов будут отображаться вместе. Обычно, когда человек вводит всю информацию в форму, такую как имя, местоположение, пол и т. д., следующая страница отображается пользователю. должна содержать только ту информацию, которая не была введена. Пользователь не хочет снова видеть элементы управления именем, полом и местоположением. Но ASP.Net этого не знает, и, следовательно, по умолчанию он снова покажет все элементы управления, когда пользователь нажмет кнопку «Отправить». Следовательно, нам нужно написать код, чтобы гарантировать, что все элементы управления скрыты, чтобы пользователь мог видеть только желаемый результат.
После того, как вы внесете вышеуказанные изменения, вы увидите следующий вывод
Выход:-
На экране «Вывод» выполните следующие действия.
- Дайте название Guru99 в текстовом поле имени
- Выберите местоположение в списке Бангалор
- Нажмите кнопку «Отправить»
После этого вы увидите:GuruНа странице отображается значение «99», а также местоположение «Бангалор».
Резюме
- In ASP.Net, вы можете добавить в форму стандартные элементы управления, такие как метки, текстовые поля, списки и т. д.
- С каждым элементом управления может быть связано событие. Наиболее распространенным событием является событие нажатия кнопки. Это используется, когда информацию необходимо отправить на веб-сервер.
