Cómo: Personalizar la apariencia y el comportamiento de los campos de datos en un control de datos dinámicos
Actualización: noviembre 2007
Los datos dinámicos de ASP.NET utilizan las plantillas de campo para representar cada campo de datos de una tabla. Las plantillas de campo normalmente son controles de usuario (archivos .ascx) que se asignan a tipos de datos de Common Language Runtime (CLR) que vienen determinados por el tipo de dato de la base de datos. Normalmente, los datos dinámicos de ASP.NET disponen de un control de usuario para mostrar datos de cada tipo y otro para modificar o insertar los datos de dicho tipo.
En este tema se describe cómo personalizar el aspecto y comportamiento de un campo de datos estableciendo la propiedad UIHint en un control de datos dinámicos como el control DynamicControl y el campo DynamicField. La propiedad UIHint especifica qué plantilla de campo se debe utilizar cuando uno de estos objetos representa un campo de datos específico. La propiedad UIHint puede señalar a una de las plantillas facilitadas o a una nueva que se cree. Este enfoque resulta útil cuando no utilice páginas creadas automáticamente por los datos dinámicos, si no que cree páginas web personalizadas para mostrar y modificar datos.
Como alternativa, puede cambiar la presentación y el aspecto del campo de datos en toda la aplicación utilizando los atributos. Para obtener más información, vea Cómo: Personalizar la apariencia y el comportamiento de los campos de datos en el modelo de datos.
Para personalizar el aspecto y comportamiento de un campo de datos en un control enlazado a datos
Opcionalmente, cree una plantilla de campo personalizada que defina la interfaz de usuario de un campo de datos específico del modelo de datos. Para obtener más información, vea Cómo: Personalizar la visualización de campos de datos en el modelo de datos
Si utiliza los controles DetailsView o GridView, agregue un objeto DynamicField y establezca su propiedad UIHint en el nombre de la plantilla de campo que desee utilizar para mostrar los datos.
En el ejemplo siguiente se muestra cómo utilizar un control DynamicField para representar la columna ProductName utilizando una plantilla de campo denominada RedText. En el modo de presentación, los datos se muestran mediante una plantilla de campo denominada RedText.ascx. En el modo de edición o inserción, los datos se muestran mediante una plantilla de campo denominada RedText_Edit.ascx.
<asp:DynamicField UIHint="RedText" DataField="ProductName" />.gif "Nota")
Nota:Si no encuentran la plantilla de campo especificada, los datos dinámicos utilizan un mecanismo de reserva. Para obtener más información, vea Información general sobre las plantillas de campos de datos dinámicos de ASP.NET.
Si usa controles enlazados a datos que utilizan plantillas o campos de plantilla, como los controles FormView o ListView, agregue un control DynamicControl para mostrar los datos y establezca su propiedad UIHint en el nombre del campo de datos que desea mostrar.
El ejemplo siguiente especifica que la columna ProductName se representará utilizando una plantilla de campo denominada RedText cuando el elemento esté en el modo de edición. En tiempo de ejecución, los datos dinámicos buscarán un control de usuario denominado RedText_Edit.ascx.
<EditItemTemplate> <asp:DynamicControl Mode="Edit" UIHint="RedText" DataField="ProductName" /> </EditItemTemplate>
Ejemplo
En el ejemplo siguiente se muestra cómo agregar la propiedad UIHint a un campo DynamicField de un control GridView. Esta propiedad se establece para que el campo de datos utilice una plantilla de campo personalizada que muestre un control Calendar para editar la fecha de suspensión. El segundo y tercer ejemplo muestran el código del control de usuario de las plantillas de campo que definen la interfaz de usuario para mostrar la fecha en formato corto y para modificar el campo.
<%@ 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" />
Compilar el código
Este ejemplo necesita:
Un sitio web de datos dinámicos o una aplicación web de datos dinámicos.
La base de datos de ejemplo AdventureWorks o AdventureWorksLT. Para obtener información sobre la forma de descargar e instalar la base de datos de ejemplo de SQL Server, vea Microsoft SQL Server Product Samples: Database en el sitio CodePlex. Asegúrese de que instala la versión correcta de la base de datos de ejemplo para la versión de SQL Server que esté ejecutando (SQL Server 2005 o SQL Server 2008).
Una clase LINQ to SQL configurada para tener acceso a la tabla Products de la base de datos AdventureWorks o AdventureWorksLT.
Un objeto de contexto de datos que está registrado para que lo utilicen los datos dinámicos en el archivo Global.asax.
Programación eficaz
Las condiciones siguientes pueden provocar una excepción:
- La base de datos no está disponible.
Vea también
Tareas
Tutorial: Crear un nuevo sitio web de datos dinámicos con la técnica scaffolding
Conceptos
Información general sobre los datos dinámicos de ASP.NET
Información general sobre las plantillas de campos de datos dinámicos de ASP.NET