АСП.НЕТ контроле: ЦхецкБок, РадиоБуттон, ЛистБок, Тектбок, Лабел

У овом водичу ћете научити-

Додавање контрола АСП.Нет у веб обрасце

АСП.Нет има могућност додавања контрола у образац, попут текстуалних оквира и ознака.

Погледајмо остале контроле доступне за веб обрасце и видећемо нека од њихових заједничких својстава.

У нашем примеру, креираћемо један образац који ће имати следећу функционалност.

  1. Могућност да корисник унесе своје име.
  2. Опција за избор града у којем корисник борави
  3. Могућност да корисник унесе опцију за пол.
  4. Могућност избора курса који корисник жели да научи. Биће избора и за Ц# и за АСП.Нет

Погледајмо сваку контролу детаљно. Хајде да их додамо за изградњу обрасца са горе наведеном функционалношћу.

Корак 1) Први корак је отварање Формс Десигнер -а за демо веб образац. Када то учините, моћи ћете да превучете контроле из оквира са алаткама у веб образац.

Да бисте отворили Десигнер веб образац,

  • Десним тастером миша кликните на датотеку Демо.аспк у Екплореру решења и
  • Одаберите опцију менија Виев Десигнер.

Када обавите горњи корак, моћи ћете да видите свог дизајнера образаца као што је приказано испод.

Сада почнимо додавати наше контроле једну по једну

Лабел Цонтрол

Контрола налепнице се користи за приказивање текста или поруке кориснику на обрасцу. Контрола ознака се обично користи заједно са другим контролама. Уобичајени примери су где се ознака додаје заједно са контролом оквира за текст. Ознака даје кориснику назнаку шта се очекује да попуни у оквиру за текст. Хајде да видимо како то можемо применити са доњим примером. Користићемо ознаку под именом. Ово ће се користити заједно са контролама оквира за текст, које ће бити додате у каснијем одељку.

Корак 1) Први корак је превлачење контроле „ознака“ на веб образац из оквира са алаткама као што је приказано испод.

Корак 2) Када додате ознаку, следите ове кораке.

  1. Идите у прозор својстава тако што ћете десним тастером миша кликнути на контролу ознаке
  2. Изаберите опцију менија Својства

Корак 3) У прозору својстава промените име својства Текст у Име

Слично, такође промените вредност својства ИД контроле у ​​лблНаме. Одређивањем смисленог ИД -а контролама, постаје им лакши приступ током фазе кодирања. Ово је приказано испод.

Када извршите горенаведене измене, видећете следећи излаз

Излаз:-

Видећете да се ознака Име појављује на веб обрасцу.

Поље за текст

Оквир за текст се користи за омогућавање кориснику да унесе неки текст у апликацију за веб образац. Хајде да видимо како то можемо применити на примеру приказаном испод. У образац ћемо додати једно текстуално поље у које корисник може унети своје име.

Корак 1) Први корак је превлачење контроле оквира за текст у веб образац из оквира са алаткама као што је приказано испод

У наставку је приказано како би ово изгледало у дизајнеру образаца када је контрола Тектбок на обрасцу

Корак 2) Након што додате текстуално поље, морате да промените својство ИД.

  • Идите у прозор својстава десним кликом на контролу Тектбок и
  • Затим изаберите својства
  • Промените својство ид текстуалног оквира у тктНаме.

Када извршите горенаведене промене, видећете следећи излаз.

Излаз:-

Листа кутија

Листбок се користи за приказивање листе ставки на веб обрасцу. Хајде да видимо како то можемо применити на примеру приказаном испод. У образац ћемо додати оквир са листом за складиштење неких градских локација.

Корак 1) Први корак је превлачење контроле оквира са листом на веб образац из оквира са алаткама као што је приказано испод

Корак 2) Када превучете оквир са листом у образац, појавиће се посебан бочни мени. У овом менију изаберите мени „Уреди ставке“.

Корак 3) Сада ће вам се приказати дијалошки оквир у који можете додати ставке листе у оквир са листом.

  1. Кликните на дугме Додај да бисте додали ставку листе.
  2. Дајте назив текстуалној вредности ставке листе - У нашем случају Мумбаи. Поновите кораке 1 и 2 да бисте додали ставке листе за Мангалоре и Хидерабад.
  3. Кликните на дугме У реду

Корак 4) Идите у прозор својстава и промените вредност својства ИД контроле улстЛоцатион.

Када извршите горенаведене измене, видећете следећи излаз

Излаз:-

Из излаза се јасно види да су листе у оквир додане листе.

Радио дугме

Радио дугме се користи за приказ листе ставки од којих корисник може изабрати једну. Хајде да видимо како то можемо применити на примеру приказаном испод. Додаћемо радио дугме за мушку/женску опцију.

Корак 1) Први корак је превлачење контроле радио дугмета на веб образац из оквира са алаткама. (види слику испод). Обавезно додајте 2 дугмета за избор, једно за опцију „Мушки“, а друго за „Женско“.

Корак 2) Када додате радио дугме, промените својство 'тект'.

  • Идите у прозор својстава кликом на „Контрола радио дугмета“.
  • Промените својство текста дугмета за избор у „Мушки“.
  • Поновите исти корак да бисте га променили у „Женско“.
  • Такође промените ИД својства одговарајућих контрола у рдМале и рдФемале.

Када извршите горенаведене измене, видећете следећи излаз

Излаз:-

Из излаза се јасно види да је радио дугме додато у образац

Поље за потврду

Поље за потврду се користи за пружање листе опција у којима корисник може да изабере више опција. Хајде да видимо како то можемо применити са доњим примером. Додаћемо 2 поља за потврду нашим веб обрасцима. Ова поља за потврду ће омогућити кориснику могућност да ли жели да научи Ц# или АСП.Нет.

Корак 1) Први корак је превлачење контроле поља за потврду у веб образац из оквира са алаткама као што је приказано испод

Корак 2) Када додате поља за потврду, промените својство ид поља за потврду у 'цхкАСП'.

  • Идите у прозор својстава кликом на контролну кућицу за потврду.
  • Промените ИД својства одговарајућих контрола у 'цхкЦ' и 'цхкАСП'.

Такође промените својство текста контроле поља за потврду у 'Ц#'. Учините исто за другу контролу поља за потврду и промените је у „АСП.Нет“.

  1. Промените својство ИД поља за потврду у 'цхкАСП'

  1. Промените својство ИД поља за потврду у цхкЦ

Када извршите горенаведене измене, видећете следећи излаз

Излаз:-

Из резултата се јасно види да су поља за потврду додата у образац.

Дугме

Дугме се користи да дозволи кориснику да кликне на дугме које би тада започело обраду обрасца. Хајде да видимо како то можемо применити са нашим тренутним примером као што је приказано испод. Додаћемо једноставно дугме под називом „Пошаљи“. Ово ће се користити за слање свих података на обрасцу.

Корак 1) Први корак је превлачење контроле дугмета на веб образац из палете алата као што је приказано испод

Корак 2) Када је дугме додато, идите у прозор својстава кликом на контролу дугмета. Промените својство текста контроле дугмета на Пошаљи. Такође промените својство ИД дугмета на 'бтнСубмит'.

Када извршите горенаведене измене, видећете следећи излаз

Излаз:-

Из излаза се јасно види да је дугме додато у образац.

Руковалац догађајима у АСП.Нет -у

Када радите са веб обрасцем, можете додавати догађаје у контроле. Догађај је нешто што се дешава када се радња изврши. Вероватно најчешћа радња је клик на дугме на обрасцу.

У веб обрасцима можете додати код у одговарајућу датотеку аспк.цс. Овај код се може користити за извођење одређених радњи када се притисне дугме на обрасцу. Ово је генерално најчешћи догађај у веб обрасцима. Хајде да видимо како то можемо постићи.

Ово ћемо учинити једноставним. Само додајте догађај у контролу дугмета да бисте приказали име које је унео корисник. Пратимо доле наведене кораке да бисмо то постигли.

Корак 1) Прво морате двапут кликнути на дугме на веб обрасцу. Ово ће приказати код догађаја за дугме у Висуал Студио -у.

Догађај бтнСубмит_Цлицк аутоматски додаје Висуал Студио када двапут кликнете на дугме у дизајнеру веб образаца.

Корак 2) Хајде сада да додамо код у догађај за слање да прикаже вредност текстуалног оквира имена и локацију коју је изабрао корисник.

protected void btnSubmit_Click(object sender,EventArgs e) { Response.Write(txtName.Text + '
'); Response.Write(lstLocation.SelectedItem.Text + '
'); lblName.Visible = false; txtName.Visible = false; lstLocation.Visible = false; chkC.Visible = false; chkASP.Visible = false; rdFemale.Visible = false; btnSubmit.Visible = false; }

Шифра Објашњење:-

  1. Горњи ред кода чини најједноставнију ствар. Она узима вредност контроле оквира за текст Наме и шаље је клијенту преко објекта Респонсе. Дакле, ако желите да унесете низ 'Гуру99' у оквир за текст назива, вредност тктНаме. Текст би био „Гуру99“.
  2. Следећи ред кода преузима изабрану вредност оквира са листом преко својства 'лстЛоцатион.СелецтедИтем.тект'. Затим уписује ову вредност путем методе Респонсе.Врите назад клијенту.
  3. Коначно, све контроле на обрасцу чинимо невидљивим. Ако то не учинимо, све контроле и вредности одговора биће приказане заједно.

    Обично, када особа унесе све податке у образац, као што су име, локација, пол итд. Следећа страница приказана кориснику треба да садржи само податке који нису унети. Корисник не жели поново да види контроле имена, пола и локације. Али АСП.Нет то не зна, па ће према заданим поставкама поново приказати све контроле када корисник кликне на дугме Пошаљи. Стога морамо написати код како бисмо били сигурни да су све контроле скривене, тако да корисник само види жељени излаз.

Када унесете горе наведене промене, видећете следећи излаз

Излаз:-

На екрану Оутпут (Излаз) извршите следеће кораке

  1. Дајте име Гуру99 у оквир за текст имена
  2. Изаберите локацију у оквиру листе Бангалоре
  3. Кликните на дугме Субмит

Када то учините, видећете 'Гуру99' и локација 'Бангалоре' се приказује на страници.

Резиме:

  • У АСП.Нет -у можете додати стандардне контроле у ​​образац као што су ознаке, оквири за текст, оквири са листама итд.
  • Свака контрола може имати повезан догађај. Најчешћи догађај је клик на дугме. Ово се користи када је потребно доставити информације веб серверу.