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

By: Giacobbe Lee Giacobbe Lee
Hours aggiornato

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 la quantità di tempo impiegato dallo sviluppatore dopo aver scritto il codice. Può essere fatto una volta e riutilizzato in più posti.

Crea controllo utente in ASP.Net

ASP.Net ha la capacità di creare controlli Web. Questi controlli contengono codice che può essere riutilizzato. Può essere utilizzato in tutte le applicazioni secondo i requisiti.

Diamo un'occhiata a un esempio di come possiamo 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 indicato di seguito."Tutorial Guru99"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.

Crea controllo utente in ASP.Net

  1. Vai a Esplora soluzioni in Visual Studio e fai clic con il pulsante destro del mouse sulla soluzione DemoApplication
  2. Scegli la voce di menu Aggiungi->Nuovo elemento

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

Crea controllo utente in ASP.Net

  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 facciamo clic sull'opzione "Web", viene visualizzata un'opzione per "Controllo utente Web Form". 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 il "Guru99Control" aggiunto alla soluzione.

Crea controllo utente in ASP.Net

Passo 4) Ora è il momento di aggiungere il codice personalizzato al controllo utente Web. Il nostro codice sarà basato sulla sintassi HTML pura. Aggiungere il seguente codice al file 'Guru99Control.ascx'

Crea controllo utente in ASP.Net

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

Spiegazione del codice: -

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

NOTA: Ora non possiamo eseguire questo codice e mostrare l'output. L'unico modo per vedere se funziona è includerlo nella nostra applicazione (file aspx). Lo vedremo nel prossimo argomento.

Registrazione dei controlli utente su moduli Web ASP.NET

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

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

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

Registrazione dei controlli utente su ASP.NET

Diamo un'occhiata a come possiamo raggiungere questo obiettivo. I passaggi seguenti sono una continuazione della sezione precedente. Nella sezione precedente, abbiamo creato il nostro controllo personalizzato. In questa sezione utilizzeremo 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 nel Solution explorer della tua soluzione .Net.

Registrazione dei controlli utente su ASP.NET

Una volta fatto doppio clic sul form, probabilmente vedrai il codice sottostante nel form. Questo è il codice predefinito aggiunto da Visual Studio quando un web form viene aggiunto a un progetto ASP.Net.

Il codice predefinito è costituito da passaggi necessari per garantire che il modulo possa essere eseguito come modulo Web ASP.Net nel browser.

Registrazione dei controlli utente su ASP.NET

Passo 2) Ora aggiungiamo il nostro codice per registrare il controllo utente. Lo screenshot seguente mostra la registrazione del controllo utente nel codice base sopra.

Registrazione dei controlli utente su ASP.NET

<%@ 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>

Spiegazione del codice: -

  1. Il primo passaggio consiste nel registrare il controllo utente Web. Questo 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. Il tagname e il Tagprefix sono nomi individuali dati al controllo. Questo viene fatto in modo che possano fare riferimento alle pagine HTML come un normale controllo HTML.
  2. Successivamente, facciamo riferimento al nostro controllo utente Web tramite TagPrefix:TagName assegnato in precedenza. TagPrefix:TagName è un indicatore 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. Quindi elaborerà di conseguenza il 'Guru99Control'. Nel nostro esempio, è TWebControl:WebControl.
    1. Un ID opzionale viene assegnato al controllo dell'“Intestazione”. In genere è una buona pratica fornire un ID a un controllo HTML.
    2. Infine, l'attributo runat=server in modo 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:-

Registrazione dei controlli utente su ASP.NET

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

Registrazione dei controlli asp.net a livello globale nel file di configurazione web config asp

A volte potrebbe essere necessario utilizzare i controlli utente su più pagine in un'applicazione .Net. A questo punto non vorrai continuare a 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 nel 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.

ARTICOLI CORRELATI

Registrazione dei controlli asp.net a livello globale nella configurazione Web

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

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

Registrazione dei controlli asp.net a livello globale nella configurazione Web

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.

Registrazione dei controlli asp.net a livello globale nella configurazione Web

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

Registrazione dei controlli asp.net a livello globale nella configurazione Web

<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 registrazione comprende i passaggi secondari riportati di seguito

  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. Quindi registriamo il controllo utente con il tag aggiuntivo. I restanti parametri di tagPrefix, tagName e src rimangono gli stessi di prima.

Passo 3) Ricordarsi di andare alla pagina 'demo.aspx' e rimuovere le righe per il controllo, che contenevano la registrazione del componente Guru99. Se non si esegue questo passaggio, il file 'Guru99Control.ascx' verrà eseguito dal file 'demo.aspx' invece che dal file 'web.config'.

Registrazione dei controlli asp.net a livello globale nella configurazione Web

<%@ 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>

Il codice sopra è impostato e il progetto è eseguito tramite Visual Studio. Otterrai l'output seguente.

Produzione:-

Registrazione dei controlli asp.net a livello globale nella configurazione Web

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. Facciamo un esempio semplice Etichetta HTML. Di seguito è mostrato uno screenshot di come appare il tag.

Aggiunta di proprietà pubbliche a un controllo Web

<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 sviluppiamo il nostro "Guru99Control" creato nelle sezioni precedenti.

Nel nostro esempio, aggiungeremo una semplice proprietà intera chiamata MinValue. Questo valore rappresenterebbe 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 file Guru99Control.ascx. Aggiungi il codice per aggiungere la proprietà MinValue.

Aggiunta di proprietà pubbliche a un controllo Web

<%@ 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>

Spiegazione del codice: -

L'attributo script runat=server viene utilizzato per indicare che stiamo aggiungendo del codice specifico.Net e che deve essere eseguito sul server web.

Ciò è necessario per l'elaborazione di qualsiasi proprietà aggiunta al controllo utente. Aggiungiamo quindi la nostra proprietà MinValue e le diamo un valore predefinito pari a 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.

Aggiunta di proprietà pubbliche a un controllo Web

!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>

NOTA: – Quando esegui questo codice, non mostrerà alcun output. Questo perché l'output rientra nel limite di 100 caratteri.

Sommario

  • ASP.Net ha la capacità di creare controlli utente. I controlli utente vengono utilizzati per avere codice che viene utilizzato più volte in un'applicazione. Il controllo utente può quindi essere riutilizzato nell'applicazione.
  • Il controllo utente deve essere registrato nella pagina ASP.Net prima di poter essere utilizzato.
  • Per utilizzare il controllo utente su tutte le pagine di un'applicazione, registrarlo nel file web.config.
  • È inoltre possibile aggiungere proprietà a un controllo utente Web.

Potrebbe piacerti: