Comment : personnaliser l'apparence et le comportement d'un champ de données dans un contrôle Dynamic Data
Mise à jour : novembre 2007
Dynamic Data ASP.NET utilisent des modèles de champs pour restituer chaque champ de données d'une table. Les modèles de champs sont en général des contrôles utilisateur (fichiers .ascx) qui sont mappés aux types de données CLR (Common Language Runtime) déterminés par le type de données de base de données. Généralement, Dynamic Data ASP.NET fournit un contrôle utilisateur permettant d'afficher les données de chaque type et un autre permettant de modifier ou d'insérer des données pour ce type.
Cette rubrique décrit comment personnaliser l'apparence et le comportement d'un champ de données en définissant la propriété UIHint dans un contrôle Dynamic Data tel que le contrôle DynamicControl et le champ DynamicField. La propriété UIHint spécifie le modèle de champ à utiliser lorsqu'un champ de données spécifique est restitué par l'un de ces objets. La propriété UIHint peut pointer vers l'un des modèles fournis ou vers un nouveau que vous créez. Cette approche est utile lorsque vous n'utilisez pas les pages qui sont automatiquement créées par Dynamic Data, mais qu'à la place vous créez des pages Web personnalisées pour afficher et modifier les données.
Vous pouvez également modifier l'affichage et l'apparence du champ de données sur l'ensemble de l'application en utilisant des attributs. Pour plus d'informations, consultez Comment : personnaliser l'apparence et le comportement d'un champ de données dans le modèle de données.
Pour personnaliser l'apparence et le comportement d'un champ de données dans un contrôle lié aux données
Si vous le souhaitez, créez un modèle de champ personnalisé qui définit l'interface utilisateur d'un champ de données spécifique dans le modèle de données. Pour plus d'informations, consultez Comment : personnaliser l'affichage d'un champ de données dans le modèle de données.
Si vous utilisez les contrôles GridView ou DetailsView, ajoutez un objet DynamicField et affectez à sa propriété UIHint le nom du modèle de champ à utiliser pour afficher les données.
L'exemple suivant montre comment utiliser un contrôle DynamicField pour restituer la colonne ProductName en utilisant un modèle de champ nommé RedText. En mode d'affichage, les données sont affichées en utilisant un modèle de champ nommé RedText.ascx. En mode édition ou insertion, les données sont affichées en utilisant un modèle de champ nommé RedText_Edit.ascx.
<asp:DynamicField UIHint="RedText" DataField="ProductName" />.gif "Remarque")
Remarque :Si le modèle de champ spécifié est introuvable, Dynamic Data utilise un mécanisme de secours. Pour plus d'informations, consultez Vue d'ensemble des modèles de champs Dynamic Data ASP.NET.
Si vous utilisez des contrôles liés aux données qui utilisent des modèles ou des champs de modèle, tels que les contrôles ListView ou FormView, ajoutez un contrôle DynamicControl pour afficher les données et affectez à sa propriété UIHint le nom du champ de données à afficher.
L'exemple suivant spécifie que la colonne ProductName sera restituée en utilisant un modèle de champ nommé RedText lorsque l'élément est en mode édition. Au moment de l'exécution, Dynamic Data recherchera un contrôle utilisateur nommé RedText_Edit.ascx.
<EditItemTemplate> <asp:DynamicControl Mode="Edit" UIHint="RedText" DataField="ProductName" /> </EditItemTemplate>
Exemple
L'exemple suivant montre comment ajouter la propriété UIHint à un champ DynamicField d'un contrôle GridView. La propriété est définie afin que le champ de données utilise un modèle de champ personnalisé qui affiche un contrôle Calendar permettant de modifier la date d'arrêt. Le deuxième et le troisième exemple présentent le code de contrôle utilisateur pour les modèles de champs qui définissent l'interface utilisateur permettant d'afficher la date au format court et de modifier le champ.
<%@ Page Language="VB" %>
<script >
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs)
DynamicDataManager1.RegisterControl(ProductsGridView)
End Sub
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UIHint Property Sample</title>
<link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" >
<div>
<h2><%= ProductsDataSource.TableName%> table</h2>
<asp:DynamicDataManager ID="DynamicDataManager1"
AutoLoadForeignKeys="true" />
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true"/>
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<asp:GridView ID="ProductsGridView" DataSourceID="ProductsDataSource"
AutoGenerateEditButton="true"
AutoGenerateColumns="false"
AllowSorting="true"
AllowPaging="true">
<Columns>
<asp:DynamicField DataField="Name" />
<asp:DynamicField DataField="ProductNumber" />
<asp:DynamicField DataField="DiscontinuedDate" UIHint="DateCalendar" />
</Columns>
<EmptyDataTemplate>
There are currently no items in this table.
</EmptyDataTemplate>
</asp:GridView>
<!-- This example uses Microsoft SQL Server and connects -->
<!-- to the AdventureWorksLT sample database. -->
<asp:LinqDataSource ID="ProductsDataSource"
EnableUpdate="true"
TableName="Products"
ContextTypeName="AdventureWorksLTDataContext" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<script >
protected void Page_Init(object sender, EventArgs e)
{
DynamicDataManager1.RegisterControl(ProductsGridView);
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UIHint Property Sample</title>
<link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" >
<div>
<h2><%= ProductsDataSource.TableName%> table</h2>
<asp:DynamicDataManager ID="DynamicDataManager1"
AutoLoadForeignKeys="true" />
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true"/>
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<asp:GridView ID="ProductsGridView" DataSourceID="ProductsDataSource"
AutoGenerateEditButton="true"
AutoGenerateColumns="false"
AllowSorting="true"
AllowPaging="true">
<Columns>
<asp:DynamicField DataField="Name" />
<asp:DynamicField DataField="ProductNumber" />
<asp:DynamicField DataField="DiscontinuedDate" UIHint="DateCalendar" />
</Columns>
<EmptyDataTemplate>
There are currently no items in this table.
</EmptyDataTemplate>
</asp:GridView>
<asp:LinqDataSource ID="ProductsDataSource"
EnableUpdate="true"
TableName="Products"
ContextTypeName="AdventureWorksLTDataContext" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<%@ Control Language="VB" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>
<script >
Function GetDateString() As String
If Not (FieldValue Is Nothing) Then
Dim dt As DateTime = CType(FieldValue, DateTime)
Return dt.ToShortDateString()
Else
Return String.Empty
End If
End Function
</script>
<%# GetDateString() %>
<%@ Control Language="C#" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>
<script >
string GetDateString()
{
if (FieldValue != null)
{
DateTime dt = (DateTime)FieldValue;
return dt.ToShortDateString();
}
else
{
return string.Empty;
}
}
</script>
<%# GetDateString() %>
<%@ Control Language="VB" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>
<script >
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
TextBox1.ToolTip = Column.Description
SetUpValidator(RequiredFieldValidator1)
SetUpValidator(RegularExpressionValidator1)
SetUpValidator(DynamicValidator1)
End Sub
Protected Overrides Sub ExtractValues(ByVal dictionary As IOrderedDictionary)
dictionary(Column.Name) = ConvertEditedValue(TextBox1.Text)
End Sub
Public Overrides ReadOnly Property DataControl() As Control
Get
Return TextBox1
End Get
End Property
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
TextBox1.Text = Calendar1.SelectedDate.ToString("d")
End Sub
Function GetDateString() As String
If Not (FieldValue Is Nothing) Then
Dim dt As DateTime = CType(FieldValue, DateTime)
Return dt.ToShortDateString()
Else
Return String.Empty
End If
End Function
</script>
<asp:TextBox ID="TextBox1"
Text='<%# GetDateString() %>'
MaxLength="10">
</asp:TextBox>
<asp:Calendar ID="Calendar1"
VisibleDate='<%# IIf(FieldValue Is Nothing, DateTime.Now, FieldValue) %>'
SelectedDate='<%# IIf(FieldValue Is Nothing, DateTime.Now, FieldValue) %>'
OnSelectionChanged="Calendar1_SelectionChanged" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:DynamicValidator ID="DynamicValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" />
<%@ Control Language="C#" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>
<script >
protected void Page_Load(object sender, EventArgs e) {
TextBox1.ToolTip = Column.Description;
SetUpValidator(RequiredFieldValidator1);
SetUpValidator(RegularExpressionValidator1);
SetUpValidator(DynamicValidator1);
}
protected override void ExtractValues(IOrderedDictionary dictionary) {
dictionary[Column.Name] = ConvertEditedValue(TextBox1.Text);
}
public override Control DataControl
{
get
{
return TextBox1;
}
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
TextBox1.Text = Calendar1.SelectedDate.ToString("d");
}
string GetDateString()
{
if (FieldValue != null)
{
DateTime dt = (DateTime)FieldValue;
return dt.ToShortDateString();
}
else
{
return string.Empty;
}
}
</script>
<asp:TextBox ID="TextBox1"
Text='<%# GetDateString() %>'
MaxLength="10">
</asp:TextBox>
<asp:Calendar ID="Calendar1"
VisibleDate='<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
SelectedDate='<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
OnSelectionChanged="Calendar1_SelectionChanged" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:DynamicValidator ID="DynamicValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" />
Compilation du code
Cet exemple nécessite :
Site Web Dynamic Data ou application Web Dynamic Data.
Exemple de base de données AdventureWorks ou AdventureWorksLT. Pour plus d'informations sur le téléchargement et l'installation de l'exemple SQL Server, consultez Exemples de produits Microsoft SQL Server : Base de données (en anglais) sur le site CodePlex. Prenez soin d'installer la version appropriée de l'exemple de base de données pour la version de SQL Server que vous exécutez (SQL Server 2005 ou SQL Server 2008).
Classe LINQ to SQL configurée pour accéder à la table Products de la base de données AdventureWorks ou AdventureWorksLT.
Objet de contexte de données enregistré pour être utilisé par Dynamic Data dans le fichier Global.asax.
Programmation fiable
Les conditions ci-dessous peuvent générer une exception.
- La base de données n'est pas disponible
Voir aussi
Tâches
Concepts
Vue d'ensemble de Dynamic Data ASP.NET
Vue d'ensemble des modèles de champs Dynamic Data ASP.NET