Στοιχεία ελέγχου ASP.NET: ΕλέγξτεBox, RadioButton, ΛίσταBox

Προσθήκη στοιχείων ελέγχου ASP.Net σε Φόρμες Ιστού

Το ASP.Net έχει τη δυνατότητα να προσθέτει στοιχεία ελέγχου σε μια φόρμα, όπως πλαίσια κειμένου και ετικέτες.

Ας δούμε τα άλλα διαθέσιμα στοιχεία ελέγχου για τις φόρμες Web και ας δούμε μερικές από τις κοινές τους ιδιότητες.

Στο παράδειγμά μας, θα δημιουργήσουμε μια φόρμα που θα έχει την ακόλουθη λειτουργικότητα.

1. Η δυνατότητα του χρήστη να εισάγει το όνομά του.
2. Μια επιλογή για να επιλέξετε την πόλη στην οποία κατοικεί ο χρήστης.
3. Η δυνατότητα του χρήστη να εισάγει μια επιλογή για το φύλο.
4. Μια επιλογή για να επιλέξετε ένα μάθημα που θέλει να μάθει ο χρήστης. Θα υπάρχουν επιλογές και για τα δύο C# και ASP.Net.

Ας δούμε αναλυτικά κάθε στοιχείο ελέγχου. Ας τα προσθέσουμε για να δημιουργήσουμε τη φόρμα με την προαναφερθείσα λειτουργικότητα.

Βήμα 1) Το πρώτο βήμα είναι να ανοίξετε το Forms Designer για τη φόρμα web επίδειξης. Μόλις το κάνετε αυτό, θα μπορείτε να σύρετε στοιχεία ελέγχου από την εργαλειοθήκη στο Φόρμα Ιστού.

Για να ανοίξετε τη φόρμα web του Σχεδιαστή:

• Κάντε δεξί κλικ στο αρχείο Demo.aspx στην Εξερεύνηση λύσεων και
• Επιλέξτε την επιλογή μενού Προβολή σχεδιαστή.

Μόλις εκτελέσετε το παραπάνω βήμα, θα μπορείτε να δείτε τον Σχεδιαστή Φόρμας όπως φαίνεται παρακάτω.

Τώρα ας αρχίσουμε να προσθέτουμε τα στοιχεία ελέγχου μας ένα προς ένα.

Έλεγχος ετικέτας

Το στοιχείο ελέγχου ετικέτας χρησιμοποιείται για την εμφάνιση ενός κειμένου ή ενός μηνύματος στον χρήστη στη φόρμα. Το στοιχείο ελέγχου ετικέτας χρησιμοποιείται συνήθως μαζί με άλλα στοιχεία ελέγχου. Ένα συνηθισμένο παράδειγμα είναι όταν μια ετικέτα προστίθεται μαζί με το στοιχείο ελέγχου πλαισίου κειμένου. Η ετικέτα δίνει μια ένδειξη στον χρήστη σχετικά με το τι αναμένεται να γεμίσει στο πλαίσιο κειμένου. Ας δούμε πώς μπορούμε να το εφαρμόσουμε αυτό με ένα παράδειγμα που φαίνεται παρακάτω. Θα χρησιμοποιήσουμε μια ετικέτα που ονομάζεται 'όνομα'. Αυτή θα χρησιμοποιηθεί σε συνδυασμό με τα στοιχεία ελέγχου πλαισίου κειμένου, τα οποία θα προστεθούν στην επόμενη ενότητα.

Βήμα 1) Το πρώτο βήμα είναι να σύρετε το στοιχείο ελέγχου «ετικέτα» στη φόρμα ιστού από την εργαλειοθήκη, όπως φαίνεται παρακάτω.

Βήμα 2) Μόλις προστεθεί η ετικέτα, ακολουθήστε τα παρακάτω βήματα.

1. Μεταβείτε στο παράθυρο ιδιοτήτων κάνοντας δεξί κλικ στο στοιχείο ελέγχου ετικέτας.
2. Επιλέξτε την επιλογή μενού Ιδιότητες.

Βήμα 3) Από το παράθυρο ιδιοτήτων, αλλάξτε την τιμή της ιδιότητας Text σε Name.

Ομοίως, αλλάξτε επίσης την τιμή της ιδιότητας ID του στοιχείου ελέγχου σε lblName. Καθορίζοντας ένα ουσιαστικό αναγνωριστικό στα στοιχεία ελέγχου, γίνεται ευκολότερη η πρόσβαση σε αυτά κατά τη φάση κωδικοποίησης. Αυτό φαίνεται παρακάτω.

Μόλις κάνετε τις παραπάνω αλλαγές, θα δείτε το ακόλουθο αποτέλεσμα.

Παραγωγή:-

Θα δείτε ότι η ετικέτα Όνομα εμφανίζεται στη Φόρμα Ιστού.

Πλαίσιο κειμένου

Ένα πλαίσιο κειμένου χρησιμοποιείται για να επιτρέπεται σε έναν χρήστη να εισάγει κάποιο κείμενο στην εφαρμογή φόρμας Web. Ας δούμε πώς μπορούμε να το εφαρμόσουμε με ένα παράδειγμα που φαίνεται παρακάτω. Θα προσθέσουμε ένα πλαίσιο κειμένου στη φόρμα με την οποία ο χρήστης μπορεί να εισάγει το όνομά του.

Βήμα 1) Το πρώτο βήμα είναι να σύρετε το στοιχείο ελέγχου πλαισίου κειμένου στη φόρμα Web από την εργαλειοθήκη, όπως φαίνεται παρακάτω.

Παρακάτω θα φαίνεται πώς θα φαίνεται αυτό στη σχεδίαση φορμών μόλις το στοιχείο ελέγχου TextBox βρίσκεται στη φόρμα.

Βήμα 2) Μόλις προστεθεί το πλαίσιο κειμένου, πρέπει να αλλάξετε την ιδιότητα ID.

• Μεταβείτε στο παράθυρο ιδιοτήτων κάνοντας δεξί κλικ στο στοιχείο ελέγχου Textbox και
• Επιλέξτε Ιδιότητες και, στη συνέχεια,
• Αλλάξτε την ιδιότητα ID του πλαισίου κειμένου σε txtName.

Μόλις κάνετε τις παραπάνω αλλαγές, βλέπετε την ακόλουθη έξοδο.

Παραγωγή:-

Πλαίσιο λίστας

Ένα πλαίσιο λίστας χρησιμοποιείται για την εμφάνιση μιας λίστας στοιχείων στη φόρμα Ιστού. Ας δούμε πώς μπορούμε να το εφαρμόσουμε με ένα παράδειγμα που φαίνεται παρακάτω. Θα προσθέσουμε ένα πλαίσιο λίστας στη φόρμα για να αποθηκεύσουμε ορισμένες τοποθεσίες της πόλης.

Βήμα 1) Το πρώτο βήμα είναι να σύρετε το στοιχείο ελέγχου πλαισίου λίστας στη φόρμα Web από την εργαλειοθήκη, όπως φαίνεται παρακάτω.

Βήμα 2) Μόλις σύρετε το πλαίσιο λίστας στη φόρμα, θα εμφανιστεί ένα ξεχωριστό πλευρικό μενού. Σε αυτό το μενού, επιλέξτε το μενού «Επεξεργασία στοιχείων».

Βήμα 3) Θα εμφανιστεί τώρα ένα παράθυρο διαλόγου στο οποίο μπορείτε να προσθέσετε τα στοιχεία της λίστας στο πλαίσιο λίστας.

1. Κάντε κλικ στο κουμπί Προσθήκη για να προσθέσετε ένα στοιχείο λίστας.
2. Δώστε ένα όνομα για την τιμή κειμένου του στοιχείου λίστας – στην περίπτωσή μας, Βομβάη. Επαναλάβετε τα βήματα 1 και 2 για να προσθέσετε στοιχεία λίστας για τη Μανγκαλόρ και το Χαϊντεραμπάντ.
3. Κάντε κλικ στο κουμπί OK.

Βήμα 4) Μεταβείτε στο παράθυρο ιδιοτήτων και αλλάξτε την τιμή της ιδιότητας ID του στοιχείου ελέγχου σε lstLocation.

Μόλις κάνετε τις παραπάνω αλλαγές, θα δείτε το ακόλουθο αποτέλεσμα.

Παραγωγή:-

Από το αποτέλεσμα, μπορείτε να δείτε καθαρά ότι το Listbox προστέθηκε στη φόρμα.

Κουμπί ραδιοφώνου

Ένα κουμπί Ραδιόφωνο χρησιμοποιείται για την εμφάνιση μιας λίστας στοιχείων από τα οποία ο χρήστης μπορεί να επιλέξει ένα. Ας δούμε πώς μπορούμε να το εφαρμόσουμε με ένα παράδειγμα που φαίνεται παρακάτω. Θα προσθέσουμε ένα κουμπί επιλογής για μια επιλογή άνδρα/γυναίκα.

Βήμα 1) Το πρώτο βήμα είναι να σύρετε το στοιχείο ελέγχου «κουμπί ραδιοφώνου» στη φόρμα ιστού από την εργαλειοθήκη (δείτε την παρακάτω εικόνα). Βεβαιωθείτε ότι έχετε προσθέσει 2 κουμπιά ραδιοφώνου, ένα για την επιλογή «Άνδρας» και το άλλο για «Γυναίκα».

Βήμα 2) Μόλις προστεθεί το Radiobutton, αλλάξτε την ιδιότητα 'text'.

• Μεταβείτε στο παράθυρο ιδιοτήτων κάνοντας κλικ στο 'Ραδιοκουμπί ελέγχου'.
• Αλλάξτε την ιδιότητα κειμένου του κουμπιού Radio σε "Male".
• Επαναλάβετε το ίδιο βήμα για να το αλλάξετε σε «Γυναίκα».
• Επίσης, αλλάξτε τις ιδιότητες ID των αντίστοιχων στοιχείων ελέγχου σε rdMale και rdFemale.

Μόλις κάνετε τις παραπάνω αλλαγές, θα δείτε το ακόλουθο αποτέλεσμα.

Παραγωγή:-

Από το αποτέλεσμα, μπορείτε να δείτε καθαρά ότι το κουμπί επιλογής προστέθηκε στη φόρμα.

Πλαίσιο ελέγχου

Ένα πλαίσιο ελέγχου χρησιμοποιείται για να παρέχει μια λίστα επιλογών στις οποίες ο χρήστης μπορεί να επιλέξει πολλαπλές επιλογές. Ας δούμε πώς μπορούμε να το εφαρμόσουμε αυτό με ένα παράδειγμα που φαίνεται παρακάτω. Θα προσθέσουμε 2 πλαίσια ελέγχου στις φόρμες ιστού μας. Αυτά τα πλαίσια ελέγχου θα παρέχουν στον χρήστη μια επιλογή σχετικά με το αν θέλει να μάθει C# ή ASP.Net.

Βήμα 1) Το πρώτο βήμα είναι να σύρετε το στοιχείο ελέγχου πλαισίου ελέγχου στη φόρμα Web από την εργαλειοθήκη, όπως φαίνεται παρακάτω.

Βήμα 2) Μόλις προστεθούν τα πλαίσια ελέγχου, αλλάξτε την ιδιότητα αναγνωριστικού πλαισίου ελέγχου.

• Μεταβείτε στο παράθυρο ιδιοτήτων κάνοντας κλικ στο στοιχείο ελέγχου Πλαισίου ελέγχου.
• Αλλάξτε τις ιδιότητες ID των αντίστοιχων στοιχείων ελέγχου σε 'chkC' και 'chkASP'.

Επίσης, αλλάξτε την ιδιότητα κειμένου του στοιχείου ελέγχου Πλαισίου ελέγχου σε "C#". Κάντε το ίδιο για το άλλο στοιχείο ελέγχου πλαισίου ελέγχου και αλλάξτε το σε "ASP.Net".

1. Αλλάξτε την ιδιότητα ID του πλαισίου ελέγχου σε 'chkASP'.

2. Αλλάξτε την ιδιότητα ID του πλαισίου ελέγχου σε chkC.

Μόλις κάνετε τις παραπάνω αλλαγές, θα δείτε το ακόλουθο αποτέλεσμα.

Παραγωγή:-

Από το αποτέλεσμα, μπορείτε να δείτε καθαρά ότι τα πλαίσια ελέγχου προστέθηκαν στη φόρμα.

Κουμπί

Ένα κουμπί χρησιμοποιείται για να επιτρέψει στον χρήστη να κάνει κλικ σε ένα κουμπί, το οποίο στη συνέχεια θα ξεκινήσει την επεξεργασία της φόρμας. Ας δούμε πώς μπορούμε να το εφαρμόσουμε αυτό με το τρέχον παράδειγμά μας, όπως φαίνεται παρακάτω. Θα προσθέσουμε ένα απλό κουμπί που ονομάζεται κουμπί «Υποβολή». Αυτό θα χρησιμοποιηθεί για την υποβολή όλων των πληροφοριών στη φόρμα.

Βήμα 1) Το πρώτο βήμα είναι να σύρετε το στοιχείο ελέγχου κουμπιού στη φόρμα Web από την εργαλειοθήκη, όπως φαίνεται παρακάτω.

Βήμα 2) Μόλις προστεθεί το κουμπί, μεταβείτε στο παράθυρο ιδιοτήτων κάνοντας κλικ στο στοιχείο ελέγχου κουμπιού. Αλλάξτε την ιδιότητα κειμένου του στοιχείου ελέγχου κουμπιού σε Υποβολή. Επίσης, αλλάξτε την ιδιότητα ID του κουμπιού σε 'btnSubmit'.

Μόλις κάνετε τις παραπάνω αλλαγές, θα δείτε το ακόλουθο αποτέλεσμα.

Παραγωγή:-

Από την έξοδο, μπορείτε να δείτε ξεκάθαρα ότι το κουμπί προστέθηκε στη φόρμα.

Event Handler στο ASP.Net

Όταν εργάζεστε με μια φόρμα ιστού, μπορείτε να προσθέσετε συμβάντα στα στοιχεία ελέγχου. Ένα συμβάν είναι κάτι που συμβαίνει όταν εκτελείται μια ενέργεια. Πιθανώς η πιο συνηθισμένη ενέργεια είναι το πάτημα ενός κουμπιού σε μια φόρμα.

Σε φόρμες web, μπορείτε να προσθέσετε κώδικα στο αντίστοιχο αρχείο aspx.cs. Αυτός ο κωδικός μπορεί να χρησιμοποιηθεί για την εκτέλεση συγκεκριμένων ενεργειών όταν πατηθεί ένα κουμπί στη φόρμα. Αυτό είναι γενικά το πιο κοινό συμβάν στις Φόρμες Ιστού. Ας δούμε πώς μπορούμε να το πετύχουμε αυτό.

Θα το κάνουμε αυτό απλό. Απλώς προσθέστε ένα συμβάν στο στοιχείο ελέγχου κουμπιού για να εμφανίσετε το όνομα που εισήγαγε ο χρήστης. Ας ακολουθήσουμε τα παρακάτω βήματα για να το πετύχουμε.

Βήμα 1) Πρώτα πρέπει να κάνετε διπλό κλικ στο κουμπί στη φόρμα Web. Αυτό θα εμφανίσει τον κωδικό συμβάντος για το κουμπί στο Visual Studio.

Το συμβάν btnSubmit_Click προστίθεται αυτόματα από το Visual Studio όταν κάνετε διπλό κλικ στο κουμπί στη σχεδίαση φορμών web.

Βήμα 2) Ας προσθέσουμε τώρα κώδικα στο συμβάν υποβολής για να εμφανίσουμε την τιμή του πλαισίου κειμένου ονόματος και την τοποθεσία που έχει επιλέξει ο χρήστης.

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 Εξήγηση:-

1. Η παραπάνω γραμμή κώδικα κάνει το πιο απλό πράγμα. Παίρνει την τιμή του στοιχείου ελέγχου κειμένου Name και την στέλνει στον πελάτη μέσω του αντικειμένου Response. Έτσι, αν θέλετε να εισαγάγετε τη συμβολοσειρά "Guru99” στο πλαίσιο κειμένου ονόματος, η τιμή του txtName.Text θα είναι 'Guru99'.
2. Η επόμενη γραμμή κώδικα λαμβάνει την επιλεγμένη τιμή του πλαισίου λίστας μέσω της ιδιότητας 'lstLocation.SelectedItem.Text'. Στη συνέχεια, γράφει αυτήν την τιμή μέσω της μεθόδου Response.Write πίσω στον πελάτη.
3. Τέλος, κάνουμε όλα τα στοιχεία ελέγχου στη φόρμα αόρατα. Εάν δεν το κάνουμε αυτό, όλα τα στοιχεία ελέγχου συν τις τιμές απόκρισης θα εμφανίζονται μαζί. Κανονικά, όταν ένα άτομο εισάγει όλες τις πληροφορίες στη φόρμα, όπως το Όνομα, την τοποθεσία, το Φύλο κ.λπ., η επόμενη σελίδα που εμφανίζεται στον χρήστη θα πρέπει να έχει μόνο τις πληροφορίες που δεν καταχωρήθηκαν. Ο χρήστης δεν θέλει να δει ξανά τα στοιχεία ελέγχου Όνομα, Φύλο και τοποθεσία. Αλλά το ASP.Net δεν το γνωρίζει αυτό και, ως εκ τούτου, από προεπιλογή, θα εμφανίσει ξανά όλα τα στοιχεία ελέγχου όταν ο χρήστης κάνει κλικ στο κουμπί Υποβολή. Επομένως, πρέπει να γράψουμε κώδικα για να διασφαλίσουμε ότι όλα τα στοιχεία ελέγχου είναι κρυφά, ώστε ο χρήστης να βλέπει μόνο το επιθυμητό αποτέλεσμα.

Μόλις κάνετε τις παραπάνω αλλαγές, θα δείτε το ακόλουθο αποτέλεσμα.

Παραγωγή:-

Στην οθόνη Έξοδος, εκτελέστε τα ακόλουθα βήματα:

1. Δώστε ένα όνομα Guru99 στο πλαίσιο κειμένου ονόματος.
2. Επιλέξτε μια τοποθεσία από τη λίστα της Μπανγκαλόρ.
3. Κάντε κλικ στο κουμπί Υποβολή.

Μόλις το κάνετε αυτό, θα δείτε 'Guru99' και η τοποθεσία 'Μπανγκαλόρ' εμφανίζεται στη σελίδα.

Συχνές Ερωτήσεις