ASP.NET-kontroller: KontrolleraBox, RadioButton, ListaBox, Textbox, Etikett
Jacob Lee
Lägga till ASP.Net-kontroller till webbformulär
ASP.Net har förmågan att lägga till kontroller till ett formulär som textrutor och etiketter.
Låt oss titta på de andra kontrollerna som är tillgängliga för webbformulär och se några av deras vanliga egenskaper.
I vårt exempel kommer vi att skapa ett formulär som kommer att ha följande funktionalitet.
- Möjligheten för användaren att ange sitt namn.
- Ett alternativ för att välja vilken stad användaren bor i
- Möjligheten för användaren att ange ett alternativ för könet.
- Ett alternativ att välja en kurs som användaren vill lära sig. Det kommer att finnas val för båda C# och ASP.Net
Låt oss titta på varje kontroll i detalj. Låt oss lägga till dem för att bygga formuläret med ovan nämnda funktionalitet.
Steg 1) Det första steget är att öppna formulärdesignern för demowebbformuläret. När du har gjort detta kommer du att kunna dra kontroller från verktygslådan till Webbformulär.
För att öppna webbformuläret Designer,
- Högerklicka på filen Demo.aspx i Solution Explorer och
- Välj menyalternativet View Designer.
När du har utfört steget ovan kommer du att kunna se din Form Designer som visas nedan.
Låt oss nu börja lägga till våra kontroller en efter en
Etikettkontroll
Etikettkontrollen används för att visa en text eller ett meddelande till användaren på formuläret. Etikettkontrollen används normalt tillsammans med andra kontroller. Vanliga exempel är att en etikett läggs till tillsammans med textboxkontrollen. Etiketten ger en indikation till användaren om vad som förväntas fyllas i textrutan. Låt oss se hur vi kan implementera detta med ett exempel som visas nedan. Vi kommer att använda en etikett som heter "namn". Detta kommer att användas tillsammans med textrutekontrollerna, som kommer att läggas till i det senare avsnittet.
Steg 1) Det första steget är att dra "etikett"-kontrollen till webbformuläret från verktygslådan som visas nedan.
Steg 2) När etiketten har lagts till följer du följande steg.
- Gå till egenskapsfönstret genom att högerklicka på etikettkontrollen
- Välj menyalternativet Egenskaper
Steg 3) I egenskapsfönstret ändrar du namnet på egenskapen Text till Namn
Ändra också ID-egenskapsvärdet för kontrollen till lblName. Genom att ange ett meningsfullt ID för kontroller blir det lättare att komma åt dem under kodningsfasen. Detta visas nedan.
När du har gjort ändringarna ovan kommer du att se följande utdata
Produktion:-
Du kommer att se att namnetiketten visas på webbformuläret.
Textruta
En textruta används för att låta en användare skriva in viss text i webbformulärapplikationen. Låt oss se hur vi kan implementera detta med ett exempel som visas nedan. Vi kommer att lägga till en textruta i formuläret där användaren kan ange sitt namn.
Steg 1) Det första steget är att dra textboxkontrollen till webbformuläret från verktygslådan som visas nedan
Nedan är hur detta skulle se ut i formulärdesignern när Textbox-kontrollen är på formuläret
Steg 2) När textrutan har lagts till måste du ändra ID-egenskapen.
- Gå till egenskapsfönstret genom att högerklicka på Textbox-kontrollen och
- Välj sedan egenskaper
- Ändra egenskapen id för textrutan till txtName.
När du har gjort ändringarna ovan ser du följande utdata.
Produktion:-
Listruta
En listbox används för att visa en lista över objekt på webbformuläret. Låt oss se hur vi kan implementera detta med ett exempel som visas nedan. Vi kommer att lägga till en listruta i formuläret för att lagra några stadsplatser.
Steg 1) Det första steget är att dra listboxkontrollen till webbformuläret från verktygslådan som visas nedan
Steg 2) När du drar listrutan till formuläret visas en separat sidomeny. I den här menyn väljer du menyn "Redigera objekt".
Steg 3) Du kommer nu att presenteras med en dialogruta där du kan lägga till listobjekten i listrutan.
- Klicka på knappen Lägg till för att lägga till ett listobjekt.
- Ge ett namn för textvärdet för listobjektet – I vårt fall Mumbai. Upprepa steg 1 och 2 för att lägga till listobjekt för Mangalore och Hyderabad.
- Klicka på OK-knappen
Steg 4) Gå till egenskapsfönstret och ändra ID-egenskapsvärdet för kontrollen till lstLocation.
När du har gjort ändringarna ovan kommer du att se följande utdata
Produktion:-
Från utgången kan du tydligt se att listboxarna lades till i formuläret.
Radio knapp
En alternativknapp används för att visa en lista med objekt som användaren kan välja en av. Låt oss se hur vi kan implementera detta med ett exempel som visas nedan. Vi kommer att lägga till en alternativknapp för ett manligt/kvinnligt alternativ.
Steg 1) Det första steget är att dra radioknappen till webbformuläret från verktygslådan. (se bilden nedan). Se till att lägga till 2 alternativknappar, en för alternativet "Man" och den andra för "Kvinna".
Steg 2) När radioknappen har lagts till, ändra egenskapen 'text'.
- Gå till egenskapsfönstret genom att klicka på "Radioknappkontroll".
- Ändra textegenskapen för radioknappen till "Man".
- Upprepa samma steg för att ändra det till "Kvinna".
- Ändra också ID-egenskaperna för respektive kontroller till rdMale och rdFemale.
När du har gjort ändringarna ovan kommer du att se följande utdata
Produktion:-
Från utgången kan du tydligt se att alternativknappen lades till i formuläret
Kryssruta
En kryssruta används för att tillhandahålla en lista med alternativ där användaren kan välja flera alternativ. Låt oss se hur vi kan implementera detta med ett exempel som visas nedan. Vi kommer att lägga till 2 kryssrutor i våra webbformulär. Dessa kryssrutor ger användaren ett alternativ om de vill lära sig C# eller ASP.Net.
Steg 1) Det första steget är att dra kryssrutan till webbformuläret från verktygslådan som visas nedan
Steg 2) När kryssrutorna har lagts till ändrar du egenskapen för kryssruta-id till 'chkASP'.
- Gå till egenskapsfönstret genom att klicka på kryssrutan.
- Ändra ID-egenskaperna för respektive kontroller till 'chkC' och 'chkASP'.
Ändra också textegenskapen för kryssrutan till 'C#'. Gör samma sak för den andra Checkbox-kontrollen och ändra den till 'ASP.Net'.
- Ändra ID-egenskapen för kryssrutan till 'chkASP'
- Ändra ID-egenskapen för kryssrutan till chkC
När du har gjort ändringarna ovan kommer du att se följande utdata
Produktion:-
Från utgången kan du tydligt se att kryssrutorna lades till i formuläret.
Knappen
En knapp används för att låta användaren klicka på en knapp som sedan startar bearbetningen av formuläret. Låt oss se hur vi kan implementera detta med vårt nuvarande exempel som visas nedan. Vi kommer att lägga till en enkel knapp som heter 'Skicka'-knappen. Detta kommer att användas för att skicka in all information på formuläret.
Steg 1) Det första steget är att dra knappkontrollen till webbformuläret från verktygslådan som visas nedan
Steg 2) När knappen har lagts till går du till egenskapsfönstret genom att klicka på knappkontrollen. Ändra textegenskapen för knappkontrollen till Skicka. Ändra också ID-egenskapen för knappen till 'btnSubmit'.
När du har gjort ändringarna ovan kommer du att se följande utdata
Produktion:-
Från utgången kan du tydligt se att knappen lades till i formuläret.
Händelsehanterare i ASP.Net
När du arbetar med ett webbformulär kan du lägga till händelser i kontroller. En händelse är något som händer när en handling utförs. Den förmodligen vanligaste åtgärden är att klicka på en knapp på ett formulär.
I webbformulär kan du lägga till kod i motsvarande aspx.cs-fil. Denna kod kan användas för att utföra vissa åtgärder när en knapp trycks på formuläret. Detta är i allmänhet den vanligaste händelsen i webbformulär. Låt oss se hur vi kan uppnå detta.
Vi ska göra detta enkelt. Lägg bara till en händelse till knappkontrollen för att visa namnet som angavs av användaren. Låt oss följa stegen nedan för att uppnå detta.
Steg 1) Först måste du dubbelklicka på knappen på webbformuläret. Detta kommer att ta fram händelsekoden för knappen i Visual Studio.
Händelsen btnSubmit_Click läggs automatiskt till av Visual Studio när du dubbelklickar på knappen i webbformulärdesignern.
Steg 2) Låt oss nu lägga till kod till inlämningshändelsen för att visa namntextrutans värde och platsen som valts av användaren.
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 Förklaring:-
- Ovanstående kodrad gör det enklaste. Den tar värdet från textrutekontrollen Name och skickar det till klienten via Response-objektet. Så om du vill ange strängen "Guru99” i namntextrutan, värdet för textnamn. En text skulle vara 'Guru99 '.
- Nästa kodrad tar det valda värdet av listboxen via egenskapen 'lstLocation.SelectedItem.text'. Den skriver sedan detta värde via Response.Write-metoden tillbaka till klienten.
- Slutligen gör vi alla kontroller på formuläret som osynliga. Om vi inte gör detta kommer alla kontroller plus våra svarsvärden att visas tillsammans. Normalt när en person anger all information på formuläret som namn, plats, kön etc. Nästa sida visas för användaren ska bara ha den information som inte har angetts. Användaren vill inte se kontrollerna för namn, kön och plats igen. Men ASP.Net vet inte detta, och därför kommer det som standard att visa alla kontroller igen när användaren klickar på knappen Skicka. Därför måste vi skriva kod för att säkerställa att alla kontroller är dolda så att användaren bara ser önskad utdata.
När du gör ovanstående ändringar kommer du att se följande utdata
Produktion:-
Utför följande steg på skärmen Utdata
- Ange ett namn på Guru99 i namntextrutan
- Välj en plats i listrutan i Bangalore
- Klicka på knappen Skicka
När du gör detta kommer du att se 'Guru99' och platsen 'Bangalore' visas på sidan.
Sammanfattning
- In ASP.Net, kan du lägga till standardkontrollerna i ett formulär som etiketter, textrutor, listboxar, etc.
- Varje kontroll kan ha en händelse kopplad till sig. Den vanligaste händelsen är knappklickshändelsen. Detta används när information ska skickas till webbservern.
