ASP.NET-kontroller: SjekkBox, Radioknapp, ListeBox

Legge til ASP.Net-kontroller til webskjemaer

ASP.Net har muligheten til å legge til kontroller i et skjema, for eksempel tekstbokser og etiketter.

La oss se på de andre kontrollene som er tilgjengelige for nettskjemaer og se noen av deres vanlige egenskaper.

I vårt eksempel vil vi lage ett skjema som vil ha følgende funksjonalitet.

1. Muligheten for brukeren til å skrive inn navnet sitt.
2. Et alternativ for å velge byen der brukeren bor.
3. Muligheten for brukeren til å angi et alternativ for kjønn.
4. Et alternativ for å velge et kurs som brukeren ønsker å lære. Det vil være valg for begge C# og ASP.Net.

La oss se på hver kontroll i detalj. La oss legge dem til for å bygge skjemaet med den ovennevnte funksjonaliteten.

Trinn 1) Det første trinnet er å åpne Forms Designer for Demo-nettskjemaet. Når du har gjort dette, vil du kunne dra kontroller fra verktøykassen til Nettskjema.

Slik åpner du Designer-nettskjemaet:

• Høyreklikk på Demo.aspx-filen i løsningsutforskeren, og
• Velg menyvalget Vis designer.

Når du har utført trinnet ovenfor, vil du kunne se skjemadesigneren som vist nedenfor.

La oss nå begynne å legge til kontrollene våre én etter én.

Etikettkontroll

Etikettkontrollen brukes til å vise en tekst eller en melding til brukeren på skjemaet. Etikettkontrollen brukes vanligvis sammen med andre kontroller. Et vanlig eksempel er der en etikett legges til sammen med tekstbokskontrollen. Etiketten gir brukeren en indikasjon på hva som forventes å fylles opp i tekstboksen. La oss se hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi vil bruke en etikett kalt «navn». Denne vil bli brukt sammen med tekstbokskontrollene, som vil bli lagt til i den senere delen.

Trinn 1) Det første trinnet er å dra «etikett»-kontrollen over på nettskjemaet fra verktøykassen, som vist nedenfor.

Trinn 2) Når etiketten er lagt til, følger du trinnene nedenfor.

1. Gå til egenskapsvinduet ved å høyreklikke på etikettkontrollen.
2. Velg menyalternativet Egenskaper.

Trinn 3) Endre verdien for Tekst-egenskapen til Navn fra egenskapsvinduet.

På samme måte endrer du også ID-egenskapsverdien til kontrollen til lblName. Ved å spesifisere en meningsfull ID til kontroller, blir det lettere å få tilgang til dem under kodingsfasen. Dette er vist nedenfor.

Når du har gjort endringene ovenfor, vil du se følgende utdata.

Produksjon:-

Du vil se at navneetiketten vises på nettskjemaet.

Tekstboks

En tekstboks brukes for å tillate en bruker å skrive inn litt tekst i webskjemaapplikasjonen. La oss se hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi vil legge til én tekstboks i skjemaet der brukeren kan skrive inn navnet sitt.

Trinn 1) Det første trinnet er å dra tekstbokskontrollen over på webskjemaet fra verktøykassen, som vist nedenfor.

Nedenfor ser du hvordan dette vil se ut i skjemautformeren når tekstbokskontrollen er på skjemaet.

Trinn 2) Når tekstboksen er lagt til, må du endre ID-egenskapen.

• Gå til egenskapsvinduet ved å høyreklikke på tekstbokskontrollen, og
• Velg Egenskaper, deretter
• Endre ID-egenskapen til tekstboksen til txtName.

Når du har gjort endringene ovenfor, ser du følgende utgang.

Produksjon:-

Listeboks

En listeboks brukes til å vise en liste over elementer på nettskjemaet. La oss se hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi vil legge til en listeboks i skjemaet for å lagre noen byplasseringer.

Trinn 1) Det første trinnet er å dra listebokskontrollen over på webskjemaet fra verktøykassen, som vist nedenfor.

Trinn 2) Når du drar listeboksen til skjemaet, vil en egen sidemeny vises. I denne menyen velger du menyen «Rediger elementer».

Trinn 3) Du vil nå bli presentert med en dialogboks der du kan legge til listeelementene i listeboksen.

1. Klikk på Legg til-knappen for å legge til et listeelement.
2. Gi et navn for tekstverdien til listeelementet – i vårt tilfelle Mumbai. Gjenta trinn 1 og 2 for å legge til listeelementer for Mangalore og Hyderabad.
3. Klikk på OK-knappen.

Trinn 4) Gå til egenskapsvinduet og endre ID-egenskapsverdien for kontrollen til lstLocation.

Når du har gjort endringene ovenfor, vil du se følgende utdata.

Produksjon:-

Fra utdataene kan du tydelig se at listeboksen ble lagt til i skjemaet.

Radioknapp

En radioknapp brukes til å vise en liste over elementer som brukeren kan velge fra. La oss se hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi vil legge til en alternativknapp for et mannlig/kvinnealternativ.

Trinn 1) Det første trinnet er å dra «radioknapp»-kontrollen over på nettskjemaet fra verktøykassen (se bildet nedenfor). Sørg for å legge til to radioknapper, én for alternativet «Mann» og den andre for «Kvinne».

Trinn 2) Når radioknappen er lagt til, endrer du "tekst"-egenskapen.

• Gå til egenskapsvinduet ved å klikke på 'Radioknappkontroll'.
• Endre tekstegenskapen til radioknappen til "Mann".
• Gjenta det samme trinnet for å endre det til «Kvinne».
• Endre også ID-egenskapene til de respektive kontrollene til rdMale og rdFemale.

Når du har gjort endringene ovenfor, vil du se følgende utdata.

Produksjon:-

Fra utdataene kan du tydelig se at alternativknappen ble lagt til i skjemaet.

Avmerkingsboks

En avmerkingsboks brukes til å gi en liste over alternativer der brukeren kan velge flere alternativer. La oss se hvordan vi kan implementere dette med et eksempel vist nedenfor. Vi legger til to avmerkingsbokser i nettskjemaene våre. Disse avmerkingsboksene gir brukeren et alternativ om de vil lære C# eller ASP.Net.

Trinn 1) Det første trinnet er å dra avmerkingsbokskontrollen over på nettskjemaet fra verktøykassen, som vist nedenfor.

Trinn 2) Når avmerkingsboksene er lagt til, endrer du egenskapen for avmerkingsboks-ID.

• Gå til egenskapsvinduet ved å klikke på avmerkingsboksen.
• Endre ID-egenskapene til de respektive kontrollene til 'chkC' og 'chkASP'.

Endre også tekstegenskapen til kontrollboksen til 'C#'. Gjør det samme for den andre Checkbox-kontrollen og endre den til 'ASP.Net'.

1. Endre ID-egenskapen i avmerkingsboksen til 'chkASP'.

2. Endre ID-egenskapen til avmerkingsboksen til chkC.

Når du har gjort endringene ovenfor, vil du se følgende utdata.

Produksjon:-

Fra resultatet kan du tydelig se at avmerkingsboksene ble lagt til i skjemaet.

Button

En knapp brukes til å la brukeren klikke på en knapp som deretter starter behandlingen av skjemaet. La oss se hvordan vi kan implementere dette med vårt nåværende eksempel, som vist nedenfor. Vi legger til en enkel knapp kalt «Send»-knappen. Denne vil bli brukt til å sende inn all informasjonen på skjemaet.

Trinn 1) Det første trinnet er å dra knappekontrollen over på nettskjemaet fra verktøykassen, som vist nedenfor.

Trinn 2) Når knappen er lagt til, går du til egenskapsvinduet ved å klikke på knappkontrollen. Endre tekstegenskapen til knappekontrollen til Send. Endre også ID-egenskapen til knappen til 'btnSubmit'.

Når du har gjort endringene ovenfor, vil du se følgende utdata.

Produksjon:-

Fra utgangen kan du tydelig se at knappen ble lagt til skjemaet.

Event Handler i ASP.Net

Når du arbeider med et nettskjema, kan du legge til hendelser i kontroller. En hendelse er noe som skjer når en handling utføres. Sannsynligvis den vanligste handlingen er å klikke på en knapp på et skjema.

I nettskjemaer kan du legge til kode i den tilsvarende aspx.cs-filen. Denne koden kan brukes til å utføre visse handlinger når en knapp trykkes på skjemaet. Dette er generelt den vanligste hendelsen i nettskjemaer. La oss se hvordan vi kan oppnå dette.

Vi skal gjøre dette enkelt. Bare legg til en hendelse til knappekontrollen for å vise navnet som ble skrevet inn av brukeren. La oss følge trinnene nedenfor for å oppnå dette.

Trinn 1) Først må du dobbeltklikke på knappen på nettskjemaet. Dette vil få opp hendelseskoden for knappen i Visual Studio.

btnSubmit_Click-hendelsen legges automatisk til av Visual Studio når du dobbeltklikker på knappen i webskjemadesigneren.

Trinn 2) La oss nå legge til kode til innsendingshendelsen for å vise navnet i tekstboksen og plasseringen valgt av brukeren.

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. Kodelinjen ovenfor gjør det enkleste. Den tar verdien fra tekstbokskontrollen Navn og sender den til klienten via Response-objektet. Så hvis du vil legge inn strengen «Guru99” i navnetekstboksen, vil verdien av txtName.Text være 'Guru99'.
2. Den neste kodelinjen tar den valgte verdien fra listeboksen via egenskapen 'lstLocation.SelectedItem.Text'. Deretter skriver den denne verdien tilbake til klienten via Response.Write-metoden.
3. Til slutt gjør vi alle kontrollene på skjemaet usynlige. Hvis vi ikke gjør dette, vil alle kontrollene pluss svarverdiene våre vises sammen. Normalt, når en person skriver inn all informasjonen på skjemaet, for eksempel navn, sted, kjønn osv., vil den neste siden som vises til brukeren bare inneholde informasjonen som ikke ble skrevet inn. Brukeren ønsker ikke å se kontrollene for navn, kjønn og sted igjen. Men ASP.Net vet ikke dette, og derfor vil det som standard vise alle kontrollene igjen når brukeren klikker på Send-knappen. Derfor må vi skrive kode for å sikre at alle kontrollene er skjult, slik at brukeren bare ser ønsket utdata.

Når du har gjort endringene ovenfor, vil du se følgende utdata.

Produksjon:-

I utdataskjermen utfører du følgende trinn:

1. Gi et navn på Guru99 i navnetekstboksen.
2. Velg en plassering i listeboksen for Bangalore.
3. Klikk på Send-knappen.

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

Spørsmål og svar