Procedura: creare controlli utente ASP.NET basati su modelli
Aggiornamento: novembre 2007
È possibile creare controlli utente che implementano i modelli, una funzionalità di ASP.NET che consente la separazione dei dati dei controlli dalla relativa presentazione. I controlli basati su i modelli non forniscono interfaccia utente, ma sono scritti per implementare un contenitore di denominazione e includere una classe con proprietà e metodi accessibili dalla pagina host.
L'interfaccia utente per il controllo utente è fornita dagli sviluppatori delle pagine in fase di progettazione. Lo sviluppatore crea i tipi di i modelli definiti dal controllo utente, e può anche aggiungere controlli e codice ai i modelli.
Per creare un controllo utente basato su template
Nel file ASCX, aggiungere un controllo ASP.NET PlaceHolder nel punto in cui si desidera che venga visualizzato il modello.
Nel codice del controllo utente, implementare una proprietà di tipo ITemplate.
Definire una classe di controllo server che implementa l'interfaccia INamingContainer come il contenitore in cui creare un'istanza del modello. Tale contenitore viene definito contenitore di denominazione del template.
.gif "Nota")
Nota:Questo controllo diventa essenzialmente una classe nidificata del controllo utente, anche se tale trasformazione non è obbligatoria.
Applicare TemplateContainerAttribute alla proprietà che implementa ITemplate e passare il tipo del contenitore di denominazione del i modello come argomento al costruttore dell'attributo.
Nel metodo Init del controllo, ripetere una o più volte i passaggi seguenti:
Creare un'istanza della classe del contenitore di denominazione.
Creare un'istanza del template nel contenitore di denominazione.
Aggiungere l'istanza del contenitore di denominazione alla proprietà Controls del controllo server PlaceHolder.
Nota:Dal punto di vista della pagina che utilizza il controllo utente, la sintassi per il controllo utente basato su modelli è identica a quella di un controllo personalizzato basato su modelli.
Esempio
Nell'esempio riportato di seguito vengono illustrati un controllo utente basato su modelli e la pagina che lo contiene. Il controllo utente crea un modello che può essere dichiarato su una pagina host come <MessageTemplate>. Il controllo basato su modelli espone inoltre due proprietà, Index e Message, accessibili dalla pagina host all'interno del modello.
Nel primo esempio viene illustrato il controllo utente basato su modelli. Nel secondo esempio viene illustrata una pagina che contiene il controllo utente.
<%@ Control language="VB" ClassName="TemplatedUC" %>
<%@ Import Namespace="System.ComponentModel" %>
<script >
Private m_messageTemplate As ITemplate = Nothing
<TemplateContainer(GetType(MessageContainer))> _
<PersistenceMode(PersistenceMode.InnerProperty)> Public Property _
MessageTemplate() As ITemplate
Get
Return m_messageTemplate
End Get
Set(ByVal value As ITemplate)
m_messageTemplate = Value
End Set
End Property
Sub Page_Init()
If Not (MessageTemplate Is Nothing) Then
Dim i As Integer
Dim fruits() As String = _
{"apple", "orange", "banana", "pineapple"}
For i = 0 To 3
Dim container As New MessageContainer(i, fruits(i))
MessageTemplate.InstantiateIn(container)
PlaceHolder1.Controls.Add(container)
Next i
End If
End Sub
Public Class MessageContainer
Inherits Control
Implements INamingContainer
Private m_index As Integer
Private m_message As String
Friend Sub New(ByVal i As Integer, ByVal msg As String)
Me.Index = i
Me.Message = msg
End Sub
Public Property Index() As Integer
Get
Return m_index
End Get
Set(ByVal value As Integer)
m_index = value
End Set
End Property
Public Property Message() As String
Get
Return m_message
End Get
Set(ByVal value As String)
m_message = value
End Set
End Property
End Class
</script>
<asp:Placeholder ID="PlaceHolder1" />
<%@ Control language="C#" ClassName="TemplatedUC" %>
<%@ Import Namespace="System.ComponentModel" %>
<script >
private ITemplate messageTemplate = null;
[ TemplateContainer(typeof(MessageContainer)) ]
[ PersistenceMode(PersistenceMode.InnerProperty) ]
public ITemplate MessageTemplate {
get
{
return messageTemplate;
}
set
{
messageTemplate = value;
}
}
void Page_Init() {
if (messageTemplate != null) {
String[] fruits = {"apple", "orange", "banana", "pineapple" };
for (int i=0; i<4; i++)
{
MessageContainer container = new MessageContainer(i, fruits[i]);
messageTemplate.InstantiateIn(container);
PlaceHolder1.Controls.Add(container);
}
}
}
public class MessageContainer: Control, INamingContainer {
private int m_index;
private String m_message;
internal MessageContainer(int index, String message)
{
m_index = index;
m_message = message;
}
public int Index {
get
{
return m_index;
}
}
public String Message
{
get
{
return m_message;
}
}
}
</script>
<asp:Placeholder ID="PlaceHolder1" />
<%@ Page Language="VB" %>
<%@ Register TagPrefix="uc" tagname="TemplateTest"
Src="TemplatedUC.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script >
Sub Page_Load()
DataBind()
End Sub
</script>
<head>
<title>Templated User Control Test</title>
</head>
<body>
<h1>Testing Templated User Control</h1>
<form id="Form1" >
<uc:TemplateTest >
<MessageTemplate>
Index: <asp:Label ID="Label1"
Text='<%# Container.Index %>' />
<br />
Message: <asp:Label ID="Label2"
Text='<%# Container.Message %>' />
<hr />
</MessageTemplate>
</uc:TemplateTest>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Register TagPrefix="uc" tagname="TemplateTest"
Src="TemplatedUC.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script >
protected void Page_Load()
{
DataBind();
}
</script>
<head>
<title>Templated User Control Test</title>
</head>
<body>
<h1>Testing Templated User Control</h1>
<form id="Form1" >
<uc:TemplateTest >
<MessageTemplate>
Index: <asp:Label ID="Label1"
Text='<%# Container.Index %>' />
<br />
Message: <asp:Label ID="Label2"
Text='<%# Container.Message %>' />
<hr />
</MessageTemplate>
</uc:TemplateTest>
</form>
</body>
</html>