Kontrole ASP.NET: SprawdźBox, Przycisk radiowy, ListaBox, Pole tekstowe, Etykieta
Jacob Lee
Dodawanie kontrolek ASP.Net do formularzy internetowych
ASP.Net umożliwia dodawanie do formularza kontrolek, takich jak pola tekstowe i etykiety.
Przyjrzyjmy się innym kontrolkom dostępnym dla formularzy internetowych i zobaczmy niektóre ich wspólne właściwości.
W naszym przykładzie utworzymy jeden formularz, który będzie miał następującą funkcjonalność.
- Możliwość wprowadzenia przez użytkownika swojego imienia i nazwiska.
- Możliwość wyboru miasta, w którym mieszka użytkownik
- Możliwość wprowadzenia przez użytkownika opcji dotyczącej płci.
- Możliwość wyboru kursu, którego użytkownik chce się uczyć. Będzie wybór dla obu C# i ASP.Net
Przyjrzyjmy się szczegółowo każdej kontrolce. Dodajmy je, aby zbudować formularz z powyższą funkcjonalnością.
Krok 1) Pierwszym krokiem jest otwarcie Projektanta formularzy dla formularza internetowego Demo. Po wykonaniu tej czynności będziesz mógł przeciągać kontrolki z przybornika do formularz internetowy.
Aby otworzyć formularz internetowy Projektanta,
- Kliknij prawym przyciskiem myszy plik Demo.aspx w Eksploratorze rozwiązań i
- Wybierz opcję menu Projektant widoków.
Po wykonaniu powyższego kroku będziesz mógł zobaczyć swojego Projektanta formularzy, jak pokazano poniżej.
Teraz zacznijmy dodawać nasze elementy sterujące jeden po drugim
Kontrola etykiet
Kontrolka etykiety służy do wyświetlania tekstu lub wiadomości użytkownikowi w formularzu. Kontrolka etykiety jest zwykle używana wraz z innymi kontrolkami. Typowe przykłady to dodawanie etykiety wraz z kontrolką pola tekstowego. Etykieta daje użytkownikowi wskazówkę, czego oczekuje się od wypełnienia pola tekstowego. Zobaczmy, jak możemy to zaimplementować na przykładzie pokazanym poniżej. Użyjemy etykiety o nazwie „name”. Będzie ona używana w połączeniu z kontrolkami pola tekstowego, które zostaną dodane w dalszej części.
Krok 1) Pierwszym krokiem jest przeciągnięcie kontrolki „etykieta” z przybornika do formularza internetowego, jak pokazano poniżej.
Krok 2) Po dodaniu etykiety wykonaj następujące czynności.
- Przejdź do okna właściwości, klikając prawym przyciskiem myszy kontrolkę etykiety
- Wybierz opcję menu Właściwości
Krok 3) W oknie właściwości zmień nazwę właściwości Tekst na Nazwa
Podobnie zmień także wartość właściwości ID kontrolki na lblName. Określając znaczący identyfikator kontrolek, dostęp do nich staje się łatwiejszy na etapie kodowania. Pokazano to poniżej.
Po wprowadzeniu powyższych zmian zobaczysz następujący wynik
Wynik:-
Zobaczysz, że etykieta Nazwa pojawi się w formularzu internetowym.
Pole tekstowe
Pole tekstowe jest używane, aby umożliwić użytkownikowi wprowadzenie tekstu do aplikacji formularza internetowego. Zobaczmy, jak możemy to zaimplementować na przykładzie pokazanym poniżej. Dodamy jedno pole tekstowe do formularza, w którym użytkownik może wprowadzić swoje imię.
Krok 1) Pierwszym krokiem jest przeciągnięcie kontrolki pola tekstowego z przybornika na formularz internetowy, jak pokazano poniżej
Poniżej pokazano, jak to będzie wyglądać w projektancie formularzy po umieszczeniu kontrolki Textbox w formularzu
Krok 2) Po dodaniu pola tekstowego należy zmienić właściwość ID.
- Przejdź do okna właściwości, klikając prawym przyciskiem myszy kontrolkę Textbox i
- Następnie wybierz właściwości
- Zmień właściwość id pola tekstowego na txtName.
Po wprowadzeniu powyższych zmian zobaczysz następujący wynik.
Wynik:-
Pole listy
Listbox służy do wyświetlania listy elementów w formularzu internetowym. Zobaczmy, jak możemy to zaimplementować na przykładzie poniżej. Dodamy do formularza pole listy, aby przechowywać lokalizacje niektórych miast.
Krok 1) Pierwszym krokiem jest przeciągnięcie kontrolki listy rozwijanej z przybornika do formularza internetowego, jak pokazano poniżej
Krok 2) Po przeciągnięciu listy do formularza pojawi się osobne menu boczne. W tym menu wybierz menu „Edytuj elementy”.
Krok 3) Teraz zostanie wyświetlone okno dialogowe, w którym możesz dodać elementy listy do pola listy.
- Kliknij przycisk Dodaj, aby dodać element listy.
- Nadaj nazwę wartości tekstowej elementu listy – w naszym przypadku Mumbai. Powtórz kroki 1 i 2, aby dodać elementy listy dla Mangalore i Hyderabad.
- Kliknij przycisk OK
Krok 4) Przejdź do okna właściwości i zmień wartość właściwości ID kontrolki na lLokalizacja.
Po wprowadzeniu powyższych zmian zobaczysz następujący wynik
Wynik:-
Na podstawie wyników można wyraźnie stwierdzić, że pola listy zostały dodane do formularza.
Przycisk radiowy
Przycisk radiowy służy do prezentowania listy elementów, spośród których użytkownik może wybrać jeden. Zobaczmy, jak możemy to zaimplementować na przykładzie pokazanym poniżej. Dodamy przycisk opcji dla opcji męskiej/żeńskiej.
Krok 1) Pierwszym krokiem jest przeciągnięcie kontrolki 'radiobutton' na formularz internetowy z przybornika. (zobacz obraz poniżej). Upewnij się, że dodałeś 2 przyciski radiowe, jeden dla opcji 'Male' i drugi dla 'Female'.
Krok 2) Po dodaniu przycisku Radiobutton zmień właściwość „tekst”.
- Przejdź do okna właściwości, klikając opcję „Kontrola przycisku radiowego”.
- Zmień właściwość tekstową przycisku radiowego na „Mężczyzna”.
- Powtórz ten sam krok, aby zmienić go na „Kobieta”.
- Zmień także właściwości ID odpowiednich kontrolek na rdMale i rdFemale.
Po wprowadzeniu powyższych zmian zobaczysz następujący wynik
Wynik:-
Z danych wyjściowych wyraźnie widać, że przycisk opcji został dodany do formularza
pole wyboru
Pole wyboru służy do zapewnienia listy opcji, w których użytkownik może wybrać wiele opcji. Zobaczmy, jak możemy to wdrożyć na przykładzie pokazanym poniżej. Dodamy 2 pola wyboru do naszych formularzy internetowych. Te pola wyboru zapewnią użytkownikowi opcję, czy chce się uczyć C# lub ASP.Net.
Krok 1) Pierwszym krokiem jest przeciągnięcie kontrolki pola wyboru z przybornika na formularz internetowy, jak pokazano poniżej
Krok 2) Po dodaniu pól wyboru zmień właściwość id pola wyboru na „chkASP”.
- Przejdź do okna właściwości, klikając kontrolkę Pole wyboru.
- Zmień właściwości identyfikatora odpowiednich kontrolek na „chkC” i „chkASP”.
Zmień również właściwość text kontrolki Checkbox na 'C#'. Zrób to samo dla drugiej kontrolki Checkbox i zmień ją na 'ASP.Net'.
- Zmień właściwość ID pola wyboru na „chkASP”
- Zmień właściwość ID pola wyboru na chkC
Po wprowadzeniu powyższych zmian zobaczysz następujący wynik
Wynik:-
Na podstawie wyników można wyraźnie zobaczyć, że pola wyboru zostały dodane do formularza.
Przycisk
Przycisk służy do umożliwienia użytkownikowi kliknięcia przycisku, który następnie rozpoczyna przetwarzanie formularza. Zobaczmy, jak możemy to zaimplementować na naszym obecnym przykładzie, jak pokazano poniżej. Dodamy prosty przycisk o nazwie „Wyślij”. Posłuży to do przesłania wszystkich informacji w formularzu.
Krok 1) Pierwszym krokiem jest przeciągnięcie kontrolki przycisku z przybornika na formularz internetowy, jak pokazano poniżej
Krok 2) Po dodaniu przycisku przejdź do okna właściwości, klikając kontrolkę przycisku. Zmień właściwość tekstową kontrolki przycisku na Prześlij. Zmień także właściwość ID przycisku na „btnSubmit”.
Po wprowadzeniu powyższych zmian zobaczysz następujący wynik
Wynik:-
Z wyników wyraźnie widać, że przycisk został dodany do formularza.
Obsługa zdarzeń w ASP.Net
Pracując z formularzem internetowym, możesz dodawać zdarzenia do kontrolek. Zdarzenie to coś, co dzieje się, gdy wykonywana jest czynność. Prawdopodobnie najczęstszą czynnością jest kliknięcie przycisku w formularzu.
W formularzach internetowych możesz dodać kod do odpowiedniego pliku aspx.cs. Kodu tego można użyć do wykonania określonych działań po naciśnięciu przycisku w formularzu. Jest to na ogół najczęstsze zdarzenie w formularzach sieci Web. Zobaczmy, jak możemy to osiągnąć.
Uczynimy to prostym. Wystarczy dodać zdarzenie do kontrolki przycisku, aby wyświetlić nazwę wprowadzoną przez użytkownika. Aby to osiągnąć, wykonajmy poniższe kroki.
Krok 1) Najpierw musisz dwukrotnie kliknąć przycisk w formularzu internetowym. Spowoduje to wyświetlenie kodu zdarzenia dla przycisku w programie Visual Studio.
Zdarzenie btnSubmit_Click jest automatycznie dodawane przez program Visual Studio po dwukrotnym kliknięciu przycisku w projektancie formularzy internetowych.
Krok 2) Dodajmy teraz kod do zdarzenia Submit, aby wyświetlić wartość pola tekstowego z nazwą oraz lokalizację wybraną przez użytkownika.
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;
}
Wyjaśnienie kodu: -
- Powyższy wiersz kodu wykonuje najprostszą rzecz. Przyjmuje wartość kontrolki tekstowej Name i wysyła ją do klienta za pośrednictwem obiektu Response. Tak więc, jeśli chcesz wprowadzić ciąg „Guru99” w polu tekstowym name, wartość txtName. Tekstem byłoby „Guru99”.
- Następny wiersz kodu pobiera wybraną wartość listy za pomocą właściwości 'lstLocation.SelectedItem.text'. Następnie zapisuje tę wartość za pomocą metody Response.Write z powrotem do klienta.
- Na koniec sprawiamy, że wszystkie kontrolki w formularzu są niewidoczne. Jeśli tego nie zrobimy, wszystkie kontrolki plus nasze wartości odpowiedzi będą wyświetlane razem. Zwykle, gdy użytkownik wprowadza wszystkie informacje w formularzu, takie jak imię, lokalizacja, płeć itp. Następna strona wyświetlana użytkownikowi powinna zawierać tylko informacje, które nie zostały wprowadzone. Użytkownik nie chce ponownie widzieć kontrolek imienia, płci i lokalizacji. Ale ASP.Net o tym nie wie, dlatego domyślnie ponownie wyświetli wszystkie kontrolki, gdy użytkownik kliknie przycisk Prześlij. Dlatego musimy napisać kod, aby upewnić się, że wszystkie kontrolki są ukryte, tak aby użytkownik widział tylko pożądany wynik.
Po wprowadzeniu powyższych zmian zobaczysz następujący wynik
Wynik:-
Na ekranie wyjściowym wykonaj następujące kroki
- Wpisz nazwę Guru99 w polu tekstowym nazwy
- Wybierz lokalizację z listy Bangalore
- Kliknij przycisk Prześlij
Po wykonaniu tej czynności na stronie zostanie wyświetlony komunikat „Guru99” i lokalizacja „Bangalore”.
Podsumowanie
- In ASP.Net, do formularza można dodać standardowe kontrolki, takie jak etykiety, pola tekstowe, pola listy itp.
- Z każdą kontrolką może być powiązane zdarzenie. Najczęstszym zdarzeniem jest zdarzenie kliknięcia przycisku. Jest to wykorzystywane, gdy informacje muszą zostać przesłane do serwera WWW.
