ASP.NET-kontroller: TjekBox, Radioknap, ListeBox

Tilføjelse af ASP.Net-kontroller til webformularer

ASP.Net har muligheden for at tilføje kontrolelementer til en formular, såsom tekstbokse og etiketter.

Lad os se på de andre tilgængelige kontrolelementer til webformularer og se nogle af deres almindelige egenskaber.

I vores eksempel vil vi oprette en formular, som vil have følgende funktionalitet.

1. Brugerens mulighed for at indtaste sit navn.
2. En mulighed for at vælge den by, hvor brugeren bor.
3. Brugerens mulighed for at indtaste en mulighed for kønnet.
4. 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.

Sådan åbner du 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 kontrolelementer. Et almindeligt eksempel er, hvor en etiket tilføjes sammen med tekstbokskontrollen. Etiketten giver brugeren en indikation af, hvad der forventes at fylde tekstboksen. Lad os se, hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi bruger en etiket kaldet 'navn'. Denne vil blive brugt sammen med tekstbokskontrollerne, som vil blive tilføjet i et senere afsnit.

Trin 1) Det første trin er at trække 'etiket'-kontrollen over på webformularen fra værktøjskassen som vist nedenfor.

Trin 2) Når etiketten er tilføjet, skal du følge de følgende trin.

1. Gå til egenskabsvinduet ved at højreklikke på etiketkontrollen.
2. Vælg menupunktet Egenskaber.

Trin 3) I egenskabsvinduet skal du ændre værdien af ​​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 over i webformularen fra værktøjskassen, som vist nedenfor.

Nedenfor ses, hvordan dette ville se ud i formulardesigneren, når tekstbokskontrollen 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å tekstbokskontrollen, og
• Vælg Egenskaber, og derefter
• Skift ID-egenskaben i tekstfeltet 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 listebokskontrollen over i 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.

1. Klik på knappen Tilføj for at tilføje et listeelement.
2. Giv et navn til tekstværdien for listeelementet – i vores tilfælde Mumbai. Gentag trin 1 og 2 for at tilføje listeelementer for Mangalore og Hyderabad.
3. Klik på OK-knappen.

Trin 4) Gå til egenskabsvinduet, og skift ID-egenskabsværdien for kontrolelementet til lstLocation.

Når du har foretaget ovenstående ændringer, vil du se følgende output.

Produktion:-

Ud fra outputtet kan du tydeligt se, at listeboksen 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'-kontrollen over på webformularen fra værktøjskassen (se billedet nedenfor). Sørg for at tilføje 2 radioknapper, en til muligheden 'Mand' og en til 'Kvinde'.

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:-

Ud fra outputtet kan du tydeligt se, at alternativknappen blev tilføjet til formularen.

Afkrydsningsfelt

Et afkrydsningsfelt bruges til at vise en liste over muligheder, hvor brugeren kan vælge flere muligheder. 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 en mulighed for at vælge, om de vil lære C# eller ASP.Net.

Trin 1) Det første trin er at trække afkrydsningsfeltet over i webformularen fra værktøjskassen, som vist nedenfor.

Trin 2) Når afkrydsningsfelterne er tilføjet, skal du ændre egenskaben for afkrydsningsfelts-ID.

• 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'.

1. Skift ID-egenskaben i afkrydsningsfeltet til 'chkASP'.

2. Skift ID-egenskaben for afkrydsningsfeltet til chkC.

Når du har foretaget ovenstående ændringer, vil du se følgende output.

Produktion:-

Ud 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 starter 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 knappen 'Send'. Denne vil blive brugt til at indsende alle oplysningerne på formularen.

Trin 1) Det første trin er at trække knapkontrollen over på 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.

Hændelsen 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;
}

Code Forklaring:-

1. Ovenstående kodelinje gør det enkleste. Den tager værdien af ​​tekstbokskontrollen Navn og sender den til klienten via Response-objektet. Så hvis du vil indtaste strengen "Guru99” i navnetekstfeltet, ville værdien af ​​txtName.Text være 'Guru99 '.
2. Den næste kodelinje tager den valgte værdi fra listeboksen via egenskaben 'lstLocation.SelectedItem.Text'. Den skriver derefter denne værdi tilbage til klienten via Response.Write-metoden.
3. Endelig gør vi alle kontrolelementerne på formularen usynlige. Hvis vi ikke gør dette, vises alle kontrolelementerne plus vores svarværdier sammen. Normalt, når en person indtaster alle oplysningerne på formularen, såsom navn, placering, køn osv., bør den næste side, der vises til brugeren, kun indeholde de oplysninger, der ikke blev indtastet. Brugeren ønsker ikke at se kontrolelementerne for navn, køn og placering igen. Men ASP.Net ved ikke dette, og derfor vil det som standard vise alle kontrolelementerne igen, når brugeren klikker på knappen Send. Derfor skal vi skrive kode for at sikre, at alle kontrolelementerne er skjult, så brugeren kun ser det ønskede output.

Når du har foretaget ovenstående ændringer, vil du se følgende output.

Produktion:-

Udfør følgende trin på skærmbilledet Output:

1. Giv et navn på Guru99 i navnetekstfeltet.
2. Vælg en placering i Bangalores liste.
3. Klik på knappen Send.

Når du har gjort dette, vil du se'Guru99' og placeringen 'Bangalore' vises på siden.

Ofte Stillede Spørgsmål