モデル バインドと Web フォームを使用したデータの並べ替え、ページング、フィルター処理

  • [アーティクル]

作成者: Tom FitzMacken

このチュートリアル シリーズでは、ASP.NET Web Forms プロジェクトでモデル バインドを使用する基本的な側面について説明します。 モデル バインドを使用すると、データ ソース オブジェクト (ObjectDataSource や SqlDataSource など) を扱うよりも、データの操作が簡単になります。 このシリーズは入門資料から始まり、後のチュートリアルでより高度な概念に進んでいきます。

このチュートリアルでは、モデル バインドを使用してデータの並べ替え、ページング、フィルター処理を追加する方法について説明します。

このチュートリアルは、シリーズの最初の部分で作成されたプロジェクトに基づいています。

C# または VB で完全なプロジェクトをダウンロードできます。 ダウンロード可能なコードは、Visual Studio 2012 または Visual Studio 2013 で動作します。 このチュートリアルで示す Visual Studio 2013 テンプレートとは若干異なる Visual Studio 2012 テンプレートを使用します。

作成する内容

このチュートリアルでは、次のことについて説明します。

  1. データの並べ替えとページングを有効にする
  2. ユーザーによる選択に基づいてデータのフィルター処理を有効にする

並べ替えの追加

GridView 内で並べ替えを有効にすることは非常に簡単です。 Student.aspx ファイルの中で、GridView 内の AllowSorting を true に設定するだけです。 DataField が自動的に使用されるため、各列に 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>

この Web アプリケーションを実行し、異なる列内の値で学生のレコードを並べ替えるテストをします。

sort students

ページングの追加

ページングを有効にすることも非常に簡単です。 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">

この Web アプリケーションを実行すると、レコードが複数のページに分割され、1 つのページ上に 4 つ以下のレコードが表示されることがわかります。

add paging

遅延クエリの実行により、アプリケーションの効率が向上します。 データ セット全体を取得する代わりに、GridView はクエリを変更して、現在のページのレコードのみを取得します。

ユーザー選択でレコードをフィルター処理する

モデル バインドでは、モデル バインド メソッド内でパラメーターの値を設定する方法を指定できるようにする複数の属性が追加されます。 これらの属性は、System.Web.ModelBinding 名前空間内にあります。 具体的な内容を次に示します。

  • コントロール
  • クッキー
  • Form
  • プロフィール
  • QueryString
  • RouteData
  • セッション
  • UserProfile
  • ViewState

このチュートリアルでは、コントロールの値を使用して、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 属性を解決するには、System.Web.ModelBinding 名前空間の using ステートメント を追加する必要があります。

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;    
}

この Web アプリケーションを実行し、ドロップダウン リストから別の値を選択して、学生の一覧をフィルター処理します。

filter students

まとめ

このチュートリアルでは、データの並べ替えとページングを有効にしました。 また、コントロールの値によるデータのフィルター処理も有効にしました。

次のチュートリアルでは、JQuery UI ウィジェットを動的データ テンプレートの中に統合して、UI を強化します。

前へ次へ