このトピックでは、igHierarchicalGrid™ を Web API サービスにバインドする方法を説明します。
以下のリストは、このトピックを理解するための前提条件として必要なトピックへのリンクを提供します。
このトピックは、以下のセクションで構成されます。
MVC4 Web API への igHierarchicalGrid のバインドは次の 2 段階のプロセスです。
Web API は、JSON、XML、および フォーム URL エンコード データのシリアル化をデフォルトでサポートします。$.ig.RESTDataSource
は、デフォルトで JSON のシリアル化をサポートします。この例では JSON が使用されています。
ASP.NET MVC 4 Web API へのバインドに関する一般的な要件を以下に示します。
ASP.NET MVC 4 Web API へバインドする手順をおおまかに示すと、次のようになります。
このサンプルでは、ロード オン デマンド モードで igHierarchicalGrid をバインドする方法を説明します。REST の設定値は、既定の非バッチ モードで示されています。
この例では、Northwind
データベースの Customers
および Orders
テーブルのデータが使用されています。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下のリソースが必要です。
以下の手順では、igHierarchicalGrid を MVC 4 Web API にバインドする方法を示します。
プロジェクトを作成します。
Infragistics.Web.Mvc.dll
への参照を追加します。
Infragistics.Web.Mvc.dll
を [.NET] タブから選択するか、[参照] から探し出して選択します。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")
Northwind
データベースの Customers および Orders
テーブルに関する ADO.NET エンティティー データ モデルを追加し、このモデルに NorthwindModel
という名前を付けます。
この例で必要とされるのは、Customer
フィールドと Order
フィールドのサブセットだけであるため、必要なデータだけを格納する別個のクラスを作成します。
Customer
クラスを作成します。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
クラスを作成します。Order.cs
」という名前を付けます。C# の場合:
public class Order
{
public int OrderID { get; set; }
public string ShipName { get; set; }
public string ShipAddress { get; set; }
}
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
プロパティと更新機能も定義します。
厳密に型指定されたモデルを定義します。
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())
デフォルトでは、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 を参照してください。
Controllers フォルダーに空の Web API コントローラーを新規作成して、CustomersController.cs
という名前を付けます。
注: 通常の ASP.NET MVC コントローラーと Web API コントローラーとの違いは、前者が Controller クラスから継承し、後者が
ApiController
クラスから継承するという点にあります。
C# の場合:
private NorthwindModel.NorthwindEntities db = new NorthwindModel.NorthwindEntities();
グリッドの 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 に直接アクセスしてデータ ストアを変更します。
グリッドの 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 の仕様どおりにクライアントへ送られます。
グリッドの 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 の仕様どおりにクライアントへ送られます。
グリッドの 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
メソッドによってデータベースから削除され、正しい状態コードがクライアントへ送られます。
Controllers フォルダーに空の Web API コントローラーを新規作成して、OrdersController.cs
という名前を付けます。
NorthwindModel
プライベート フィールドを追加します。C# の場合:
private NorthwindModel.NorthwindEntities db = new NorthwindModel.NorthwindEntities();
注: 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}
プレースホルダーからマップされます。
グリッドの 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 の仕様どおりにクライアントへ送られます。
グリッドの 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 の仕様どおりにクライアントへ送られます。
グリッドの 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 のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。
オンラインで表示: GitHub