Элементы управления ASP.NET: проверьтеBox, Радиокнопка, СписокBox, Текстbox, Этикетка

Добавление элементов управления ASP.Net в веб-формы

ASP.Net имеет возможность добавлять элементы управления в такую ​​форму, как текст.boxes и этикетки.

Давайте посмотрим на другие элементы управления, доступные для веб-форм, и рассмотрим некоторые из их общих свойств.

В нашем примере мы создадим одну форму, которая будет иметь следующий вид:wing функциональность.

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

Давайте рассмотрим каждый элемент управления подробно. Давайте добавим их, чтобы построить форму с вышеупомянутым функционалом.

Шаг 1) Первым шагом является открытие конструктора форм для демонстрационной веб-формы. Как только вы это сделаете, вы сможете перетаскивать элементы управления из инструмента.box до Веб-форма.

Чтобы открыть веб-форму дизайнера,

  • Щелкните правой кнопкой мыши файл Demo.aspx в обозревателе решений и
  • Выберите пункт меню View Designer.

Добавление элементов управления ASP.Net в веб-формы

Выполнив вышеуказанный шаг, вы сможете увидеть свой конструктор форм, как показано ниже.

Добавление элементов управления ASP.Net в веб-формы

Теперь давайте начнем добавлять наши элементы управления один за другим.

Метка управления

Элемент управления меткой используется для отображения текста или сообщения пользователю в форме. Элемент управления Label обычно используется вместе с другими элементами управления. Типичные примеры: метка добавляется вместе с текстом.box контроль. Метка дает пользователю представление о том, что ожидается в тексте.box. Давайте посмотрим, как мы можем это реализовать, на примере, показанном ниже. Мы будем использовать метку под названием «имя». Это будет использоваться вместе с текстом.box элементы управления, которые будут добавлены в later .

Шаг 1) Первый шаг — перетащить элемент управления «Ярлык» на веб-форму из инструмента.box как показано ниже.

Метка управления

Шаг 2) После добавления метки следуйте инструкциям ниже.wing шаги.

  1. Перейдите в окно свойств, щелкнув правой кнопкой мыши по элементу управления меткой.
  2. Выберите пункт меню «Свойства».

Метка управления

Шаг 3) В окне свойств измените имя свойства «Текст» на «Имя».

Метка управления

Аналогично измените значение свойства ID элемента управления на lblName. Указав значимый идентификатор для элементов управления, становится проще получить к ним доступ на этапе кодирования. Это показано ниже.

Метка управления

После внесения вышеуказанных изменений вы увидите следующее:wing выходной

Выход:-

Метка управления

Вы увидите, что в веб-форме появится метка «Имя».

Текстbox

Текст box используется для аллоwing пользователю ввести некоторый текст в приложении веб-формы. Давайте посмотрим, как мы можем это реализовать, на примере, показанном ниже. Мы добавим один текстbox к форме, в которой пользователь может ввести свое имя.

Шаг 1) Первый шаг — перетащить текстbox управление веб-формой из инструментаbox как показано ниже

Текстbox

Ниже показано, как это будет выглядеть в дизайнере форм после ввода текста.box контроль находится в форме

Текстbox

Шаг 2) Как только текстbox был добавлен, вам необходимо изменить свойство ID.

  • Перейдите в окно свойств, щелкнув правой кнопкой мыши по тексту.box контролировать и
  • Выберите недвижимость, затем
  • Измените свойство id текстаbox в txtName.

Текстbox

После внесения вышеуказанных изменений вы увидите следующее:wing вывод.

Выход:-

Текстbox

Список box

Списокbox используется для демонстрации списка элементов в веб-форме. Давайте посмотрим, как мы можем это реализовать, на примере, показанном ниже. Мы добавим список box в форму для хранения некоторых городских локаций.

Шаг 1) Первый шаг — перетащить список box управление веб-формой с помощью инструментаbox как показано ниже

Список box

Шаг 2) Как только вы перетащите списокbox в форму, появится отдельное боковое меню. В этом меню выберите меню «Редактировать элементы».

Список box

Шаг 3) Теперь вам будет представлен диалог box в котором вы можете добавить элементы списка в списокbox.

  1. Нажмите кнопку «Добавить», чтобы добавить элемент списка.
  2. Дайте имя текстовому значению элемента списка — в нашем случае Мумбаи. Повторите шаги 1 и 2, чтобы добавить элементы списка для Мангалора и Хайдарабада.
  3. Нажмите на кнопку ОК

Список box

Шаг 4) Перейдите в окно свойств и измените значение свойства ID элемента управления на lstLocation.

Список box

После внесения вышеуказанных изменений вы увидите следующее:wing выходной

Выход:-

Список box

Из вывода вы можете ясно видеть, что списокboxes был добавлен в форму.

RadioButton

Радиокнопка используется для отображения списка элементов, из которых пользователь может выбрать один. Давайте посмотрим, как мы можем это реализовать, на примере, показанном ниже. Мы добавим переключатель для мужского/женского варианта.

Шаг 1) Первый шаг — перетащить элемент управления «переключатель» на веб-форму из инструмента.box. (см. изображение ниже). Обязательно добавьте два переключателя: один для параметра «Мужской», а другой — для «Женский».

RadioButton

Шаг 2) После добавления радиокнопки измените свойство text.

  • Перейдите в окно свойств, нажав на кнопку «Радиокнопка».
  • Измените текстовое свойство переключателя на «Мужской».
  • Повторите тот же шаг, чтобы изменить его на «Женский».
  • Кроме того, измените свойства ID соответствующих элементов управления на rdMale и rdFemale.

RadioButton

После внесения вышеуказанных изменений вы увидите следующее:wing выходной

Выход:-

RadioButton

Из вывода ясно видно, что переключатель был добавлен в форму.

Посмотритеbox

Проверкаbox используется для предоставления списка опций, из которых пользователь может выбрать несколько вариантов. Давайте посмотрим, как мы можем это реализовать, на примере, показанном ниже. Мы добавим 2 проверкиboxes в наши веб-формы. Эти проверкиboxes предоставит пользователю возможность узнать, хотят ли они учиться C# или ASP.Net.

Шаг 1) Первый шаг — перетащить чекbox управление веб-формой из инструментаbox как показано ниже

Посмотритеbox

Шаг 2) Как только чекboxдобавлены, измените чекbox id для свойства «chkASP».

  • Перейдите в окно свойств, нажав на кнопку «Проверить».box контролировать.
  • Измените свойства идентификатора соответствующих элементов управления на «chkC» и «chkASP».

Также измените текстовое свойство Checkbox управление на «C#». Сделайте то же самое для другого чека.box control и измените его на «ASP.Net».

  1. Измените свойство ID чекаbox в «chkASP»

Посмотритеbox

  1. Измените свойство ID чекаbox в chkC

Посмотритеbox

Посмотритеbox

После внесения вышеуказанных изменений вы увидите следующее:wing выходной

Выход:-

Посмотритеbox

Из вывода вы можете ясно видеть, что Checkboxes был добавлен в форму.

Button

Кнопка используется, чтобы позволить пользователю нажать на кнопку, которая затем начнет обработку формы. Давайте посмотрим, как мы можем реализовать это на нашем текущем примере, как показано ниже. Мы добавим простую кнопку под названием «Отправить». Это будет использоваться для отправки всей информации в форме.

Шаг 1) Первый шаг — перетащить элемент управления «Кнопка» на веб-форму из инструмента.box как показано ниже

Button

Шаг 2) После добавления кнопки перейдите в окно свойств, щелкнув элемент управления «Кнопка». Измените свойство text элемента управления «Кнопка» на «Отправить». Также измените свойство ID кнопки на «btnSubmit».

Button

После внесения вышеуказанных изменений вы увидите следующее:wing выходной

Выход:-

Button

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

Обработчик событий в ASP.Net

При работе с веб-формой вы можете добавлять события в элементы управления. Событие – это то, что происходит при выполнении действия. Вероятно, наиболее распространенным действием является нажатие кнопки в форме.

В веб-формах вы можете добавить код в соответствующий файл aspx.cs. Этот код можно использовать для выполнения определенных действий при нажатии кнопки на форме. Обычно это наиболее распространенное событие в веб-формах. Давайте посмотрим, как мы можем этого добиться.

Мы собираемся сделать это просто. Просто добавьте событие в элемент управления «Кнопка», чтобы отобразить имя, введенное пользователем. Давайте выполним следующие шаги, чтобы добиться этого.

Шаг 1) Сначала тебе нужно double-нажмите кнопку в веб-форме. Это вызовет код события для кнопки в Visual Studio.

Обработчик событий в ASP.Net

Событие btnSubmit_Click автоматически добавляется Visual Studio когда вы double нажмите кнопку в дизайнере веб-форм.

Шаг 2) Давайте теперь добавим код в событие отправки для отображения текста имени.box значение и местоположение, выбранное пользователем.

Обработчик событий в 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. Приведенная выше строка кода делает самую простую вещь. Он принимает значение текста имени.box control и отправляет его клиенту через объект Response. Итак, если вы хотите ввести строку «Guru99» в текст имени box, значение txtName. Текст будет «Guru99».
  2. Следующая строка кода принимает выбранное значение списка.box через свойство lstLocation.SelectedItem.text. Затем он записывает это значение через метод Response.Write обратно клиенту.
  3. Наконец, мы делаем все элементы управления формы невидимыми. Если мы этого не сделаем, все элементы управления, а также значения наших ответов будут отображены.yed вместе. Обычно, когда человек вводит всю информацию в форму, такую ​​как имя, местоположение, пол и т. д., следующая страница, отображаемая пользователю, должна содержать только ту информацию, которая не была введена. Пользователь не хочет снова видеть элементы управления именем, полом и местоположением. Но ASP.Net этого не знает, и, следовательно, по умолчанию он снова покажет все элементы управления, когда пользователь нажмет кнопку «Отправить». Следовательно, нам нужно написать код, чтобы гарантировать, что все элементы управления скрыты, чтобы пользователь мог видеть только желаемый результат.

После того, как вы внесете вышеуказанные изменения, вы увидите следующее:wing выходной

Выход:-

Обработчик событий в ASP.Net

На экране «Вывод» выполните следующие действия.wing шага

  1. В тексте имени укажите имя Guru99.box
  2. Выберите местоположение в спискеbox Бангалора
  3. Нажмите кнопку «Отправить»

Обработчик событий в ASP.Net

Как только вы это сделаете, вы увидите «Guru99» и местоположение «Бангалор».yed на странице.

Итого

  • In ASP.Net, вы можете добавить в форму стандартные элементы управления, такие как метки, текстboxес, списокboxes и др.
  • С каждым элементом управления может быть связано событие. Наиболее распространенным событием является событие нажатия кнопки. Это используется, когда информацию необходимо отправить на веб-сервер.