Ovládací prvky ASP.NET: ZkontrolujteBox, RadioButton, SeznamBox, Textové pole, Štítek
Jacob Lee
Přidání ovládacích prvků ASP.Net do webových formulářů
ASP.Net má schopnost přidávat ovládací prvky do formuláře, jako jsou textová pole a štítky.
Podívejme se na další ovládací prvky dostupné pro webové formuláře a podívejme se na některé jejich společné vlastnosti.
V našem příkladu vytvoříme jeden formulář, který bude mít následující funkce.
- Možnost uživatele zadat své jméno.
- Možnost výběru města, ve kterém má uživatel bydliště
- Možnost uživatele zadat volbu pro pohlaví.
- Možnost výběru kurzu, který se chce uživatel naučit. Na výběr bude obojí C# a ASP.Net
Podívejme se podrobně na každý ovládací prvek. Přidejme je k sestavení formuláře s výše zmíněnou funkčností.
Krok 1) Prvním krokem je otevřít Návrhář formulářů pro webový formulář Demo. Jakmile to uděláte, budete moci přetahovat ovládací prvky z panelu nástrojů do Webový formulář.
Chcete-li otevřít webový formulář aplikace Designer,
- Klepněte pravým tlačítkem myši na soubor Demo.aspx v Průzkumníku řešení a
- Zvolte možnost nabídky Zobrazit návrháře.
Jakmile provedete výše uvedený krok, budete moci vidět svého Návrháře formulářů, jak je znázorněno níže.
Nyní začněme přidávat naše ovládací prvky jeden po druhém
Ovládání štítků
Ovládací prvek štítku se používá k zobrazení textu nebo zprávy uživateli ve formuláři. Ovládací prvek štítku se normálně používá spolu s dalšími ovládacími prvky. Běžným příkladem je přidání štítku spolu s ovládacím prvkem textového pole. Štítek informuje uživatele o tom, co se očekává, že vyplní textové pole. Podívejme se, jak to můžeme implementovat na příkladu uvedeném níže. Použijeme štítek s názvem 'jméno'. To bude použito ve spojení s ovládacími prvky textového pole, které budou přidány v pozdější části.
Krok 1) Prvním krokem je přetažení ovládacího prvku 'label' do webového formuláře ze sady nástrojů, jak je znázorněno níže.
Krok 2) Po přidání štítku postupujte podle následujících kroků.
- Přejděte do okna vlastností kliknutím pravým tlačítkem na ovládací prvek štítku
- Vyberte možnost nabídky Vlastnosti
Krok 3) V okně vlastností změňte název vlastnosti Text na Název
Podobně také změňte hodnotu vlastnosti ID ovládacího prvku na lblName. Zadáním smysluplného ID k ovládacím prvkům je snazší k nim přistupovat během fáze kódování. To je zobrazeno níže.
Jakmile provedete výše uvedené změny, uvidíte následující výstup
Výstup:-
Uvidíte, že se na webovém formuláři zobrazí popisek Name.
Textové pole
Textové pole se používá k tomu, aby uživatel mohl zadat nějaký text do webové formuláře aplikace. Podívejme se, jak to můžeme implementovat na příkladu uvedeném níže. Do formuláře přidáme jedno textové pole, do kterého může uživatel zadat své jméno.
Krok 1) Prvním krokem je přetažení ovládacího prvku textového pole do webového formuláře z panelu nástrojů, jak je znázorněno níže
Níže je uvedeno, jak by to vypadalo v návrháři formulářů, jakmile bude ovládací prvek textové pole ve formuláři
Krok 2) Jakmile je textové pole přidáno, musíte změnit vlastnost ID.
- Přejděte do okna vlastností kliknutím pravým tlačítkem myši na ovládací prvek Textbox a
- Poté vyberte vlastnosti
- Změňte vlastnost id textového pole na txtName.
Jakmile provedete výše uvedené změny, uvidíte následující výstup.
Výstup:-
Seznam
Seznam se používá k zobrazení seznamu položek na webovém formuláři. Podívejme se, jak to můžeme implementovat na příkladu uvedeném níže. Do formuláře přidáme seznam pro uložení některých městských lokalit.
Krok 1) Prvním krokem je přetažení ovládacího prvku seznamu na webový formulář ze sady nástrojů, jak je znázorněno níže
Krok 2) Jakmile přetáhnete seznam do formuláře, zobrazí se samostatná postranní nabídka. V této nabídce vyberte nabídku 'Upravit položky'.
Krok 3) Nyní se vám zobrazí dialogové okno, ve kterém můžete přidat položky seznamu do seznamu.
- Kliknutím na tlačítko Přidat přidáte položku seznamu.
- Zadejte název textové hodnoty položky seznamu – v našem případě Mumbai. Opakováním kroků 1 a 2 přidejte položky seznamu pro Mangalore a Hajdarábád.
- Klepněte na tlačítko OK
Krok 4) Přejděte do okna vlastností a změňte hodnotu vlastnosti ID ovládacího prvku na lstLocation.
Jakmile provedete výše uvedené změny, uvidíte následující výstup
Výstup:-
Z výstupu je jasně vidět, že do formuláře byly přidány seznamy.
RadioButton
Přepínač se používá k zobrazení seznamu položek, ze kterých si uživatel může jednu vybrat. Podívejme se, jak to můžeme implementovat na příkladu uvedeném níže. Přidáme přepínač pro volbu muž/žena.
Krok 1) Prvním krokem je přetažení ovládacího prvku 'radiobutton' do webového formuláře z panelu nástrojů. (viz obrázek níže). Nezapomeňte přidat 2 přepínače, jeden pro možnost „Muž“ a druhý pro „Žena“.
Krok 2) Po přidání přepínacího tlačítka změňte vlastnost 'text'.
- Přejděte do okna vlastností kliknutím na 'Radiobutton control'.
- Změňte vlastnost textu přepínače na 'Muž'.
- Opakujte stejný krok, abyste jej změnili na „Žena“.
- Změňte také vlastnosti ID příslušných ovládacích prvků na rdMale a rdFemale.
Jakmile provedete výše uvedené změny, uvidíte následující výstup
Výstup:-
Z výstupu je jasně vidět, že byl do formuláře přidán přepínač
Checkbox
Zaškrtávací políčko se používá k poskytnutí seznamu možností, ve kterých si uživatel může vybrat více možností. Podívejme se, jak to můžeme implementovat na příkladu uvedeném níže. Do našich webových formulářů přidáme 2 zaškrtávací políčka. Tato zaškrtávací políčka poskytnou uživateli možnost, zda se chce učit C# nebo ASP.Net.
Krok 1) Prvním krokem je přetažení ovládacího prvku zaškrtávacího políčka do webového formuláře z panelu nástrojů, jak je znázorněno níže
Krok 2) Po přidání zaškrtávacích políček změňte vlastnost id zaškrtávacího políčka na 'chkASP'.
- Přejděte do okna vlastností kliknutím na ovládací prvek Checkbox.
- Změňte vlastnosti ID příslušných ovládacích prvků na „chkC“ a „chkASP“.
Změňte také vlastnost text ovládacího prvku Checkbox na 'C#'. Udělejte totéž pro druhý ovládací prvek Checkbox a změňte jej na 'ASP.Net'.
- Změňte vlastnost ID zaškrtávacího políčka na „chkASP“
- Změňte vlastnost ID zaškrtávacího políčka na chkC
Jakmile provedete výše uvedené změny, uvidíte následující výstup
Výstup:-
Z výstupu je jasně vidět, že do formuláře byla přidána zaškrtávací políčka.
Tlačítko
Tlačítko se používá k tomu, aby uživatel mohl kliknout na tlačítko, které pak spustí zpracování formuláře. Podívejme se, jak to můžeme implementovat pomocí našeho aktuálního příkladu, jak je uvedeno níže. Přidáme jednoduché tlačítko s názvem „Odeslat“. Ten bude použit k odeslání všech informací ve formuláři.
Krok 1) Prvním krokem je přetažení ovládacího prvku tlačítka do webového formuláře ze sady nástrojů, jak je znázorněno níže
Krok 2) Po přidání tlačítka přejděte do okna vlastností kliknutím na ovládací prvek tlačítka. Změňte vlastnost text ovládacího prvku tlačítka na Odeslat. Také změňte vlastnost ID tlačítka na 'btnSubmit'.
Jakmile provedete výše uvedené změny, uvidíte následující výstup
Výstup:-
Z výstupu je jasně vidět, že tlačítko bylo přidáno do formuláře.
Event Handler v ASP.Net
Při práci s webovým formulářem můžete do ovládacích prvků přidat události. Událost je něco, co se stane, když je provedena nějaká akce. Asi nejčastější akcí je kliknutí na tlačítko na formuláři.
Ve webových formulářích můžete přidat kód do odpovídajícího souboru aspx.cs. Tento kód lze použít k provedení určitých akcí při stisknutí tlačítka na formuláři. Toto je obecně nejběžnější událost ve webových formulářích. Pojďme se podívat, jak toho můžeme dosáhnout.
Uděláme to jednoduché. Stačí přidat událost do ovládacího tlačítka, aby se zobrazil název zadaný uživatelem. Abyste toho dosáhli, postupujte podle níže uvedených kroků.
Krok 1) Nejprve musíte dvakrát kliknout na tlačítko ve webovém formuláři. Tím se zobrazí kód události pro tlačítko v sadě Visual Studio.
Událost btnSubmit_Click automaticky přidá Visual Studio, když dvakrát kliknete na tlačítko v návrháři webových formulářů.
Krok 2) Nyní přidejte kód do události odeslání, aby se zobrazila hodnota textového pole názvu a umístění zvolené uživatelem.
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;
}
Vysvětlení kódu:-
- Výše uvedený řádek kódu dělá tu nejjednodušší věc. Převezme hodnotu ovládacího prvku textového pole Name a odešle ji klientovi prostřednictvím objektu Response. Pokud tedy chcete do textového pole názvu zadat řetězec „Guru99“, hodnotu txtName. Text by byl 'Guru99'.
- Další řádek kódu převezme vybranou hodnotu seznamu prostřednictvím vlastnosti 'lstLocation.SelectedItem.text'. Tuto hodnotu pak zapíše pomocí metody Response.Write zpět klientovi.
- Nakonec všechny ovládací prvky na formuláři zneviditelníme. Pokud to neuděláme, všechny ovládací prvky plus naše hodnoty odpovědí se zobrazí společně. Normálně, když osoba zadá všechny informace do formuláře, jako je jméno, místo, pohlaví atd. Uživateli se zobrazí další stránka by měl obsahovat pouze informace, které nebyly zadány. Uživatel nechce znovu vidět ovládací prvky Jméno, Pohlaví a umístění. Ale ASP.Net to neví, a proto ve výchozím nastavení znovu zobrazí všechny ovládací prvky, když uživatel klikne na tlačítko Odeslat. Proto musíme napsat kód, abychom zajistili, že všechny ovládací prvky budou skryté, aby uživatel viděl pouze požadovaný výstup.
Jakmile provedete výše uvedené změny, uvidíte následující výstup
Výstup:-
Na obrazovce Výstup proveďte následující kroky
- Do textového pole jména zadejte jméno Guru99
- Vyberte umístění v seznamu Bangalore
- Klikněte na tlačítko Odeslat
Jakmile to uděláte, uvidíte „Guru99“ a na stránce se zobrazí umístění „Bangalore“.
Shrnutí
- In ASP.Net, můžete do formuláře přidat standardní ovládací prvky, jako jsou štítky, textová pole, seznamy atd.
- Každý ovládací prvek může mít přidruženou událost. Nejběžnější událostí je událost kliknutí na tlačítko. To se používá, když je třeba odeslat informace na webový server.
