Οδηγός ASP.NET Web Forms: Παραδείγματα στοιχείων ελέγχου χρήστη

Στο ASP.Net, είναι δυνατή η δημιουργία επαναχρησιμοποιήσιμου κώδικα. Ο επαναχρησιμοποιήσιμος κωδικός μπορεί να χρησιμοποιηθεί σε πολλά σημεία χωρίς να χρειάζεται να γράψετε ξανά τον κωδικό.

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

Δημιουργία ελέγχου χρήστη στο ASP.Net

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

Ας ρίξουμε μια ματιά σε ένα παράδειγμα για το πώς μπορούμε να δημιουργήσουμε ένα στοιχείο ελέγχου χρήστη web στο ASP.Net

Στο παράδειγμά μας,

Θα δημιουργήσουμε ένα web control.
Θα χρησιμοποιηθεί για τη δημιουργία ενός στοιχείου κεφαλίδας.
Θα περιέχει το παρακάτω κείμενο."Guru99 Tutorials"Αυτό το σεμινάριο είναι για το ASP.Net"

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

Βήμα 1) Το πρώτο βήμα είναι να δημιουργήσετε ένα στοιχείο ελέγχου χρήστη Ιστού και να το προσθέσετε στη Λύση του Visual Studio.

Μεταβείτε στην Εξερεύνηση λύσεων στο Visual Studio και κάντε δεξί κλικ στη Λύση DemoApplication
Επιλέξτε το στοιχείο μενού Προσθήκη->Νέο στοιχείο

Βήμα 2) Στο επόμενο βήμα, πρέπει να επιλέξουμε την επιλογή δημιουργίας στοιχείου ελέγχου χρήστη web

Στο πλαίσιο διαλόγου του έργου, μπορούμε να δούμε διάφορες επιλογές για τη δημιουργία διαφορετικών τύπων στοιχείων. Κάντε κλικ στην επιλογή "Ιστός" στην αριστερή πλευρά.
Όταν κάνουμε κλικ στην επιλογή "Ιστός", εμφανίζεται μια επιλογή για "Έλεγχος χρήστη φορμών Ιστού". Κάντε κλικ σε αυτήν την επιλογή.
Στη συνέχεια δίνουμε ένα όνομα για το στοιχείο ελέγχου Web "Guru99Control".
Τέλος, κάντε κλικ στο κουμπί «Προσθήκη» για να επιτρέψετε στο Visual Studio να προσθέσει τον έλεγχο χρήστη web στη λύση μας.

Θα δείτε το "Guru99Control" που προστέθηκε στη λύση.

Βήμα 4) Τώρα είναι ώρα να προσθέσετε τον προσαρμοσμένο κώδικα στο στοιχείο ελέγχου χρήστη Web. Ο κώδικάς μας θα βασίζεται σε καθαρή σύνταξη HTML. Προσθέστε τον ακόλουθο κώδικα στο αρχείο «Guru99Control.ascx».

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>
	
	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Επεξήγηση κώδικα: -

Στο αρχείο Web Control, δημιουργούμε πρώτα ένα στοιχείο πίνακα. Αυτό θα χρησιμοποιηθεί για να κρατήσει 2 σειρές κειμένου που θα χρησιμοποιηθούν για εμφάνιση

"Guru99 Tutorials" και
"Αυτό το σεμινάριο είναι για το ASP.Net."

Στη συνέχεια, ορίζουμε την πρώτη μας σειρά πίνακα και τοποθετούμε το κείμενο ως "Guru99 Tutorials".
Στη συνέχεια ορίζουμε τη δεύτερη σειρά του πίνακα και βάζουμε το κείμενο ως "Αυτό το σεμινάριο είναι για το ASP.Net".

ΣΗΜΕΊΩΣΗ: Τώρα δεν μπορούμε να εκτελέσουμε αυτόν τον κώδικα και να εμφανίσουμε την έξοδο. Ο μόνος τρόπος για να δούμε αν αυτό λειτουργεί είναι να το συμπεριλάβουμε στην εφαρμογή μας (αρχείο aspx). Αυτό θα το δούμε στο επόμενο θέμα.

Καταχώρηση στοιχείων ελέγχου χρήστη σε φόρμες web ASP.NET

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

“Guru99 Tutorials”
"Αυτό το σεμινάριο είναι για το ASP.Net."

Μόλις δημιουργηθεί το προσαρμοσμένο 'control', πρέπει να το χρησιμοποιήσουμε στην εφαρμογή web μας. Το πρώτο βήμα είναι να καταχωρήσουμε το στοιχείο στην εφαρμογή μας (Demo.aspx). Αυτή είναι η προϋπόθεση για χρήση σε οποιοδήποτε προσαρμοσμένο στοιχείο ελέγχου web σε μια εφαρμογή ASP.Net.

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

Αρχικά, θα καταχωρήσουμε το προσαρμοσμένο μας «control» στο αρχείο Demo.aspx.

Βήμα 1) Βεβαιωθείτε ότι εργάζεστε στο αρχείο demo.aspx. Σε αυτό το αρχείο θα καταχωρηθεί το στοιχείο ελέγχου χρήστη web. Αυτό μπορεί να γίνει κάνοντας διπλό κλικ στο αρχείο demo.aspx στην Εξερεύνηση λύσεων της λύσης .Net.

Μόλις κάνετε διπλό κλικ στη φόρμα, πιθανότατα θα δείτε τον παρακάτω κώδικα στη φόρμα. Αυτός είναι ο προεπιλεγμένος κώδικας που προστίθεται από το Visual Studio όταν προστίθεται μια φόρμα Ιστού σε ένα έργο ASP.Net.

Ο προεπιλεγμένος κώδικας αποτελείται από βήματα, τα οποία απαιτούνται για να διασφαλιστεί ότι η φόρμα μπορεί να εκτελεστεί ως φόρμα web ASP.Net στο πρόγραμμα περιήγησης.

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl"%>

<!DOCTYPE html>
	<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Επεξήγηση κώδικα: -

Το πρώτο βήμα είναι να καταχωρήσετε το στοιχείο ελέγχου χρήστη web. Αυτό αποτελείται από τις παρακάτω βασικές παραμέτρους
1. Η λέξη-κλειδί "Εγγραφή" χρησιμοποιείται για την εγγραφή του στοιχείου ελέγχου χρήστη ιστού.
2. Η παράμετρος src χρησιμοποιείται για τον ορισμό του ονόματος του στοιχείου ελέγχου, το οποίο στην περίπτωσή μας είναι Guru99Control.ascx.
3. Το όνομα ετικέτας και το πρόθεμα ετικέτας είναι μεμονωμένα ονόματα που δίνονται στο στοιχείο ελέγχου. Αυτό γίνεται για να μπορούν να παραπέμπουν σε σελίδες HTML ως κανονικό στοιχείο ελέγχου HTML.
Στη συνέχεια, αναφερόμαστε στον έλεγχο χρήστη Web μέσω του TagPrefix:TagName που είχε εκχωρηθεί νωρίτερα. Το TagPrefix:TagName είναι μια ένδειξη ότι θέλουμε να χρησιμοποιήσουμε το προσαρμοσμένο μας στοιχείο ελέγχου ιστού. Όταν η σελίδα υποβάλλεται σε επεξεργασία από τον διακομιστή ιστού, μπορείτε να δείτε ότι χρησιμοποιήσαμε την ετικέτα TWebControl:WebControl. Στη συνέχεια θα επεξεργαστεί το 'Guru99Control' αναλόγως. Στο παράδειγμά μας, είναι το TWebControl:WebControl.
1. Δίνεται ένα προαιρετικό αναγνωριστικό στο στοιχείο ελέγχου "Header". Είναι γενικά μια καλή πρακτική να δίνετε ένα αναγνωριστικό σε ένα στοιχείο ελέγχου HTML.
2. Τέλος, το χαρακτηριστικό runat=server έτσι ώστε το στοιχείο ελέγχου να εκτελείται στον διακομιστή web. Για όλα τα στοιχεία ελέγχου ASP.Net, αυτό είναι το προεπιλεγμένο χαρακτηριστικό. Όλα τα στοιχεία ελέγχου ASP.Net (συμπεριλαμβανομένων των προσαρμοσμένων στοιχείων ελέγχου) πρέπει να εκτελούνται στον διακομιστή. Στη συνέχεια, η έξοδος τους αποστέλλεται από τον διακομιστή στον πελάτη και εμφανίζεται στο πρόγραμμα περιήγησης ανάλογα.

Όταν οριστεί ο παραπάνω κώδικας και το έργο εκτελείται χρησιμοποιώντας Visual Studio. Θα λάβετε την παρακάτω έξοδο.

Παραγωγή:-

Το μήνυμα εξόδου που εμφανίζεται στο πρόγραμμα περιήγησης δείχνει ότι ο έλεγχος χρήστη web εκτελέστηκε με επιτυχία.

Καταχώρηση στοιχείων ελέγχου asp.net καθολικά στο αρχείο διαμόρφωσης παραμέτρων web asp

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

Στο .Net μπορείτε να πραγματοποιήσετε την εγγραφή στο αρχείο 'web.config'.
Το αρχείο web.config είναι ένα κοινό αρχείο διαμόρφωσης που χρησιμοποιείται από όλες τις ιστοσελίδες στο έργο .Net.
Περιέχει τις απαραίτητες λεπτομέρειες διαμόρφωσης για το έργο web ASP.Net. Για παράδειγμα, μια κοινή διαμόρφωση στο αρχείο web.config είναι η παράμετρος πλαισίου στόχου.
Αυτή η παράμετρος χρησιμοποιείται για τον προσδιορισμό της έκδοσης πλαισίου .Net που χρησιμοποιείται από την εφαρμογή.

Παρακάτω είναι ένα στιγμιότυπο του προεπιλεγμένου κώδικα στο αρχείο web.config. Το επισημασμένο τμήμα είναι το τμήμα πλαισίου στόχου.

Ας δούμε πώς μπορούμε να καταχωρήσουμε το Guru99Control στο αρχείο web.config.

Βήμα 1) Ανοίξτε το αρχείο web.config από την εξερεύνηση λύσεων κάνοντας διπλό κλικ στο αρχείο.

Όταν ανοίγετε το αρχείο web.config, ενδέχεται να δείτε την παρακάτω διαμόρφωση. Το "web.config" προστίθεται αυτόματα από το Visual Studio κατά τη δημιουργία του έργου. Αυτή είναι η βασική διαμόρφωση που απαιτείται για να λειτουργήσει σωστά το έργο ASP.Net.

Βήμα 2) Τώρα ας καταχωρήσουμε το στοιχείο μας στο αρχείο web.config. Πρέπει να προσθέσουμε τις παρακάτω γραμμές για αυτό.

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src ="~/Guru99Control.ascx" tagName="WebControl"/>
		</controls>
	</pages>
	</system.web>
</configuration>

Η εγγραφή περιλαμβάνει τα παρακάτω υποβήματα

Προσθέστε μια ετικέτα που ονομάζεται . Σημαίνει ότι όλες οι ρυθμίσεις παραμέτρων για τα στοιχεία ελέγχου θα είναι εφαρμόσιμες σε όλες τις σελίδες ASP.Net στη λύση.
ο ετικέτα σημαίνει ότι προσθέτετε μια διαμόρφωση για το στοιχείο ελέγχου χρήστη.
Στη συνέχεια καταχωρούμε το στοιχείο ελέγχου χρήστη με την πρόσθετη ετικέτα. Οι υπόλοιπες παράμετροι των tagPrefix, tagName και src παραμένουν οι ίδιες όπως πριν.

Βήμα 3) Θυμηθείτε να μεταβείτε στη σελίδα 'demo.aspx' και να αφαιρέσετε τις γραμμές για έλεγχο, οι οποίες είχαν την εγγραφή του στοιχείου Guru99. Εάν δεν εκτελέσετε αυτό το βήμα, τότε το αρχείο "Guru99Control.ascx" a θα εκτελεστεί από το αρχείο "demo.aspx" αντί για το αρχείο "web.config".

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl"%>

<!DOCTYPE html>
<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>	
<body>
	<form id="form1" runat="server”>
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Ο παραπάνω κώδικας ορίζεται και το έργο εκτελείται χρησιμοποιώντας το Visual Studio. Θα λάβετε την παρακάτω έξοδο.

Παραγωγή:-

Το μήνυμα εξόδου δείχνει ότι ο έλεγχος χρήστη web εκτελέστηκε με επιτυχία.

Προσθήκη δημόσιων ιδιοτήτων σε στοιχείο ελέγχου ιστού

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

<html>
<body>
	<div style="color:#0000FF">
		  
		Demo Form
			
	</div>	
		
<body>
</html>

Η ετικέτα 'div' χρησιμοποιείται για τη δημιουργία μιας ενότητας σε ένα έγγραφο HTML. Η ετικέτα 'div' έχει μια ιδιότητα που ονομάζεται ιδιότητα στυλ. Αυτό μπορεί να χρησιμοποιηθεί για να δώσει διαφορετικό στυλ στο κείμενο που εμφανίζεται στην ετικέτα div. Κανονικά θα δείτε τον κωδικό για την ετικέτα div όπως φαίνεται παρακάτω.

<div style="color:#0000FF">

Έτσι, το χαρακτηριστικό χρώμα δεν είναι παρά ένα ζεύγος κλειδιού-τιμής που δίνει περισσότερες πληροφορίες για την ίδια την ετικέτα. Στην παραπάνω περίπτωση, το όνομα του κλειδιού είναι "style" και η τιμή του κλειδιού είναι "color:#0000FF".

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

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

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

Ας εκτελέσουμε τα παρακάτω βήματα για να το πετύχουμε.

Βήμα 1) Ανοίξτε το αρχείο Guru99Control.ascx. Προσθέστε τον κωδικό για την προσθήκη της ιδιότητας MinValue.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

	<script runat="server">
	  public int MinValue = 0;
	</script>
	
<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>
	
	<tr>
	  <td> This Tutorial is for
	</tr>
</table>

Επεξήγηση κώδικα: -

Το χαρακτηριστικό script runat=server χρησιμοποιείται για να υποδείξει ότι προσθέτουμε κάποιο συγκεκριμένο κώδικα.Net και ότι πρέπει να εκτελεστεί στον διακομιστή web.

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

Βήμα 2) Τώρα ας αναφερθούμε σε αυτήν την ιδιότητα στο αρχείο demo.aspx. Το μόνο που κάνουμε τώρα είναι απλώς να αναφέρουμε την ιδιότητα MinValue και να εκχωρήσουμε μια νέα τιμή 100.

!DOCTYPE html>
<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>	
<body>
	<form id="form1" runat="server”>
	  <TWebControl:WebControl ID="Header" runat="server" MinValue="100"/>
	</form>
</body>
</html>

ΣΗΜΕΊΩΣΗ: – Όταν εκτελείτε αυτόν τον κωδικό, δεν θα εμφανίζει καμία έξοδο. Αυτό συμβαίνει επειδή η έξοδος πέφτει κάτω από το όριο των 100 χαρακτήρων.

Περίληψη

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

Δημιουργία ελέγχου χρήστη στο ASP.Net

Καταχώρηση στοιχείων ελέγχου χρήστη σε φόρμες web ASP.NET

Καταχώρηση στοιχείων ελέγχου asp.net καθολικά στο αρχείο διαμόρφωσης παραμέτρων web asp

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

Προσθήκη δημόσιων ιδιοτήτων σε στοιχείο ελέγχου ιστού

Περίληψη

Εγγραφείτε στο ενημερωτικό δελτίο