در این مقاله به بررسی نمایش مجموعه داده ها در GridView براساس مقادیر انتخاب شده در DropDownList در ASP.NET می پردازیم. داده های GridView بعد از انتخاب گزینه ها در DropDownlist تغییر خواهد کرد.

پایگاه داده:

برای این مقاله از پایگاه داده Microsoft's Northwind استفاده کر ده ایم. شما خواهید توانست برای استفاده از این پایگاه داده به لینک زیر رفته و آن را دانلود کنید.

Download NorthWind Database

برای راحتی کار ما پایگاه داده را دانلود کرده و Script گرفته و در فایل ضمیمه در اختیار شما قرار داده ایم.

کدهای HTML:

کدهای HTML زیر شامل یک GridView و یک DropDownList درکنار سربرگ است که شامل لیست کشورها است. DropDownList به رویداد مدیریت SelectedIndexChanged اختصاص داده شده است و ویژگی AutoPostBack به True تنظیم شده است.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false" 
AllowPaging = "true" PageSize = "10"  Font-Names = "Arial" 
Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B"  
HeaderStyle-BackColor = "green"  OnPageIndexChanging = "OnPaging">
<Columns>
    <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
    <asp:BoundField DataField="City" HeaderText="City" />
    <asp:TemplateField>
        <HeaderTemplate>
            Country:
            <asp:DropDownList ID="ddlCountry" runat="server" 
            OnSelectedIndexChanged = "CountryChanged" AutoPostBack = "true"
            AppendDataBoundItems = "true">
            <asp:ListItem Text = "ALL" Value = "ALL"></asp:ListItem>
            <asp:ListItem Text = "Top 10" Value = "10"></asp:ListItem>
            </asp:DropDownList>
        </HeaderTemplate>
        <ItemTemplate>
            <%# Eval("Country") %>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="PostalCode" HeaderText="Postal Code" />
</Columns>
</asp:GridView>

دستورات Stored Procedure:

کدهای Stored Procedureزیر برای فیلتر کردن رکوردهای GridView استفاده می شود. مقدار انتخاب شده در DropDownLiast به عنوان پارامتر به Stored Procedureفرستاده می شود.

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

CREATE PROCEDURE spx_GetCustomers

      @Filter VARCHAR(50)

AS

BEGIN

      SET NOCOUNT ON;

     

      IF @Filter = 'ALL'

            SELECT ContactName, City, Country, PostalCode

            FROM Customers

      ELSE IF @Filter = '10'

            SELECT TOP 10 ContactName, City, Country, PostalCode

            FROM Customers

      ELSE

            SELECT  ContactName, City, Country, PostalCode

            FROM Customers WHERE Country=@Filter

END

GO

جزئیات GridView:

در کنار مدیریت رویداد Page Load، متد BindGrid برای پر کردن GridView بر اساس کشورهای انتخاب شده در DropDownList مورد استفاده قرار می گیرد. متغیر ViewState برای ذخیره مقدار فیلتر، مقادر پیش فرض روی گزینه All تنظیم شده است تا تمام رکوردها را نمایش دهد.

کدهای سی شارپ:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        ViewState["Filter"] = "ALL";
        BindGrid();
    }
}

private void  BindGrid()
{
    DataTable dt = new DataTable();
    String strConnString = System.Configuration.ConfigurationManager
                .ConnectionStrings["conString"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    SqlDataAdapter sda = new SqlDataAdapter();
    SqlCommand cmd = new SqlCommand("spx_GetCustomers");
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@Filter", ViewState["Filter"].ToString());
    cmd.Connection = con;
    sda.SelectCommand = cmd;
    sda.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
    DropDownList ddlCountry = 
        (DropDownList)GridView1.HeaderRow.FindControl("ddlCountry");
    this.BindCountryList(ddlCountry);
}

protected void CountryChanged(object sender, EventArgs e)
{
    DropDownList ddlCountry = (DropDownList)sender;
    ViewState["Filter"] = ddlCountry.SelectedValue;
    this.BindGrid();
}

ایجاد فیلترینگ در DropDownList:

در متد زیر مشاهده می کنیم که GridView با استفاده از DropDownList فیلتر می شود. این DropDownList در سربرگ GridView قرار دارد. که اطلاعات را از پایگاه داده Nortwind و جدول Customer استخراج می کند.

private void BindCountryList(DropDownList ddlCountry)
{
    String strConnString = System.Configuration.ConfigurationManager
                .ConnectionStrings["conString"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    SqlDataAdapter sda = new SqlDataAdapter();
    SqlCommand cmd = new SqlCommand("select distinct Country" + 
                    " from customers");
    cmd.Connection = con;
    con.Open();
    ddlCountry.DataSource = cmd.ExecuteReader();
    ddlCountry.DataTextField = "Country";
    ddlCountry.DataValueField = "Country";
    ddlCountry.DataBind();
    con.Close();
    ddlCountry.Items.FindByValue(ViewState["Filter"].ToString())
            .Selected = true;
}

نحوه کارکرد فیلترینگ:

در کنار رویداد SelectedIndexChanged، رکوردهای GridView براساس مقدارهای انتخاب شده در DropDownList انتخاب می شوند.

protected void CountryChanged(object sender, EventArgs e)
{
    DropDownList ddlCountry = (DropDownList)sender;
    ViewState["Filter"] = ddlCountry.SelectedValue;
    this.BindGrid();
}

رویداد PageIndexChaging:

در کنار رویداد PageIndexChanging در GridView، GridView بار دیگر با استفاده از متد BindGrid، با PageIndex از داده پر می شود.

کدهای سی شارپ:

protected void OnPaging(object sender, GridViewPageEventArgs e)
{
    GridView1.PageIndex = e.NewPageIndex;
    this.BindGrid();
}

نتیجه را در تصویر زیر مشاهده می کنید.

در تصویر اول می بینید که تمام اطلاعات موجود در GridView نمایش داده می شود. ولی در تصاویر بعدی شاهد اطلاعات فیلتر شده هستید.