ASP.NET
ASP.NET - Controlli utente
Ricerca…
introduzione
I controlli utente sono contenitori che possono essere popolati con markup HTML e controlli server con code-behind allo stesso modo della pagina ASPX. Vengono considerati come unità riutilizzabili di una pagina, quindi non possono essere eseguite come pagine autonome e non devono contenere elementi HTML, corpo o modulo HTML.
Introduzione dei controlli utente
I controlli utente sono fatti per la riusabilità tra le pagine ASP.NET, simili alle pagine master. Invece di condividere il layout della pagina di base, i controlli utente condividono il gruppo di controlli server HTML / ASP.NET incorporati o un layout di modulo specifico, ad esempio l'invio di commenti o le note degli ospiti.
Un controllo utente può contenere controlli HTML e controlli server ASP.NET, inclusi gli script sul lato client.
I controlli utente di solito includono la direttiva di Control
in cima alla sua definizione:
<%@ Control Language="C#" AutoEventWireup="True" CodeFile="UserControl.ascx.cs" %>
Come la pagina ASPX, i controlli utente sono costituiti da markup che possono essere associati a un codice dietro il file per eseguire determinati eventi e attività, quindi tutti i tag HTML disponibili sulla pagina ASPX possono essere utilizzati sui controlli utente ad eccezione di <html>
, <body>
e <form>
tag.
Ecco un esempio di semplice markup del controllo utente:
<%-- UserControl.ascx --%>
<%@ Control Language="C#" AutoEventWireup="True" CodeFile="UserControl.ascx.cs" %>
<div>
<asp:Label ID="Label1" runat="server" />
<br />
<asp:Button ID="Button1" runat="server" Text="Click Here" OnClick="Button1_Click" />
</div>
Esempio di codice sottostante:
// UserControl.ascx.cs
public partial class UserControl : System.Web.UI.UserControl
{
protected void Button1_Click(Object sender, EventArgs e)
{
Label1.Text = "Hello World!";
}
}
Prima di un controllo utente inserito nella pagina ASPX, la direttiva Register
deve essere dichiarata in cima alla pagina facendo riferimento al controllo utente con il suo URL sorgente, il nome del tag e il prefisso del tag.
<%@ Register Src="UserControl.ascx" TagName="UserControl" TagPrefix="uc" %>
Successivamente, è possibile inserire il controllo utente all'interno della pagina ASPX come il controllo del server integrato di ASP.NET:
<uc:UserControl ID="UserControl1" runat="server" />
Creazione di istanze di controllo utente a livello di programmazione
Se si desidera creare un'istanza di controllo utente all'interno del codice ASPX dietro la pagina, è necessario scrivere la dichiarazione di controllo utente nell'evento Page_Load
come segue:
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(Object sender, EventArgs e)
{
Control control1 = LoadControl("UserControl.ascx");
Page.Controls.Add(control1);
}
}
Si noti che il file ASCX del controllo utente deve essere già creato quando si esegue il metodo LoadControl.
Un altro modo noto per dichiarare i controlli utente in modo programmatico è l'utilizzo di PlaceHolder
:
public partial class Default : System.Web.UI.Page
{
public PlaceHolder Placeholder1;
protected void Page_Load(Object sender, EventArgs e)
{
Control control1 = LoadControl("UserControl.ascx");
Placeholder1.Controls.Add(control1);
}
}
A seconda delle esigenze, PlaceHolder
colloca i controlli utente in un contenitore che memorizza tutti i controlli server aggiunti dinamicamente nella pagina, dove Page.Controls
inserisce direttamente il controllo utente all'interno della pagina che è più preferito per il rendering dei controlli letterali HTML.
Aggiunta di proprietà personalizzate per il controllo utente
Come i controlli standard del server integrato di ASP.NET, i controlli utente possono avere proprietà (attributi) sul proprio tag di definizione. Supponiamo di voler aggiungere l'effetto colore sul file UserControl.ascx
questo modo:
<uc:UserControl ID="UserControl1" runat="server" Color="blue" />
A questo punto, è possibile impostare attributi / proprietà personalizzate per i controlli utente dichiarando le proprietà all'interno del codice del controllo utente sottostante:
private String _color;
public String Color
{
get
{
return _color;
}
set
{
_color = value;
}
}
Inoltre, se si desidera impostare il valore predefinito su una proprietà del controllo utente, assegnare il valore predefinito nel metodo di costruzione del controllo utente.
public UserControl()
{
_color = "red";
}
Quindi, il markup del controllo utente deve essere modificato per aggiungere l'attributo color come nell'esempio seguente:
<%@ Control Language="C#" AutoEventWireup="True" CodeFile="UserControl.ascx.cs" %>
<div>
<span style="color:<%= Color %>"><asp:Label ID="Label1" runat="server" /></span>
<br />
<asp:Button ID="Button1" runat="server" Text="Click Here" OnClick="Button1_Click" />
</div>