среда, 5 марта 2014 г.

Как сделать фильтр в GridView

Если вдруг вам потребовалось сделать фильтрацию данных в стандартном ASP.NET контроле GridView, то не спешите расстраиваться и смотреть в сторону всякий телериков. Все можно сделать своими руками. Получится примерно так:


Итак, вот что нужно сделать для того, чтобы получить такой результат. Во первых, создать GridView и объявить колонку, по которой будете фильтровать как TemplateField.

<asp:gridview autogeneratecolumns="False" cellpadding="4" forecolor="#333333" gridlines="None" id="ListGrid" runat="server">
                <columns>

                    <asp:boundfield datafield="Name" headertext="Название">
                    <asp:templatefield headertext="Тип Записи">
                        <headertemplate>
                            Тип Записи:
                            <asp:dropdownlist autopostback="True" id="typeSelect" onselectedindexchanged="typeSelect_SelectedIndexChanged" runat="server">
                                    <asp:listitem text="Все" value="All"></asp:listitem>
                                    <asp:listitem text="Автомобили" value="1"></asp:listitem>
                                    <asp:listitem text="Самолеты" value="2"></asp:listitem>
                                    <asp:listitem text="Мотоциклы" value="3"></asp:listitem>
                            </asp:dropdownlist>
                        </headertemplate>
                        <itemtemplate>
                                 <#Eval("Type")>              
                        </itemtemplate>
                        <itemstyle horizontalalign="Center">
                    </itemstyle></asp:templatefield>                                      
                  </asp:boundfield>
                </columns>
 </asp:gridview>

Для простоты будем связывать нашу таблицу со списком вот таких вот элементов:
    public class Machine
    {
        public string Name { get; set; }
        public string Type { get; set; }

        public Machine(string _name, string _type)
        {
            Name = _name;
            Type = _type;
        }
    }
Давайте все сделаем очень просто и очень понятно. Создаем список элементов типа Machine прямо в Page_Load и там же связываем его с таблицей.
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                List<machine> list = new List<machine>();
                list.Add(new Machine("ВАЗ", "1"));
                list.Add(new Machine("BMW", "1"));
                list.Add(new Machine("Airbus", "2"));
                list.Add(new Machine("Harley-Davidson", "3"));

                ListGrid.DataSource = list;
                ListGrid.DataBind();
            }
        }

Ну и неплохо бы запомнить выбор фильтра. Для этого нам нужно определить свойство, которое будет хранить текущее состояние фильтра и написать обработчик события RowDataBound грида, который будет устанавливать состояние фильтра:

        
        public string SelectedType
        {
            get
            {
                if (ViewState["SelectedType"] == null)
                    return string.Empty;
                else
                    return ViewState["SelectedType"].ToString();
            }
            set
            {
                ViewState["SelectedType"] = value;
            }
        }

        protected void ListGrid_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                DropDownList cmbSelect = (DropDownList)e.Row.FindControl("typeSelect");
                cmbSelect.SelectedValue = SelectedType == "" ? "All" : SelectedType;
            }

        }

А теперь магия, благодаря которой наш фильтр будет работать и фильтровать элементы - обработчик события Onselectedindexchanged дропдауна с фильтром. Ту часть, которая заполняет список я опущу, самое важное в конце:
      
            DropDownList ddlType = (DropDownList)sender;
            string selValue = ddlType.SelectedValue;

            //Если не установлено "Показывать все", то фильтруем
            if (selValue != "All")
                ListGrid.DataSource = list.Where(x => x.Type == selValue);
            //Если установлено, то показываем все.
            else
                ListGrid.DataSource = list;

            SelectedType = selValue;
            ListGrid.DataBind();


Вот и все.

2 комментария:

  1. <#Eval("Type")> <--- пропустили %

    Пример кода typeSelect_SelectedIndexChanged лучше выложить полностью, начиная от заголовка метода, заканчивая "}"

    ОтветитьУдалить
  2. и сделайте нормальным оформление кода в примерах на asp

    ОтветитьУдалить