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

; автор — Том ФитцМакен (Tom FitzMacken)

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

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

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

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

Содержание задачи

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

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

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

Очень просто включить сортировку в GridView. В файле Student.aspx просто задайте для AllowSortingзначение true в GridView. Вам не нужно задавать значение SortExpression для каждого столбца, так как DataField используется автоматически. 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.ModelBinding . К ним относятся следующие:

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

В этом руководстве вы будете использовать значение элемента управления для фильтрации записей, отображаемых в GridView. Атрибут Control будет добавлен в созданный ранее метод запроса. В следующем руководстве вы примените атрибут 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, чтобы получить значение из элемента управления, и присвойте ей имя параметра имя элемента управления, предоставляющего значение.

Чтобы разрешить атрибут Control, необходимо добавить оператор using для пространства имен System.Web.ModelBinding .

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 в шаблон динамических данных.