igGrid 編集内容をデータベースに更新する - インフラジスティックス・ジャパン株式会社Blog

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();

    ...省略...
}