Esercitazione sui Web Form ASP.NET: esempi di controlli utente

In ASP.Net è possibile creare codice riutilizzabile. Il codice riutilizzabile può essere utilizzato in molti posti senza la necessità di riscrivere il codice.

Il codice riutilizzabile aiuta a ridurre il tempo impiegato dallo sviluppatore dopo aver scritto il codice. Può essere scritto una sola volta e riutilizzato in più punti.

Crea controllo utente in ASP.Net

ASP.Net offre la possibilità di creare controlli Web. Questi controlli contengono codice riutilizzabile, che può essere impiegato in tutta l'applicazione a seconda delle esigenze.

Vediamo un esempio di come creare un controllo utente web in ASP.Net.

Nel nostro esempio:

• Creeremo un controllo web.
• Verrà utilizzato per creare un componente di intestazione.
• Conterrà il testo seguente: “Guru99 Tutorial” e “Questo tutorial è per ASP.Net”.

Lavoriamo con la nostra attuale applicazione web creata nelle sezioni precedenti. Seguiamo i passaggi seguenti per creare un controllo utente Web.

Passo 1) Il primo passo è creare un controllo utente Web e aggiungerlo alla nostra soluzione Visual Studio.

1. In Visual Studio, apri Esplora soluzioni e fai clic con il pulsante destro del mouse sulla soluzione DemoApplication.
2. Seleziona la voce di menu Aggiungi->Nuovo elemento.

Passo 2) Nel passaggio successivo, dobbiamo scegliere l'opzione di creazione di un controllo utente web.

1. Nella finestra di dialogo del progetto, possiamo vedere varie opzioni per creare diversi tipi di componenti. Clicca sull'opzione "Web" sul lato sinistro.
2. Quando si fa clic sull'opzione "Web", viene visualizzata l'opzione "Controllo utente moduli Web". Fare clic su questa opzione.
3. Diamo quindi un nome al controllo Web, "Guru99Control”.
4. Infine, fare clic sul pulsante "Aggiungi" per consentire a Visual Studio di aggiungere il controllo utente Web alla nostra soluzione.

Vedrai quindi il "Guru99Control è stato aggiunto alla soluzione.

Passo 3) Ora è il momento di aggiungere il codice personalizzato al controllo utente Web. Il nostro codice sarà basato sulla sintassi HTML pura. Aggiungi il seguente codice a 'GuruFile '99Control.ascx'.

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

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

Code Spiegazione:-

1. Nel nostro file Web Control, creiamo innanzitutto un elemento tabella. Questo verrà utilizzato per contenere 2 righe di testo che visualizzeranno “Guru99 Tutorial” e “Questo tutorial è per ASP.Net.”
2. Successivamente, definiamo la nostra prima riga della tabella e inseriamo il testo come "Guru99 tutorial.
3. Definiamo quindi la nostra seconda riga della tabella e inseriamo il testo come "Questo tutorial è per ASP.Net".

NOTA: Al momento non possiamo eseguire questo codice e visualizzarne l'output. L'unico modo per verificare se funziona è includerlo nella nostra applicazione (file aspx). Vedremo come fare nell'argomento successivo.

Registrazione dei controlli utente in un modulo web ASP.NET

Nella sezione precedente, abbiamo visto come creare un controllo web personalizzato. Questo può essere utilizzato per visualizzare le due righe seguenti in un modulo web:

• "Guru99 tutorial”
• "Questo tutorial è per ASP.Net."

Una volta creato il controllo personalizzato, dobbiamo utilizzarlo nella nostra applicazione web. Il primo passo consiste nel registrare il componente nella nostra applicazione (Demo.aspx). Questo è un prerequisito per utilizzare qualsiasi controllo web personalizzato in un'applicazione ASP.Net.

Vediamo come possiamo raggiungere questo obiettivo. I passaggi seguenti sono la continuazione della sezione precedente, in cui abbiamo creato il nostro controllo personalizzato. In questa sezione, useremo il controllo nel nostro Demo.aspx modulo web. Per prima cosa, registreremo il nostro 'controllo' personalizzato nel file Demo.aspx.

Passo 1) Assicurati di lavorare sul file demo.aspx. È in questo file che verrà registrato il controllo utente web. Puoi farlo facendo doppio clic sul file demo.aspx in Esplora soluzioni della tua soluzione .Net.

Facendo doppio clic sul modulo, probabilmente visualizzerete il codice seguente. Si tratta del codice predefinito aggiunto da Visual Studio quando si aggiunge un modulo Web a un progetto ASP.Net. Il codice predefinito comprende i passaggi necessari per garantire che il modulo possa essere eseguito come modulo Web ASP.Net nel browser.

Passo 2) Ora aggiungiamo il nostro codice per registrare il controllo utente. Lo screenshot qui sotto mostra la registrazione del controllo utente aggiunta al codice base precedente.

<%@ 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.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Code Spiegazione:-

1. Il primo passo consiste nella registrazione del controllo utente web. Questa operazione comprende i seguenti parametri di base:
   1. La parola chiave "Register" viene utilizzata per registrare il controllo utente Web.
   2. Il parametro Src viene utilizzato per definire il nome del controllo, che nel nostro caso è Guru99Control.ascx.
   3. TagName e TagPrefix sono nomi individuali assegnati al controllo. Questo viene fatto affinché possano essere referenziati nelle pagine HTML come un normale controllo HTML.
2. Successivamente, facciamo riferimento al nostro controllo utente Web tramite il TagPrefix:TagName che è stato assegnato in precedenza. Il TagPrefix:TagName indica che vogliamo utilizzare il nostro controllo Web personalizzato. Quando la pagina viene elaborata dal server Web, puoi vedere che abbiamo utilizzato il tag TWebControl:WebControl. Verrà quindi elaborato il 'Guru99Control' di conseguenza.
   1. Al controllo "Header" viene assegnato un ID facoltativo. In generale, è buona norma assegnare un ID a un controllo HTML.
   2. Infine, l'attributo runat="server" garantisce che il controllo venga eseguito sul server web. Per tutti i controlli ASP.Net, questo è l'attributo predefinito. Tutti i controlli ASP.Net (inclusi i controlli personalizzati) devono essere eseguiti sul server. Il loro output viene quindi inviato dal server al client e visualizzato di conseguenza nel browser.

Quando viene impostato il codice precedente e il progetto viene eseguito utilizzando Di Visual Studio, otterrai l'output seguente.

Produzione:-

Il messaggio di output visualizzato nel browser mostra che il controllo utente Web è stato eseguito correttamente.

Registrazione globale dei controlli ASP.Net nel file di configurazione web.config

A volte può essere necessario utilizzare controlli utente su più pagine in un'applicazione .Net. In questo caso, non si desidera registrare i controlli utente su ogni singola pagina ASP.Net.

• In .Net è possibile effettuare la registrazione nel file 'web.config'.
• Il file web.config è un file di configurazione comune utilizzato da tutte le pagine web in un progetto .Net.
• Contiene i dettagli di configurazione necessari per il progetto web ASP.Net. Ad esempio, una configurazione comune nel file web.config è la parametro del quadro di destinazione.
• Questo parametro viene utilizzato per identificare la versione di .Net Framework utilizzata dall'applicazione.

Di seguito è riportata un'istantanea del codice predefinito nel file web.config. La parte evidenziata è la parte del framework di destinazione.

Vediamo come possiamo registrare il nostro Guru99Controllo nel file web.config.

Passo 1) Apri il file web.config da Esplora soluzioni facendo doppio clic sul file.

Quando apri il file web.config, potresti vedere la configurazione sottostante. Il file 'web.config' viene aggiunto automaticamente da Visual Studio quando viene creato il progetto. Questa è la configurazione di base richiesta per far funzionare correttamente il progetto ASP.Net.

Passo 2) Ora registriamo il nostro componente nel file web.config. Dobbiamo aggiungere le righe seguenti per questo.

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

La procedura di registrazione si articola nelle seguenti fasi:

1. Aggiungi un tag chiamato . Ciò significa che tutta la configurazione dei controlli sarà applicabile a tutte le pagine ASP.Net nella soluzione.
2. IL tag significa che stai aggiungendo una configurazione per il controllo utente.
3. Successivamente registriamo il controllo utente con il tag aggiuntivo. I parametri rimanenti tagPrefix, tagName e src restano invariati rispetto a prima.

Passo 3) Ricordati di andare alla pagina 'demo.aspx' e rimuovere le righe per il controllo che aveva la registrazione del Guru99 componente. Se non esegui questo passaggio, allora il 'GuruIl file '99Control.ascx' verrà eseguito dal file 'demo.aspx' anziché dal file 'web.config'.

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

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

Una volta impostato il codice sopra riportato ed eseguito il progetto tramite Visual Studio, si otterrà l'output seguente.

Produzione:-

Il messaggio di output mostra che il controllo utente Web è stato eseguito correttamente.

Aggiunta di proprietà pubbliche a un controllo Web

Una proprietà è una coppia chiave-valore associata a qualsiasi controllo. Prendiamo come esempio il semplice Tag HTML. Di seguito è riportata una schermata di come appare il tag.

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

		Demo Form

	</div>
</body>
</html>

Il tag 'div' viene utilizzato per creare una sezione in un documento HTML. Il tag "div" ha una proprietà chiamata proprietà di stile. Questo può essere usato per dare uno stile diverso al testo visualizzato nel tag div. Normalmente vedresti il ​​codice per il tag div come mostrato di seguito.

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

Quindi l'attributo color non è altro che una coppia chiave-valore che fornisce maggiori informazioni sul tag stesso. Nel caso precedente, il nome della chiave è "style" e il valore della chiave è "color:#0000FF".

Allo stesso modo, per i controlli utente, puoi creare le tue proprietà che descrivono il controllo.

Prendiamo un semplice esempio e costruiamo sul nostro 'Guru'99Control' creato nelle sezioni precedenti. Nel nostro esempio, aggiungeremo una semplice proprietà intera chiamata MinValue. Questo valore rappresenterà il numero minimo di caratteri nel testo visualizzato nel controllo utente.

Eseguiamo i passaggi indicati di seguito per metterlo in atto.

Passo 1) Aprire il GuruFile 99Control.ascx. Aggiungere il codice per aggiungere la proprietà 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</td>
	</tr>
</table>

Code Spiegazione:-

L'attributo `script runat="server"` viene utilizzato per indicare che stiamo aggiungendo del codice specifico di .NET e che questo deve essere eseguito sul server web. Ciò è necessario per elaborare qualsiasi proprietà aggiunta al controllo utente. Aggiungiamo quindi la nostra proprietà MinValue e le assegniamo un valore predefinito di 0.

Passo 2) Ora facciamo riferimento a questa proprietà nel file demo.aspx. Tutto quello che stiamo facendo ora è semplicemente fare riferimento alla proprietà MinValue e assegnare un nuovo valore pari a 100.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/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>

NOTA: Quando si esegue questo codice, non verrà visualizzato alcun output. Questo perché l'output non raggiunge il limite di 100 caratteri.

DOMANDE FREQUENTI