igGrid 上で編集を行い、編集内容をデータベースに更新するサンプルのご紹介です。Entity Framework と連携することで SQL 文を明示的に記述する必要なく、データベースへのコミットまでを行います。今回紹介するコードを反映したサンプルはこちらからダウンロードできますので、サンプルと比較しながら記事をご覧下さい。
ポイントは２点で、UpdateUrl オプションの指定と saveChanges メソッドの呼び出しです。
データについて
データの生成は CodeFirst で行います。データのモデルは Customer.cs、コンテキストは DataContext.cs、イニシャライザは DataInitializer.cs です。CustomersController.cs の下記アクション呼び出し時に実データが生成されます。
public ActionResult Index()
{
return View(db.Customers.ToList());
}
igGrid の定義
編集機能の有効化
igGrid の編集機能（Updating）を有効化します。ColumnSettings では必要に応じて入力検証を行っています。
.Features(feature => { feature .Updating() .EditMode(GridEditMode.Row) .EnableAddRow(false) .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("ID").ReadOnly(true); settings.ColumnSetting().ColumnKey("Name").Required(true); settings.ColumnSetting().ColumnKey("Age").Required(true) .NumericEditorOptions(neo => { neo.MinValue(0).MaxValue(130).ValidatorOptions(validation => { validation.OnChange(true); }); }); settings.ColumnSetting().ColumnKey("Address").Required(true); settings.ColumnSetting().ColumnKey("RegisteredDate").Required(true); }); })
UpdateUrl オプションの指定
UpdateUrl に SaveData アクションを指定します。
@(Html.Infragistics().Grid<igGrid_updating.Models.Customer>(Model.AsQueryable()) .ID("grid1") .PrimaryKey("ID") .AutoGenerateColumns(false) .Columns(column => { ...省略... }) .Features(feature => { ...省略... }) .UpdateUrl(Url.Action("SaveData")) .DataBind() .Render())
saveChanges メソッドの呼び出し
ランタイムで igGrid に編集を行った後、ボタンクリックのタイミングで saveChanges メソッドを呼び出します。
$("#updateButton").click(function () { $("#grid1").igGrid("saveChanges", function (data) { writeLog("更新されました。"); }, function (jqXHR, textStatus, errorThrown) { writeLog("更新に失敗しました。"); }); });
更新処理
SaveData アクションでのデータベース更新
saveChanges メソッドを呼び出すと、UpdateUrl に指定されたアクションが呼び出されます。フォームデータの ig_transactions には igGrid 上での変更内容が格納されていますので、変更内容を読み取り、適宜データベースへの変更を行っています。今回のサンプルでは行の削除と更新を行います。
public ActionResult SaveData() { GridModel gridModel = new GridModel(); List<Transaction<Customer>> transactions = gridModel.LoadTransactions<Customer>(HttpContext.Request.Form["ig_transactions"]); ...省略... foreach (Transaction<Customer> t in transactions) { // 行の削除 if (t.type == "deleterow") { Customer row = db.Customers.Find(Int32.Parse(t.rowId)); db.Customers.Remove(row); } // 行の更新 else if (t.type == "row") { Customer row = db.Customers.Find(Int32.Parse(t.rowId)); db.Entry(row).State = EntityState.Modified; if (t.row.Name != null) { row.Name = t.row.Name; } if (t.row.Address != null) { row.Address = t.row.Address; } if (t.row.Age > 0) { row.Age = t.row.Age; } else if (t.row.Age <= 0) { response.Add("Failure", false); result.Data = response; return result; } if (t.row.RegisteredDate != null) { row.RegisteredDate = t.row.RegisteredDate; } } } // データソースの更新 db.SaveChanges(); ...省略... }
アプリケーションの実行
アプリケーションを実行し、セルの編集や行の削除を行います。その後、画面左下にある「更新ボタン」をクリックすると saveChanges メソッドの呼び出し、SaveData アクションの呼び出しが行なわれデータベースへの更新が行なわれます。
サンプル
igGrid_updating.zip
オンラインサンプル
http://jp.igniteui.com/grid/basic-editing
オンラインヘルプ
http://jp.igniteui.com/help/iggrid-updating
