sábado, 15 de septiembre de 2012

Filtrar GridView con DropDownList en ASP.NET

En este ejemplo explicare como filtrar un gridview con dropdownlist en ASP.NET usando FilterExpression con SQL y SQLDataSource. Al final del proyecto se vera asi:
Para este ejemplo cree una base de Datos simple llamada Guitarist, y contendra las siguientes columnas de abajo:
CREATE TABLE [dbo].[topguitarist](
 [guitaristid] [int] NULL,
 [playername] [nvarchar](50) NULL,
 [playerstyle] [nvarchar](50) NULL,
 [associatedacts] [nvarchar](50) NULL,
 [famousperformance] [nvarchar](50) NULL
) 
y lo llenan con datos de este archivo Excel:
ahora a nuestro proyecto le agregamos 2 DataSources, 1 DropDownList y un GridView. El primer DataSource lo configuramos para que liste los estilos de musica el cual se cargara en el DropDownList y el segundo sera para el GridView.
Configuramos el origen de datos del SqlDataSource1 y lo ponemos asi:
el segundo SQLDatSource lo configuran que muestre todos los campos de la tabla y agregan un FilterExpression que sera el DropDownList, el codigo sera el siguiente:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:guitaristConnectionString %>" 
            SelectCommand="SELECT DISTINCT [playerstyle] FROM [topguitarist]">
        </asp:SqlDataSource>
    
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:guitaristConnectionString3 %>" 
            
            SelectCommand="SELECT [guitaristid], [playername], [playerstyle], [associatedacts], [famousperformance] FROM [topguitarist]"
            FilterExpression="[playerstyle] like '{0}%'">
            <FilterParameters>
            <asp:ControlParameter ControlID="DropDownList1" Name="playerstyle" 
                    PropertyName="SelectedValue" Type="String" />

            </FilterParameters>
        </asp:SqlDataSource>
Ahora a nuestro DropDownList lo enlazamos con el SQLDataSource1 asi:
Luego de esto vamos a Editar Elementos y Agregamos la Opcion All.
el codigo del DropDownList sera el siguiente:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
DataSourceID="SqlDataSource1" DataTextField="playerstyle"
DataValueField="playerstyle" AppendDataBoundItems="True">
<asp:ListItem Value="%">All</asp:ListItem>
</asp:DropDownList>
Ahora configuramos nuestro GridView con el data Source, el codigo sera asi:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
CellPadding="4" DataSourceID="SqlDataSource2" ForeColor="Black" GridLines="Horizontal" 
                AllowPaging="True">
                <Columns>
                    <asp:BoundField DataField="guitaristid" HeaderText="guitaristid"
InsertVisible="False" ReadOnly="True" SortExpression="guitaristid" />
                    <asp:BoundField DataField="playername" HeaderText="playername"
SortExpression="playername" />
                    <asp:BoundField DataField="playerstyle" HeaderText="playerstyle"
SortExpression="playerstyle" />
                    <asp:BoundField DataField="associatedacts" HeaderText="associatedacts"
SortExpression="associatedacts" />
                    <asp:BoundField DataField="famousperformance" HeaderText="famousperformance"
SortExpression="famousperformance" />
                </Columns>
                <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
                <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
                <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
            </asp:GridView>
Si configuran todo bien les saldra como el ejemplo de arriba =)

0 comentarios:

Publicar un comentario