Botones personalizados en el DataList y el Repeater (C#)

2025-05-05

En este tutorial, crearemos una interfaz que use un Repeater para listar las categorías del sistema, con cada categoría ofreciendo un botón que muestre sus productos asociados mediante un control BulletedList.

Introducción

En los últimos diecisiete tutoriales dataList y Repeater, hemos creado ejemplos de solo lectura y ejemplos de edición y eliminación. Para facilitar las capacidades de edición y eliminación dentro de una lista de datos, agregamos botones a la lista de datos ItemTemplate que, cuando se les hace clic, provocan un postback y generan un evento de DataList correspondiente a la propiedad del botón CommandName. Por ejemplo, agregar un botón al ItemTemplate con un valor de propiedad de CommandName Edit hace que los objetos DataList se EditCommand activen en respuesta posterior; uno con un valor de propiedad CommandName Delete genera el DeleteCommand.

Además de los botones Editar y Eliminar, los controles DataList y Repeater también pueden incluir botones, LinkButtons o ImageButtons que, cuando se hace clic, realizan alguna lógica personalizada del lado servidor. En este tutorial, crearemos una interfaz que use repeater para enumerar las categorías del sistema. Para cada categoría, el Repeater incluirá un botón para mostrar los productos asociados de la categoría mediante un control BulletedList (vea la Figura 1).

Figura 1: Al hacer clic en el vínculo Mostrar productos, se muestran los productos de categoría en una lista con viñetas (haga clic para ver la imagen de tamaño completo)

Paso 1: Añadir las páginas web del tutorial de botones personalizados

Antes de ver cómo agregar un botón personalizado, vamos a tardar un momento en crear las páginas de ASP.NET en nuestro proyecto de sitio web que necesitaremos para este tutorial. Empiece agregando una nueva carpeta denominada CustomButtonsDataListRepeater. Después, agregue estas dos páginas ASP.NET a esa carpeta, asegurándose de asociar cada página a la página maestra Site.master:

Default.aspx
CustomButtons.aspx

Agregar las páginas ASP.NET para los tutoriales sobre botones personalizados

Figura 2: Agregar las páginas ASP.NET para los tutoriales sobre botones personalizados

Igual que en las otras carpetas, Default.aspx en la carpeta CustomButtonsDataListRepeater enumerará los tutoriales en su sección. Recuerde que el control de usuario SectionLevelTutorialListing.ascx proporciona esta funcionalidad. Agregue este control de usuario a Default.aspx arrastrándolo desde el Explorador de soluciones a la vista Diseño de la página.

Figura 3: Agregue el control de usuario SectionLevelTutorialListing.ascx a Default.aspx (haga clic aquí para ver la imagen a tamaño completo)

Por último, agregue las siguientes páginas como entradas al archivo Web.sitemap. En concreto, agregue el marcado siguiente después de la paginación y la ordenación con el DataList y el Repeater <siteMapNode>:

<siteMapNode
    url="~/CustomButtonsDataListRepeater/Default.aspx"
    title="Adding Custom Buttons to the DataList and Repeater"
    description="Samples of DataList and Repeater Reports that Include
                  Buttons for Performing Server-Side Actions">
    <siteMapNode
        url="~/CustomButtonsDataListRepeater/CustomButtons.aspx"
        title="Using Custom Buttons in the DataList and Repeater's Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons within templates." />
</siteMapNode>

Después de actualizar Web.sitemap, dedique un momento a ver el sitio web de tutoriales a través de un explorador. Ahora el menú de la izquierda incluye elementos para los tutoriales sobre edición, inserción y eliminación.

El mapa del sitio ahora incluye la entrada para el tutorial sobre botones personalizados

Figura 4: el mapa del sitio ahora incluye la entrada para el tutorial sobre botones personalizados

Paso 2: Agregar la lista de categorías

Para este tutorial, necesitamos crear un Repeater que enumere todas las categorías junto con un botón de enlace "Mostrar Productos" que, al hacer clic en él, muestre los productos de la categoría asociada en una lista con viñetas. Vamos a crear primero un repetidor simple que enumera las categorías del sistema. Para empezar, abra la página CustomButtons.aspx en la carpeta CustomButtonsDataListRepeater. Arrastre un repetidor desde el cuadro de herramientas hasta el Diseñador y establezca su ID propiedad en Categories. A continuación, cree un nuevo control de origen de datos a partir de la etiqueta inteligente del repetidor. En concreto, cree un nuevo control ObjectDataSource denominado CategoriesDataSource que seleccione sus datos del método s CategoriesBLL de la GetCategories() clase .

Figura 5: Configurar el ObjectDataSource para usar el método CategoriesBLL de la clase GetCategories() (Haga clic para ver la imagen en tamaño completo)

A diferencia del control DataList, para el que Visual Studio crea un valor predeterminado ItemTemplate basado en el origen de datos, se deben definir manualmente las plantillas del repetidor. Además, las plantillas del repetidor deben crearse y editarse declarativamente (es decir, no hay ninguna opción Editar plantillas en la etiqueta inteligente del repetidor).

Haga clic en la pestaña Origen de la esquina inferior izquierda y agregue un ItemTemplate que muestre el nombre de la categoría en un <h3> elemento y su descripción en una etiqueta de párrafo; incluya un SeparatorTemplate que muestre una regla horizontal (<hr />) entre cada categoría. Agregue también un LinkButton con su Text propiedad establecida en Mostrar Productos. Después de completar estos pasos, el marcado declarativo de la página debe ser similar al siguiente:

<asp:Repeater ID="Categories" DataSourceID="CategoriesDataSource"
    runat="server">
    <ItemTemplate>
        <h3><%# Eval("CategoryName") %></h3>
        <p>
            <%# Eval("Description") %>
            [<asp:LinkButton runat="server" ID="ShowProducts">
                Show Products</asp:LinkButton>]
        </p>
    </ItemTemplate>
    <SeparatorTemplate><hr /></SeparatorTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

En la figura 6 se muestra la página cuando se ve a través de un explorador. Se muestra cada nombre de categoría y descripción. El botón Mostrar Productos, cuando se hace clic, provoca un postback, pero aún no realiza ninguna acción.

Figura 6: Se muestra cada nombre y descripción de cada categoría, junto con un botón Mostrar vínculo de productos (haga clic para ver la imagen de tamaño completo)

Paso 3: Ejecutar lógica Server-Side cuando se hace clic en el botón de enlace Mostrar Productos.

Siempre que se hace clic en un Button, LinkButton o ImageButton dentro de una plantilla de DataList o Repeater, se produce un postback y se desencadena el evento del DataList o Repeater ItemCommand. Además del evento ItemCommand, el control DataList también puede generar otro evento más específico si la propiedad del CommandName botón se establece en una de las cadenas reservadas (Delete, Edit, Cancel, Update o Select), pero siempre se desencadena el evento ItemCommandsiempre.

Cuando se hace clic en un botón dentro de dataList o Repeater, a menudo es necesario pasar el botón en el que se hizo clic (en el caso de que haya varios botones dentro del control, como un botón Editar y Eliminar) y quizás alguna información adicional (como el valor de clave principal del elemento cuyo botón se hizo clic). Button, LinkButton y ImageButton proporcionan dos propiedades cuyos valores se pasan al controlador de ItemCommand eventos:

CommandName una cadena que normalmente se usa para identificar cada botón de la plantilla
CommandArgument se usa normalmente para contener el valor de algunos campos de datos, como el valor de clave principal.

En este ejemplo, establezca la propiedad LinkButton s CommandName en ShowProducts y enlace el valor CategoryID de clave principal del registro actual a la CommandArgument propiedad mediante la sintaxis CategoryArgument='<%# Eval("CategoryID") %>'de enlace de datos . Después de especificar estas dos propiedades, la sintaxis declarativa de LinkButton debe ser similar a la siguiente:

<asp:LinkButton runat="server" CommandName="ShowProducts"
    CommandArgument='<%# Eval("CategoryID") %>' ID="ShowProducts">
    Show Products</asp:LinkButton>

Cuando se hace clic en el botón, se produce una devolución de datos y se desencadena el evento DataList o Repeater.ItemCommand Al controlador de eventos se le pasan los valores CommandName y CommandArgument del botón.

Cree un controlador de eventos para el evento de Repeater y ItemCommand anote el segundo parámetro pasado al controlador de eventos (denominado como e). Este segundo parámetro es de tipo RepeaterCommandEventArgs y tiene las cuatro propiedades siguientes:

CommandArgument el valor de la propiedad s del botón en el que se ha hecho clic CommandArgument
CommandNameel valor de la propiedad del botónCommandName
CommandSource una referencia al control de botón en el que se hizo clic
Item una referencia al RepeaterItem que contiene el botón que se hizo clic; cada registro enlazado al Repetidor se representa como un RepeaterItem

Dado que la categoría CategoryID seleccionada se pasa a través de la CommandArgument propiedad, podemos obtener el grupo de productos asociados a la categoría seleccionada en el ItemCommand controlador de eventos. A continuación, estos productos se pueden enlazar a un control BulletedList (ItemTemplate, que aún no se ha agregado). Todo lo que queda, entonces, es agregar la Lista con viñetas, hacer referencia a ella en el controlador de eventos ItemCommand y enlazarla al conjunto de productos para la categoría seleccionada, que abordaremos en el paso 4.

Nota:

El controlador de eventos DataList ItemCommand pasa a un objeto de tipo DataListCommandEventArgs, que ofrece las mismas cuatro propiedades que la clase RepeaterCommandEventArgs.

Paso 4: Mostrar los productos de la categoría seleccionada en una lista con viñetas

Los productos de la categoría seleccionada se pueden mostrar dentro del Repeater ItemTemplate mediante cualquier número de controles. Podríamos agregar otro Repeater anidado, un DataList, una DropDownList, un GridView, etc. Como queremos mostrar los productos como una lista con viñetas, usaremos el control BulletedList. Al volver al marcado declarativo de la CustomButtons.aspx página, agregue un control BulletedList al ItemTemplate después del botón Show Products LinkButton. Establezca bulletedLists s IDProductsInCategoryen . BulletedList muestra el valor del campo de datos especificado a través de la propiedad DataTextField; dado que este control tendrá la información del producto enlazada a él, establezca la propiedad DataTextField en ProductName.

<asp:BulletedList ID="ProductsInCategory" DataTextField="ProductName"
    runat="server"></asp:BulletedList>

En el ItemCommand controlador de eventos, haga referencia a este control mediante e.Item.FindControl("ProductsInCategory") y vincule al conjunto de productos asociados a la categoría seleccionada.

protected void Categories_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "ShowProducts")
    {
        // Determine the CategoryID
        int categoryID = Convert.ToInt32(e.CommandArgument);
        // Get the associated products from the ProudctsBLL and bind
        // them to the BulletedList
        BulletedList products =
            (BulletedList)e.Item.FindControl("ProductsInCategory");
        ProductsBLL productsAPI = new ProductsBLL();
        products.DataSource =
            productsAPI.GetProductsByCategoryID(categoryID);
        products.DataBind());
    }
}

Antes de realizar cualquier acción en el ItemCommand controlador de eventos, es prudente comprobar primero el valor de la entrada CommandName. Dado que el ItemCommand controlador de eventos se activa cuando se hace clic en cualquier botón, si hay varios botones en la plantilla, use el CommandName valor para distinguir qué acción realizar. Comprobar aquí CommandName es irrelevante, ya que solo tenemos un botón, pero es un buen hábito a desarrollar. A continuación, se recupera el CategoryID de la categoría seleccionada de la propiedad CommandArgument. A continuación, se hace referencia al control BulletedList de la plantilla y se enlaza a los resultados del método de la ProductsBLL clase s GetProductsByCategoryID(categoryID) .

En tutoriales anteriores que usaban los botones dentro de una lista de datos, como Una introducción a la edición y eliminación de datos en DataList, determinamos el valor de clave principal de un elemento determinado a través de la DataKeys colección. Aunque este enfoque funciona bien con DataList, Repeater no tiene una propiedad DataKeys. En su lugar, debemos usar un enfoque alternativo para proporcionar el valor de la clave principal, como hacerlo mediante la propiedad del botón CommandArgument, o asignando el valor de clave principal a un control Web de etiqueta oculto dentro de la plantilla y luego leer su valor en el controlador de eventos ItemCommand mediante e.Item.FindControl("LabelID").

Después de completar el ItemCommand controlador de eventos, dedique un momento a probar esta página en un explorador. Como se muestra en la Figura 7, al hacer clic en el enlace Mostrar productos, se realiza una solicitud de devolución y se muestran los productos de la categoría seleccionada en una lista con viñetas. Además, tenga en cuenta que la información del producto permanece visible, incluso si se hace clic en los vínculos Mostrar Productos de otras categorías.

Nota:

Si desea modificar el comportamiento de este informe, de modo que los únicos productos de una categoría se muestran a la vez, simplemente establezca la propiedad EnableViewStatede control BulletedList en False .

Figura 7: Se usa bulletedList para mostrar los productos de la categoría seleccionada (haga clic para ver la imagen de tamaño completo)

Resumen

Los controles DataList y Repeater pueden incluir cualquier número de botones, LinkButtons o ImageButtons dentro de sus plantillas. Estos botones, al hacerse clic en ellos, provocan un postback y generan el evento ItemCommand. Para asociar la acción personalizada del lado servidor con un botón en el que se hace clic, cree un controlador de eventos para el ItemCommand evento. En este controlador de eventos, compruebe primero el valor entrante CommandName para determinar en qué botón se hizo clic. Opcionalmente, se puede proporcionar información adicional a través de la propiedad del botón s CommandArgument .

¡Feliz programación!

Acerca del autor

Scott Mitchell, autor de siete libros de ASP/ASP.NET y fundador de 4GuysFromRolla.com, ha estado trabajando con tecnologías web de Microsoft desde 1998. Scott trabaja como consultor independiente, entrenador y escritor. Su último libro es Sams Teach Yourself ASP.NET 2.0 en 24 horas. Se puede contactar con él en mitchell@4GuysFromRolla.com.

Agradecimientos especiales a

Esta serie de tutoriales contó con la revisión de muchos revisores que fueron de gran ayuda. El revisor principal de este tutorial fue Dennis Patterson. ¿Le interesa revisar mis próximos artículos en MSDN? Si es así, mándame un mensaje a mitchell@4GuysFromRolla.com.

Compartir a través de