ASP.NET-kontroller: TjekBox, Radioknap, ListeBox, Tekstboks, Etiket
Jacob Lee
Tilføjelse af ASP.Net-kontroller til webformularer
ASP.Net har mulighed for at tilføje kontroller til en formular, såsom tekstbokse og etiketter.
Lad os se på de andre kontrolelementer, der er tilgængelige for webformularer, og se nogle af deres fælles egenskaber.
I vores eksempel vil vi oprette en formular, som vil have følgende funktionalitet.
- Brugerens mulighed for at indtaste sit navn.
- En mulighed for at vælge den by, hvor brugeren bor
- Brugerens mulighed for at indtaste en mulighed for kønnet.
- En mulighed for at vælge et kursus, som brugeren ønsker at lære. Der vil være valg for begge C# og ASP.Net
Lad os se på hver kontrol i detaljer. Lad os tilføje dem for at bygge formularen med ovennævnte funktionalitet.
Trin 1) Det første trin er at åbne Forms Designer til Demo-webformularen. Når du har gjort dette, vil du være i stand til at trække kontroller fra værktøjskassen til Webformular.
For at åbne Designer-webformularen,
- Højreklik på filen Demo.aspx i Solution Explorer og
- Vælg menupunktet View Designer.
Når du har udført ovenstående trin, vil du være i stand til at se din formulardesigner som vist nedenfor.
Lad os nu begynde at tilføje vores kontroller én efter én
Etiketkontrol
Etiketkontrollen bruges til at vise en tekst eller en besked til brugeren på formularen. Etiketkontrollen bruges normalt sammen med andre kontroller. Almindelige eksempler er, hvor en etiket tilføjes sammen med tekstbokskontrollen. Etiketten giver en indikation til brugeren om, hvad der forventes at fylde i tekstboksen. Lad os se, hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi bruger en etiket kaldet 'navn'. Dette vil blive brugt sammen med tekstbokskontrollerne, som vil blive tilføjet i det senere afsnit.
Trin 1) Det første trin er at trække 'etiket'-kontrollen til webformularen fra værktøjskassen som vist nedenfor.
Trin 2) Når etiketten er tilføjet, skal du følge de følgende trin.
- Gå til egenskabsvinduet ved at højreklikke på etiketkontrollen
- Vælg menupunktet Egenskaber
Trin 3) Fra egenskabsvinduet skal du ændre navnet på egenskaben Tekst til Navn
På samme måde skal du også ændre værdien af id-egenskaben for kontrolelementet til lblName. Ved at angive et meningsfuldt ID til kontroller bliver det lettere at få adgang til dem under kodningsfasen. Dette er vist nedenfor.
Når du har foretaget ovenstående ændringer, vil du se følgende output
Produktion:-
Du vil se, at navneetiketten vises på webformularen.
tekstboks
En tekstboks bruges til at give en bruger mulighed for at indtaste noget tekst i webformularapplikationen. Lad os se, hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi tilføjer én tekstboks til formularen, hvori brugeren kan indtaste sit navn.
Trin 1) Det første trin er at trække tekstbokskontrollen til webformularen fra værktøjskassen som vist nedenfor
Nedenfor er, hvordan dette ville se ud i formulardesigneren, når tekstbokskontrolelementet er på formularen
Trin 2) Når tekstboksen er blevet tilføjet, skal du ændre ID-egenskaben.
- Gå til egenskabsvinduet ved at højreklikke på tekstbokskontrolelementet og
- Vælg derefter egenskaber
- Skift id-egenskaben for tekstboksen til txtName.
Når du har foretaget ovenstående ændringer, ser du følgende output.
Produktion:-
Listeboks
En listeboks bruges til at vise en liste over elementer på webformularen. Lad os se, hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi tilføjer en listeboks til formularen for at gemme nogle byplaceringer.
Trin 1) Det første trin er at trække listeboksens kontrol til webformularen fra værktøjskassen som vist nedenfor
Trin 2) Når du trækker listeboksen til formularen, vises en separat sidemenu. I denne menu skal du vælge menuen 'Rediger elementer'.
Trin 3) Du vil nu blive præsenteret for en dialogboks, hvor du kan tilføje listeelementerne til listeboksen.
- Klik på knappen Tilføj for at tilføje et listeelement.
- Giv et navn til tekstværdien af listeelementet – I vores tilfælde Mumbai. Gentag trin 1 og 2 for at tilføje listeelementer til Mangalore og Hyderabad.
- Klik på OK-knappen
Trin 4) Gå til egenskabsvinduet og skift kontrollens ID-egenskabsværdi til lstLocation.
Når du har foretaget ovenstående ændringer, vil du se følgende output
Produktion:-
Fra outputtet kan du tydeligt se, at Listboxes blev tilføjet til formularen.
Radio knap
En alternativknap bruges til at vise en liste over elementer, som brugeren kan vælge en. Lad os se, hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi tilføjer en alternativknap for en mandlig/kvinde mulighed.
Trin 1) Det første trin er at trække radioknappen til webformularen fra værktøjskassen. (se billedet nedenfor). Sørg for at tilføje 2 alternativknapper, en for muligheden for "Mand" og den anden for "Female".
Trin 2) Når radioknappen er blevet tilføjet, skal du ændre egenskaben 'tekst'.
- Gå til egenskabsvinduet ved at klikke på 'Radiobutton control'.
- Skift tekstegenskaben for radioknappen til 'Mand'.
- Gentag det samme trin for at ændre det til 'Kvinde'.
- Skift også ID-egenskaberne for de respektive kontroller til rdMale og rdFemale.
Når du har foretaget ovenstående ændringer, vil du se følgende output
Produktion:-
Fra outputtet kan du tydeligt se, at alternativknappen blev tilføjet til formularen
Afkrydsningsfelt
Et afkrydsningsfelt bruges til at give en liste over muligheder, hvor brugeren kan vælge flere valg. Lad os se, hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi tilføjer 2 afkrydsningsfelter til vores webformularer. Disse afkrydsningsfelter giver brugeren mulighed for, om de vil lære C# eller ASP.Net.
Trin 1) Det første trin er at trække afkrydsningsfeltet til webformularen fra værktøjskassen som vist nedenfor
Trin 2) Når afkrydsningsfelterne er blevet tilføjet, skal du ændre afkrydsningsfeltets id-egenskab til 'chkASP'.
- Gå til egenskabsvinduet ved at klikke på afkrydsningsfeltet.
- Skift ID-egenskaberne for de respektive kontroller til 'chkC' og 'chkASP'.
Skift også tekstegenskaben for kontrolboksen til 'C#'. Gør det samme for den anden Checkbox-kontrol, og skift den til 'ASP.Net'.
- Skift ID-egenskaben for afkrydsningsfeltet til 'chkASP'
- Skift ID-egenskaben for afkrydsningsfeltet til chkC
Når du har foretaget ovenstående ændringer, vil du se følgende output
Produktion:-
Fra outputtet kan du tydeligt se, at afkrydsningsfelterne blev tilføjet til formularen.
Button
En knap bruges til at give brugeren mulighed for at klikke på en knap, som derefter vil starte behandlingen af formularen. Lad os se, hvordan vi kan implementere dette med vores nuværende eksempel som vist nedenfor. Vi tilføjer en simpel knap kaldet 'Send'-knap. Dette vil blive brugt til at indsende alle oplysningerne på formularen.
Trin 1) Det første trin er at trække knapkontrollen til webformularen fra værktøjskassen som vist nedenfor
Trin 2) Når knappen er blevet tilføjet, skal du gå til egenskabsvinduet ved at klikke på knapkontrollen. Skift tekstegenskaben for knapkontrollen til Send. Skift også ID-egenskaben for knappen til 'btnSubmit'.
Når du har foretaget ovenstående ændringer, vil du se følgende output
Produktion:-
Fra outputtet kan du tydeligt se, at knappen blev tilføjet til formularen.
Event Handler i ASP.Net
Når du arbejder med en webformular, kan du tilføje begivenheder til kontrolelementer. En begivenhed er noget, der sker, når en handling udføres. Den mest almindelige handling er nok at klikke på en knap på en formular.
I webformularer kan du tilføje kode til den tilsvarende aspx.cs-fil. Denne kode kan bruges til at udføre visse handlinger, når der trykkes på en knap på formularen. Dette er generelt den mest almindelige begivenhed i webformularer. Lad os se, hvordan vi kan opnå dette.
Vi vil gøre dette enkelt. Du skal blot tilføje en begivenhed til knapkontrollen for at vise det navn, som blev indtastet af brugeren. Lad os følge nedenstående trin for at opnå dette.
Trin 1) Først skal du dobbeltklikke på knappen på webformularen. Dette vil hente hændelseskoden for knappen i Visual Studio.
Begivenheden btnSubmit_Click tilføjes automatisk af Visual Studio, når du dobbeltklikker på knappen i webformulardesigneren.
Trin 2) Lad os nu tilføje kode til indsend-begivenheden for at vise navnets tekstboksværdi og den placering, som brugeren har valgt.
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;
}
Kodeforklaring:-
- Ovenstående kodelinje gør det enkleste. Det tager værdien af Name textbox-kontrollen og sender den til klienten via Response-objektet. Så hvis du vil indtaste strengen "Guru99" i navnetekstboksen, værdien af txtName. En tekst ville være 'Guru99'.
- Den næste kodelinje tager den valgte værdi af listeboksen via egenskaben 'lstLocation.SelectedItem.text'. Den skriver derefter denne værdi via Response.Write metoden tilbage til klienten.
- Til sidst gør vi alle kontrollerne på formularen som usynlige. Hvis vi ikke gør dette, vil alle kontroller plus vores svarværdier blive vist sammen. Normalt, når en person indtaster alle oplysningerne på formularen, såsom navn, placering, køn osv. Den næste side vises til brugeren skal kun have de oplysninger, der ikke er indtastet. Brugeren ønsker ikke at se navn, køn, placeringskontrol igen. Men ASP.Net ved ikke dette, og derfor vil det som standard igen vise alle kontroller, når brugeren klikker på knappen Send. Derfor skal vi skrive kode for at sikre, at alle kontroller er skjult, så brugeren bare ser det ønskede output.
Når du foretager ovenstående ændringer, vil du se følgende output
Produktion:-
Udfør følgende trin på skærmbilledet Output
- Giv et navn på Guru99 i navnetekstboksen
- Vælg en placering i listeboksen i Bangalore
- Klik på knappen Send
Når du har gjort dette, vil du se 'Guru99' og placeringen 'Bangalore' vises på siden.
Resumé
- In ASP.Net, kan du tilføje standardkontrollerne til en formular, såsom etiketter, tekstbokse, listebokse osv.
- Hver kontrol kan have en begivenhed knyttet til sig. Den mest almindelige hændelse er knap-klik-hændelsen. Dette bruges, når information skal sendes til webserveren.
