Cómo: Enlazar a los datos de un control con plantilla en Visual Studio

Actualización: noviembre 2007

Se puede asociar un control, por ejemplo los controles GridView, DetailsView, FormView, ListView, DataList o Repeater, a un control de origen de datos, por ejemplo los controles LinqDataSource, ObjectDataSource o SqlDataSource. También se pueden usar plantillas para el control (los controles ListView, DataList, Repeater y FormView requieren plantillas) para personalizar la presentación de los datos con la interfaz de usuario personalizada en el diseñador.

En este tema se explica el proceso de agregar controles de IU, por ejemplo un control TextBox, a una plantilla, para, a continuación, enlazar el control a unos datos concretos.

Para enlazar un control de plantilla a un origen de datos

1. Establezca un origen de datos válido, como el control SqlDataSource, en la página y observe el valor de la propiedad ID.

   Por ejemplo:

   <asp:SqlDataSource ID="SqlDataSource1" Runat="server" 
     SelectCommand="SELECT CustomerID, CompanyName FROM Customers"
     ConnectionString="<%$ 
       ConnectionStrings:NorthwindConnectionString %>">
   </asp:SqlDataSource>
   

   Para obtener más información sobre cómo utilizar un control SqlDataSource con la base de datos, vea Información general sobre SqlDataSource (Control de servidor Web).

2. Arrastre un control DataList desde el grupo Datos del Cuadro de herramientas hasta la página.

   Aparece el menú de acceso directo Tareas de DataList.

   • Si el menú de acceso directo Tareas de DataList no aparece, haga clic con el botón secundario en el control DataList y haga clic en Mostrar etiqueta inteligente.

3. En la lista Elegir origen de datos, haga clic en el control SqlDataSource que creó en el paso 1.

   Cuando se representa la página, el control muestra todas las columnas y datos de la consulta sin la personalización. Dependiendo de los datos, el control DataList aparecerá con campos enlazados predeterminados, como se muestra en el ejemplo de código siguiente:

   <asp:DataList ID="DataList1"  
       DataKeyField="CustomerID" 
       DataSourceID="SqlDataSource1">
     <ItemTemplate>
       CustomerID:
       <asp:Label ID="CustomerIDLabel"  
           Text='<%# Eval("CustomerID") %>'>
       </asp:Label><br />
       CompanyName:
       <asp:Label ID="CompanyNameLabel"  
           Text='<%# Eval("CompanyName") %>'>
       </asp:Label><br />
       <br />
     </ItemTemplate>
   </asp:DataList>
   

Para editar las plantillas del control

1. En la vista Diseño, haga clic con el botón secundario en el control DataList y, a continuación, seleccione Mostrar etiqueta inteligente.

2. En el menú Tareas de DataList, haga clic en Editar plantillas.

   Entonces puede editar las plantillas en el diseñador. Puede arrastrar otros controles a la plantilla para que se enlacen más adelante.

3. En la lista Mostrar, haga clic en AlternatingItemTemplate (controles diferentes admiten plantillas diferentes).

4. En el espacio de diseño AlternatingItemTemplate, escriba CustomerID:, y a continuación, desde el grupo Estándar del Cuadro de herramientas, arrastre un control T:System.Web.UI.WebControls.Label hasta el control DataList.

5. En el menú Tareas de Label, haga clic en Editar enlace de datos.

6. En el cuadro de diálogo DataBinding denombreDeEtiqueta, en Propiedades enlazables, haga clic en Text.

7. En Enlace para Text, en la lista Con enlace a, haga clic en CustomerID.

8. Repita los pasos del 4 al 7 para CompanyName.

9. En el espacio de diseño AlternatingItemTemplate, seleccione todo el contenido y, a continuación, presione CTRL+B para cambiar el texto a negrita.

10. Haga clic con el botón secundario en el control DataList y, a continuación, seleccione Mostrar etiqueta inteligente.

11. Haga clic en Terminar edición de plantilla para salir del modo de edición de plantillas.

    Cuando la página se muestre en el explorador, la lista de compañías aparecerá con una alternancia de texto sin formato y texto en negrita.

Vea también

Tareas

Tutorial: Acceso a datos básico en páginas Web

Conceptos

Información general sobre los controles de origen de datos

Información general sobre SqlDataSource (Control de servidor Web)