Сортировка, разбиение на страницы и фильтрация данных с помощью привязки модели и веб-форм

от Tom фитзмаккен

В этой серии руководств демонстрируются основные аспекты использования привязки модели с проектом веб-форм ASP.NET. Привязка модели делает взаимодействие данных более прямым, чем работа с объектами источника данных (например, ObjectDataSource или SqlDataSource). Эта серия начинается с вводного материала и переходит к более сложным концепциям в последующих руководствах.

В этом руководстве показано, как добавить сортировку, разбиение по страницам и фильтрацию данных с помощью привязки модели.

Это руководство строится на проекте, созданном в первой части серии.

Вы можете скачать полный проект в C# или VB. Загружаемый код работает как с Visual Studio 2012, так и с Visual Studio 2013. В нем используется шаблон Visual Studio 2012, который немного отличается от шаблона Visual Studio 2013, показанного в этом руководстве.

Что будет построено

В этом руководстве вы выполните следующие действия.

  1. Включение сортировки и разбиения на страницы данных
  2. Включить фильтрацию данных на основе выбора пользователем

Добавление сортировки

Включить сортировку в GridView очень просто. В файле Student. aspx просто задайте для GridView значение true в элементе управления GridView. Не нужно задавать значение SortExpression для каждого столбца, так как поле данных используется автоматически. GridView изменяет запрос, чтобы включить упорядочивание данных по выбранному значению. В выделенном ниже коде показано добавление, которое необходимо сделать для включения сортировки.

<asp:GridView runat="server" ID="studentsGrid"
    ItemType="ContosoUniversity.Models.Student" DataKeyNames="StudentID"
    SelectMethod="studentsGrid_GetData"
    UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
    AllowSorting="true" 
    AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"  
    AutoGenerateColumns="false">
  <Columns>
    <asp:DynamicField DataField="StudentID" />
    <asp:DynamicField DataField="LastName" />
    <asp:DynamicField DataField="FirstName" />
    <asp:DynamicField DataField="Year" />
    <asp:TemplateField HeaderText="Total Credits">
      <ItemTemplate>
        <asp:Label Text="<%# Item.Enrollments.Sum(en => en.Course.Credits) %>"
            runat="server" />
      </ItemTemplate>
    </asp:TemplateField>        
  </Columns>
</asp:GridView>

Запустите веб-приложение и протестируйте сортировку записей учащихся по значениям в разных столбцах.

Сортировка учащихся

Добавление разбиения по страницам

Включить разбиение на страницы также очень просто. В элементе GridView задайте для свойства AllowPaging значение true и задайте для свойства pageSize количество записей, которые будут отображаться на каждой странице. В этом руководстве вы можете задать для него значение 4.

<asp:GridView runat="server" ID="studentsGrid"
    ItemType="ContosoUniversity.Models.Student" DataKeyNames="StudentID"
    SelectMethod="studentsGrid_GetData"
    UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
    AllowSorting="true" AllowPaging="true" PageSize="4"
    AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"  
    AutoGenerateColumns="false">

Запустите веб-приложение и обратите внимание, что теперь записи делятся на несколько страниц, на одной странице не более 4 записей.

Добавить подкачку

Отложенное выполнение запросов повышает эффективность работы приложения. Вместо получения всего набора данных GridView изменяет запрос, чтобы получить только записи для текущей страницы.

Фильтрация записей по выбору пользователя

Привязка модели добавляет несколько атрибутов, которые позволяют определить, как задать значение параметра в методе привязки модели. Эти атрибуты находятся в пространстве имен System. Web. моделбиндинг . в том числе:

  • Control
  • Куки-файл
  • Форма
  • Профиль
  • QueryString
  • RouteData
  • Сеанс
  • Филе
  • Состояние вида

В этом учебнике будет использоваться значение элемента управления для фильтрации записей, отображаемых в GridView. Атрибут элемента управления будет добавлен к созданному ранее методу запроса. В следующем учебнике к параметру будет применен атрибут QueryString , чтобы указать, что значение параметра берется из значения строки запроса.

Во-первых, над ValidationSummary добавьте раскрывающийся список для фильтрации отображаемых учащихся.

<asp:HyperLink runat="server" NavigateUrl="~/AddStudent" Text="Add New Student" />

<br /><br />
<asp:Label runat="server" Text="Show:" />
<asp:DropDownList runat="server" AutoPostBack="true" ID="DisplayYear">
    <asp:ListItem Text="All" Value="" />
    <asp:ListItem Text="Freshman" />
    <asp:ListItem Text="Sophomore" />
    <asp:ListItem Text="Junior" />
    <asp:ListItem Text="Senior" />
</asp:DropDownList>

<asp:ValidationSummary runat="server" ShowModelStateErrors="true"/>

В файле кода программной части измените метод Select, чтобы получить значение из элемента управления, и задайте в качестве имени параметра имя элемента управления, предоставляющего значение.

Для разрешения атрибута элемента управления необходимо добавить инструкцию using для пространства имен System. Web. моделбиндинг .

using System.Web.ModelBinding;

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

public IQueryable<Student> studentsGrid_GetData([Control] AcademicYear? displayYear)
{
    SchoolContext db = new SchoolContext();
    var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));

    if (displayYear != null)
    {
        query = query.Where(s => s.Year == displayYear);   
    }

    return query;    
}

Запустите веб-приложение и выберите другие значения из раскрывающегося списка, чтобы отфильтровать список учащихся.

Фильтрация учащихся

Заключение

В этом руководстве вы включили сортировку и разбиение данных на страницы. Вы также включили фильтрацию данных по значению элемента управления.

В следующем руководстве мы улучшаем пользовательский интерфейс, интегрируя мини-приложение пользовательского интерфейса jQuery в шаблон динамических данных.