Kontrole ASP.NET: SprawdźBox, Przycisk radiowy, ListaBox

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 w formularzach internetowych i omówmy niektóre z ich wspólnych właściwości.

W naszym przykładzie utworzymy jeden formularz, który będzie miał następującą funkcjonalność.

1. Możliwość wprowadzenia przez użytkownika swojego imienia i nazwiska.
2. Możliwość wyboru miasta, w którym mieszka użytkownik.
3. Możliwość wprowadzenia przez użytkownika opcji dotyczącej płci.
4. 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 kontrolki jeden po drugim.

Kontrola etykiet

Kontrolka etykiety służy do wyświetlania użytkownikowi tekstu lub wiadomości w formularzu. Kontrolka etykiety jest zazwyczaj używana razem z innymi kontrolkami. Typowym przykładem jest dodanie etykiety wraz z kontrolką pola tekstowego. Etykieta wskazuje użytkownikowi, co ma wypełnić pole tekstowe. Zobaczmy, jak możemy to zaimplementować, na poniższym przykładzie. Użyjemy etykiety o nazwie „nazwa”. 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.

1. Przejdź do okna właściwości, klikając prawym przyciskiem myszy kontrolkę etykiety.
2. Wybierz opcję menu Właściwości.

Krok 3) W oknie właściwości zmień wartość 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 do formularza internetowego, jak pokazano poniżej.

Poniżej pokazano, jak będzie to wyglądać w projektancie formularzy po umieszczeniu kontrolki Pole tekstowe 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ę Pole tekstowe i
• Wybierz Właściwości, a następnie
• 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 rozwijanej do formularza pojawi się osobne menu boczne. W tym menu wybierz opcję „Edytuj elementy”.

Krok 3) Teraz zostanie wyświetlone okno dialogowe, w którym możesz dodać elementy listy do pola listy.

1. Kliknij przycisk Dodaj, aby dodać element listy.
2. Nadaj nazwę wartości tekstowej elementu listy – w naszym przypadku Mumbai. Powtórz kroki 1 i 2, aby dodać elementy listy dla Mangalore i Hajdarabadu.
3. Kliknij przycisk OK.

Krok 4) Przejdź do okna właściwości i zmień wartość właściwości ID kontrolki na lstLocation.

Po wprowadzeniu powyższych zmian zobaczysz następujący wynik.

Wynik:-

Na podstawie wyników można wyraźnie stwierdzić, że Listbox został dodany 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” z przybornika na formularz internetowy (patrz obrazek poniżej). Upewnij się, że dodałeś dwa przyciski opcji: jeden dla opcji „Mężczyzna”, a drugi dla opcji „Kobieta”.

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

Na podstawie wyników można wyraźnie zobaczyć, że przycisk radiowy został dodany do formularza.

pole wyboru

Pole wyboru służy do wyświetlania listy opcji, z których użytkownik może wybrać wiele opcji. Zobaczmy, jak możemy to zaimplementować na poniższym przykładzie. Dodamy 2 pola wyboru do naszych formularzy internetowych. Te pola wyboru zapewnią użytkownikowi możliwość wyboru, czy chce się czegoś dowiedzieć. C# lub ASP.Net.

Krok 1) Pierwszym krokiem jest przeciągnięcie kontrolki pola wyboru z przybornika do formularza internetowego, jak pokazano poniżej.

Krok 2) Po dodaniu pól wyboru zmień właściwość ID pola wyboru.

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

1. Zmień właściwość ID pola wyboru na „chkASP”.

2. 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 stwierdzić, że pola wyboru zostały dodane do formularza.

Przycisk

Przycisk umożliwia użytkownikowi kliknięcie przycisku, który następnie rozpoczyna przetwarzanie formularza. Zobaczmy, jak możemy to zaimplementować w naszym przykładzie, jak pokazano poniżej. Dodamy prosty przycisk o nazwie „Prześlij”. Będzie on służył do przesyłania wszystkich informacji z formularza.

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;
}

Code Wyjaśnienie:-

1. Powyższy wiersz kodu wykonuje najprostszą czynność. Pobiera wartość kontrolki tekstowej „Nazwa” i wysyła ją do klienta za pośrednictwem obiektu Response. Jeśli więc chcesz wprowadzić ciąg „Guru99” w polu tekstowym nazwy, wartość txtName.Text będzie wynosić 'Guru99 ".
2. Kolejny wiersz kodu pobiera wybraną wartość z listy za pomocą właściwości „lstLocation.SelectedItem.Text”. Następnie zapisuje tę wartość za pomocą metody Response.Write z powrotem do klienta.
3. Na koniec sprawiamy, że wszystkie kontrolki w formularzu są niewidoczne. Jeśli tego nie zrobimy, wszystkie kontrolki wraz z naszymi wartościami odpowiedzi będą wyświetlane razem. Zwykle, gdy użytkownik wprowadzi wszystkie informacje w formularzu, takie jak imię i nazwisko, lokalizacja, płeć itp., następna strona wyświetlana użytkownikowi powinna zawierać tylko te, które nie zostały wprowadzone. Użytkownik nie chce ponownie widzieć kontrolek imienia i nazwiska, płci i lokalizacji. Jednak ASP.Net o tym nie wie i dlatego domyślnie ponownie wyświetla wszystkie kontrolki po kliknięciu przycisku „Prześlij”. W związku z tym musimy napisać kod, który zapewni, że wszystkie kontrolki będą ukryte, 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 czynności:

1. Podaj nazwę Guru99 w polu tekstowym nazwy.
2. Wybierz lokalizację w polu listy: Bangalore.
3. Kliknij przycisk Prześlij.

Po wykonaniu tej czynności zobaczysz „Guru99' i lokalizacja 'Bangalore' wyświetlane na stronie.

FAQ