バージョン

ASP.NET MVC WebAPI へのバインド

トピックの概要

目的

このトピックでは、igHierarchicalGrid™ を Web API サービスにバインドする方法を説明します。

前提条件

以下のリストは、このトピックを理解するための前提条件として必要なトピックへのリンクを提供します。

  • REST の更新 (igGrid): このトピックでは、REST サービスでの igGrid サポートについて説明します。
  • igHierarchicalGrid の概要: このトピックでは、機能、データ ソースへのバインド、要件、テンプレート、相互作用に関する情報を含めて、igHierarchicalGrid コントロールの概要を示します。
  • igHierarchicalGrid の初期化: このトピックでは、jQuery と MVC 両方の igHierarchicalGrid の初期化方法を示しています。
  • ロードオンデマンド (igHierarchicalGrid): このトピックでは、データを一度にオン デマンドで igHierarchicalGrid に読み込む 2 とおりの方法を示します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

ASP.NET MVC Web API へのバインド - おおまかな流れ

REST サービスへのバインドの概要

MVC4 Web API への igHierarchicalGrid のバインドは次の 2 段階のプロセスです。

  • クライアント側の REST 設定の構成
  • サーバー側の REST 設定の構成

Web API は、JSON、XML、および フォーム　URL エンコード データのシリアル化をデフォルトでサポートします。$.ig.RESTDataSource は、デフォルトで JSON のシリアル化をサポートします。この例では JSON が使用されています。

要件

ASP.NET MVC 4 Web API へのバインドに関する一般的な要件を以下に示します。

  • ASP.NET MVC 4

手順

ASP.NET MVC 4 Web API へバインドする手順をおおまかに示すと、次のようになります。

  1. モデルのセットアップ
  2. REST 設定による igHierarchicalGrid の初期化
  3. サーバー側の子レイアウト用のルーティングを構成します。
  4. igHierarchicalGrid のルート レイアウト用のコントローラー アクションの構成
  5. igHierarchicalGrid の子レイアウト用のコントローラー アクションの構成

ASP.NET MVC Web API へのバインド - 例

概要

このサンプルでは、ロード オン デマンド モードで igHierarchicalGrid をバインドする方法を説明します。REST の設定値は、既定の非バッチ モードで示されています。

この例では、Northwind データベースの Customers および Orders テーブルのデータが使用されています。

プレビュー

以下のスクリーンショットは最終結果のプレビューです。

前提条件

この手順を実行するには、以下のリソースが必要です。

  • Microsoft® Visual Studio 2010 またはそれ以降のバージョンのインストール
  • MVC 4 Framework のインストール
  • Northwind データベースのインストール
  • Infragistics.Web.Mvc.dll
  • Ignite UI for jQuery JavaScript とテーマ ファイル

手順

以下の手順では、igHierarchicalGrid を MVC 4 Web API にバインドする方法を示します。

手順 1: プロジェクトをセットアップします。

  1. プロジェクトを作成します。

    • Visual Studio のメニューから、[ファイル] ｰ＞ [新規プロジェクト] を選択します。
    • 左側にある [インストール済みのテンプレート] から、[Visual C#] -> [Web] を選択します。
    • 中央にあるプロジェクトの一覧から [ASP.NET MVC 4 Web アプリケーション] を選択します。
    • [名前] フィールドに「igHierarchicalGridRESTSample」と入力して、[OK] ボタンを押します。
    • [新規 ASP.NET MVC プロジェクト] ダイアログから [Web API] を選択して [OK] ボタンを押します。

  2. Infragistics.Web.Mvc.dll への参照を追加します。

    • 参照フォルダーを右クリックして [参照の追加…] を選択します。
    • Infragistics.Web.Mvc.dll を [.NET] タブから選択するか、[参照] から探し出して選択します。

  3. Ignite UI for jQuery スクリプトへの参照を追加します。

    • Ignite UI for jQuery 配布可能ファイルをプロジェクトのスクリプト ディレクトリにコピーします。
    • Views\Shared フォルダーにある _Layout.cshtml ファイルに Infragistics フォルダーへの参照を追加します。

HTML の場合:

<script src="../../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script type="text/javascript" src="../../Scripts/Infragistics/js/infragistics.loader.js"></script>

Views\Shared フォルダーにある _Layout.cshtml ファイルに以下の行を追加します。

C# の場合:

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")

手順 2: モデルをセットアップします。

エンティティ モデルを作成します。

Northwind データベースの Customers および Orders テーブルに関する ADO.NET エンティティー データ モデルを追加し、このモデルに NorthwindModel という名前を付けます。

Customer および Order モデル クラスを作成します。

この例で必要とされるのは、Customer フィールドと Order フィールドのサブセットだけであるため、必要なデータだけを格納する別個のクラスを作成します。

  • Customer クラスを作成します。
  • 新しいクラスを Models フォルダーに追加して、そのクラスに「Customer.cs」という名前を付けます。

以下のプロパティを Customer.cs ファイルに追加します。

C# の場合:

public class Customer
{
    public string CustomerID { get; set; }
    public string CompanyName { get; set; }
    public string ContactName { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public List<Order> Orders { get; set; }
}
  • Order クラスを作成します。
    • 新しいクラスを Models フォルダーに追加して、そのクラスに「Order.cs」という名前を付けます。
    • 以下のプロパティを Order.cs ファイルに追加します。

C# の場合:

public class Order
{
    public int OrderID { get; set; }
    public string ShipName { get; set; }
    public string ShipAddress { get; set; }
}

手順 3: REST 設定で igHierarchicalGrid を初期化します。

Home コントローラーを構成します。

Index アクション メソッドを以下のコードに置き換えます。

C# の場合:

public ActionResult Index()
{
    NorthwindModel.NorthwindEntities db = new NorthwindModel.NorthwindEntities();
    var customers = from c in db.Customers
                    select new Customer() { CustomerID = c.CustomerID, CompanyName = c.CompanyName, ContactName = c.ContactName, City = c.City, Address = c.Address };
    return View(customers.AsQueryable());
}

Index アクション メソッド内でロード オン デマンドで構成するには、Customers データにバインドされるルート レイアウトと、Orders データにバインドされる子レイアウトを定義します。Rest プロパティを true に設定することによって REST サポートを有効にします。また、RESTSettings プロパティと更新機能も定義します。

Home ビューを構成します。

厳密に型指定されたモデルを定義します。

C# の場合:

@model IQueryable<igHierarchicalGridRESTSample.Models.Customer>

Infragistics.Web.Mvc.dll アセンブリを参照します。

C# の場合:

@using Infragistics.Web.Mvc

Infragistics Loader を追加します。

C# の場合:

@Html.Infragistics().Loader().ScriptPath("~/Scripts/Infragistics/js/").CssPath("~/Scripts/Infragistics /css/").Render()

注: それぞれの Ignite UI for jQuery ファイル ロケーションに合わせて ScriptPath と CssPath のロケーションを変更する必要があります。

グリッドを定義します。

C# の場合:

@(Html.Infragistics().Grid(Model).
    ID("grid1").
    AutoGenerateColumns(false).
    AutoGenerateLayouts(false).
    Height("500px").
    Width("700px").
    ResponseDataKey(String.Empty).
    PrimaryKey("CustomerID").
    LoadOnDemand(true).
    Rest(true).
    Columns(column =>
    {
        column.For(x => x.CustomerID).HeaderText("Customer ID").DataType("string");
        column.For(x => x.CompanyName).HeaderText("Company Name").DataType("string");
        column.For(x => x.ContactName).HeaderText("Contact Name").DataType("string");
        column.For(x => x.Address).HeaderText("Address").DataType("string");
        column.For(x => x.City).HeaderText("City").DataType("string");
    }).
    ColumnLayouts(layouts => {
        layouts.For(x => x.Orders).
            ResponseDataKey(String.Empty).
            Width("100%").
            ForeignKey("CustomerID").
            PrimaryKey("OrderID").
            AutoGenerateColumns(false).
            AutoGenerateLayouts(false).
            Columns(childcolumn =>
            {
                childcolumn.For(x => x.OrderID).HeaderText("Order ID").DataType("number");
                childcolumn.For(x => x.ShipAddress).HeaderText("Ship Address").DataType("string");
                childcolumn.For(x => x.ShipName).HeaderText("Ship Name").DataType("string");
            }).Features(features => features.Updating().EditMode(GridEditMode.Row));
    }).
    RestSettings(rest =>
    {
        rest.RestSetting().        Create(r => r.RestVerbSetting().Url("/api/customers/").Batch(false)).
        Update(r => r.RestVerbSetting().Url("/api/customers/").Batch(false)).
        Remove(r => r.RestVerbSetting().Url("/api/customers/").Batch(false));
    }).
    Features(f => f.Updating()).
    DataSourceUrl("/api/customers/").
    Render())

手順 4: サーバー側の子レイアウト用のルーティングを構成します。

デフォルトでは、igHierarchicalGrid 子レイアウトの要求 URL は次のような形でコンストラクトされます。

Url/RootPrimaryKeyID/Child1LayoutName/Child1PrimaryKeyID/Child2LayoutName/Child2PrimaryKeyID

例: 

/api/customers/ANATR/orders/10308

ここで、

Url = /api/customers/,
RootPrimaryKeyID = ANATR,
Child1LayoutName = orders,
Child1PrimaryKeyID = 10308

デフォルトでは、このルーティングは ASP.NET Web API によって処理されないため、ルーティング ハンドラーをルーティング テーブルに追加することは避けてください。

代わりに、restSettings.create.Template、restSettings.Update.Template、restSettings.remove.Template の各プロパティをカスタマイズすることにより、REST サービスの構成に合わせて要求 URL を変更できます。

App_Start フォルダー内の RouteConfig.cs ファイルに、RegisterRoutes メソッド内の子レイアウトへのルーティングを追加します。

C# の場合:

routes.MapHttpRoute(
    name: "ChildApi",
    routeTemplate: "api/{parentcontroller}/{parentid}/{controller}/{id}",
    defaults: new { parentcontroller = "customers", id = RouteParameter.Optional }
);

要求 URL: /api/customers/ANATR/orders/10308 は次のように処理されます。

"api/{parentcontroller}" = "/api/customers",
"{parentid}" = “ANATR”,
"{controller}" = "orders",
"{id}" = 10308

この URL に関する GET 要求は、OrdersController 内で GetOrders(“ANATR”) メソッドを実行します。

OrdersController の詳細については、手順 6 を参照してください。

手順 5: igHierarchicalGrid のルート レイアウト用のコントローラー アクションの構成

1.Customers コントローラーを作成します。

Controllers フォルダーに空の Web API コントローラーを新規作成して、CustomersController.cs という名前を付けます。

注: 通常の ASP.NET MVC コントローラーと Web API コントローラーとの違いは、前者が Controller クラスから継承し、後者が ApiController クラスから継承するという点にあります。

2.NorthwindModel プライベート フィールドを追加します。

C# の場合:

private NorthwindModel.NorthwindEntities db = new NorthwindModel.NorthwindEntities();

3.GET コントローラー アクションを定義します。

グリッドの GET 要求を処理する新しいメソッドを CustomersController に追加します。

C# の場合:

public IEnumerable<Customer> GetCustomers(int dbdepth)
{
    var customers = from c in db.Customers
                    select new Customer() { CustomerID = c.CustomerID, CompanyName = c.CompanyName, ContactName = c.ContactName, City = c.City, Address = c.Address };
    return customers;
}

GetCustomers メソッドで、前に定義した Customer オブジェクト内にある Customers テーブルのデータをラップします。グリッドがロード オン デマンドとして定義されているかどうかや、正しいデータ階層を返すかどうかは、dbdepth パラメーターで調べることができます。

注: 分かりやすくするために、この例では、リポジトリ デザイン パターンを使用する代わりに、エンティティー フレームワーク API に直接アクセスしてデータ ストアを変更します。

4.PUT コントローラー アクションを定義します。

グリッドの PUT 要求を処理する新しいメソッドを CustomersController に追加します。

C# の場合:

public HttpResponseMessage PutCustomer(string id, Customer customer)
{
    if (ModelState.IsValid && id == customer.CustomerID)
    {
        NorthwindModel.Customer changedCustomer = new NorthwindModel.Customer()
        {
            CustomerID = customer.CustomerID,
            CompanyName = customer.CompanyName,
            ContactName = customer.ContactName,
            Address = customer.Address,
            City = customer.City
        };
        db.Customers.Attach(changedCustomer);
        db.ObjectStateManager.ChangeObjectState(customer, EntityState.Modified);
        try
        {
            db.SaveChanges();
        }
        catch (DbUpdateConcurrencyException)
        {
            return Request.CreateResponse(HttpStatusCode.NotFound);
        }
        return Request.CreateResponse(HttpStatusCode.OK, customer);
    }
    else
    {
        return Request.CreateResponse(HttpStatusCode.BadRequest);
    }
}

PutCustomer メソッドは、PUT 要求の発行時、つまり、顧客データの更新時に実行されます。id パラメーターは、ルーティング テンプレート内の {id} プレースホルダーに従ってマップされます。Customer パラメーターは既定のモデル バインダーによってコンストラクトされます。

既定のモデル バインダーのエラーは、ModelState.IsValid プロパティに基づいてチェックされます。そのモデルが有効なものであれば、新しい Customer インスタンスが Customers エンティティにアタッチされ、オブジェクトの状態が EntityState.Modified に設定されることになります。最後に、変更された顧客データが、SaveChanges メソッドによってデータベースに保存され、正しい状態コードが、REST の仕様どおりにクライアントへ送られます。

5.POST コントローラー アクションを定義します。

グリッドの POST 要求を処理する新しいメソッドを CustomersController に追加します。

C# の場合:

public HttpResponseMessage PostCustomer(Customer customer)
{
    if (ModelState.IsValid)
    {
        NorthwindModel.Customer newCustomer = new NorthwindModel.Customer() {
            CustomerID = customer.CustomerID,
            CompanyName = customer.CompanyName,
            ContactName = customer.ContactName,
            Address = customer.Address,
            City = customer.City
        };
        db.Customers.AddObject(newCustomer);
        db.SaveChanges();
        HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, customer);
        response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = customer.CustomerID }));
        return response;
    }
    else
    {
        return Request.CreateResponse(HttpStatusCode.BadRequest);
    }
}

PostCustomer メソッドは、POST 要求の発行時、つまり、顧客の新規作成時に実行されます。Customer パラメーターは既定のモデル バインダーによってコンストラクトされます。

既定のモデル バインダーのエラーは、ModelState.IsValid プロパティに基づいてチェックされます。そのモデルが有効なものであれば、新しい Customer インスタンスが AddObject メソッドによって Customers エンティティにアタッチされます。

最後に、その顧客が、SaveChanges メソッドによってデータベースに保存され、正しい状態コードが、REST の仕様どおりにクライアントへ送られます。

6.DELETE コントローラー アクションを定義します。

グリッドの DELETE 要求を処理する新しいメソッドを CustomersController に追加します。

C# の場合:

public HttpResponseMessage DeleteCustomer(string id)
{
    NorthwindModel.Customer customer = db.Customers.Single(c => c.CustomerID == id);
    if (customer == null)
    {
        return Request.CreateResponse(HttpStatusCode.NotFound);
    }
    db.Customers.DeleteObject(customer);
    try
    {
        db.SaveChanges();
    }
    catch (DbUpdateConcurrencyException)
    {
        return Request.CreateResponse(HttpStatusCode.NotFound);
    }
    return Request.CreateResponse(HttpStatusCode.OK, customer);
}

DeteleCustomer メソッドは、DELETE 要求の発行時、つまり、顧客データの削除時に実行されます。id パラメーターは、ルーティング テンプレート内の {id} プレースホルダーに従ってマップされます。

このメソッドでは、顧客がその CustomerID によって Customers エンティティから抽出され、DeleteObject メソッドに渡されます。最後に、その顧客が SaveChanges メソッドによってデータベースから削除され、正しい状態コードがクライアントへ送られます。

手順 6:igHierarchicalGrid Orders の子レイアウト用のコントローラー アクションを構成します。

1.Orders コントローラーを作成します。

Controllers フォルダーに空の Web API コントローラーを新規作成して、OrdersController.cs という名前を付けます。

2.NorthwindModel プライベート フィールドを追加します。

C# の場合:

private NorthwindModel.NorthwindEntities db = new NorthwindModel.NorthwindEntities();

3.GET コントローラー アクションを定義します。

注: GET コントローラー アクションを呼び出せるようにするには、ロード オン デマンドを使用するように igHierarchicalGrid を構成しておく必要があります。

グリッドの GET 要求を処理する新しいメソッドを OrdersController に追加します。

C# の場合:

public IEnumerable<Order> GetOrders(string parentid)
{
    var orders = from o in db.Orders
                    where o.CustomerID == parentid
                    select new Order() { OrderID = o.OrderID, ShipAddress = o.ShipAddress, ShipName = o.ShipName };
    return orders;
}

GetOrders メソッドは、前に定義した Order オブジェクト内にある Orders エンティティのデータをラップします。外部キーによるデータのフィルタリングには parentid パラメーターが使用されます。parentid パラメーターは、ルーティング テンプレート内の {parentid} プレースホルダーからマップされます。

4.PUT コントローラー アクションを定義します。

グリッドの PUT 要求を処理する新しいメソッドを OrdersController に追加します。

C# の場合:

public HttpResponseMessage PutOrder(int id, Order order)
{
    if (ModelState.IsValid && id == order.OrderID)
    {
        NorthwindModel.Order changedOrder = new NorthwindModel.Order()
        {
            OrderID = order.OrderID,
            ShipAddress = order.ShipAddress,
            ShipName = order.ShipName
        };
        db.Orders.Attach(changedOrder);
        db.ObjectStateManager.ChangeObjectState(order, EntityState.Modified);
        try
        {
            db.SaveChanges();
        }
        catch (DbUpdateConcurrencyException)
        {
            return Request.CreateResponse(HttpStatusCode.NotFound);
        }
        return Request.CreateResponse(HttpStatusCode.OK, order);
    }
    else
    {
        return Request.CreateResponse(HttpStatusCode.BadRequest);
    }
}

PutOrder メソッドは、PUT 要求の発行時、つまり、注文データの更新時に実行されます。id パラメーターは、ルーティング テンプレート内の {id} プレースホルダーからマップされます。Order パラメーターは既定のモデル バインダーによってコンストラクトされます。

既定のモデル バインダーのエラーは、ModelState.IsValid プロパティに基づいてチェックされます。そのモデルが有効なものであれば、新しい Order インスタンスが Orders エンティティにアタッチされ、オブジェクトの状態が EntityState.Modified に設定されることになります。最後に、変更された受注データが、SaveChanges メソッドによってデータベースに保存され、正しい状態コードが、REST の仕様どおりにクライアントへ送られます。

5.POST コントローラー アクションを定義します。

グリッドの POST 要求を処理する新しいメソッドを OrdersController に追加します。

C# の場合:

public HttpResponseMessage PostOrder(Order order)
{
    if (ModelState.IsValid)
    {
        NorthwindModel.Order newOrder = new NorthwindModel.Order()
        {
            OrderID = order.OrderID,
            ShipAddress = order.ShipAddress,
            ShipName = order.ShipName
        };
        db.Orders.AddObject(newOrder);
        db.SaveChanges();
        HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, order);
        response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = order.OrderID }));
        return response;
    }
    else
    {
        return Request.CreateResponse(HttpStatusCode.BadRequest);
    }
}

PostOrder メソッドは、POST 要求の発行時、つまり、注文の新規作成時に実行されます。Order パラメーターは既定のモデル バインダーによってコンストラクトされます。

既定のモデル バインダーのエラーは、ModelState.IsValid プロパティに基づいてチェックされます。そのモデルが有効なものであれば、新しい Order インスタンスが AddObject メソッドによって Orders エンティティにアタッチされます。

最後に、受注データが、SaveChanges メソッドによってデータベースに保存され、正しい状態コードが、REST の仕様どおりにクライアントへ送られます。

6.DELETE コントローラー アクションを定義します。

グリッドの DELETE 要求を処理する新しいメソッドを OrdersController に追加します。

C# の場合:

public HttpResponseMessage DeleteOrder(int id)
{
    NorthwindModel.Order order = db.Orders.Single(o => o.OrderID == id);
    if (order == null)
    {
        return Request.CreateResponse(HttpStatusCode.NotFound);
    }
    db.Orders.DeleteObject(order);
    try
    {
        db.SaveChanges();
    }
    catch (DbUpdateConcurrencyException)
    {
        return Request.CreateResponse(HttpStatusCode.NotFound);
    }
    return Request.CreateResponse(HttpStatusCode.OK, order);
}

DeteleOrder メソッドは、DELETE 要求の発行時、つまり、注文データの削除時に実行されます。id パラメーターは、ルーティング テンプレート内の {id} プレースホルダーからマップされます。

受注データは、その OrderID によって Orders エンティティから抽出され、DeleteObject メソッドに渡されます。最後に、その受注データが SaveChanges メソッドによって削除され、正しい状態コードがクライアントへ送られます。

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

リソース

以下の資料 (Infragistics のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。

  • ASP.NET Web API を使用した作業の開始: ASP.NET Web API は、ブラウザーやモバイル デバイスを含めた広範なクライアントから利用できる HTTP サービスの構築を容易にするフレームワークです。ASP.NET Web API は、REST を多用したアプリケーションを .NET フレームワーク上で構築するための理想的なプラットフォームです。

オンラインで表示: GitHub