考えられるアプローチの 1 つは、標準jQgrid inline editing functionality
を使用してその場で行を編集および/または追加し、ユーザーがデータの操作を終了したら、すべての値を含むテーブルから JSON オブジェクトを構築し、それらを使用してサーバーに POST することです。 AJAX リクエスト。
例を挙げましょう。次のビューモデルがあるとします。
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
}
製品のコレクションを取得し、それらを JSON 配列として返すコントローラー アクション。このコントローラー アクションは、データを取得するためにページが最初に読み込まれるときに、AJAX 呼び出しを使用して jQgrid によって呼び出されます。
public ActionResult GetProducts()
{
var products = new[]
{
new Product { Id = 1, Name = "Product 1" },
new Product { Id = 2, Name = "Product 2" },
new Product { Id = 3, Name = "Product 3" },
};
return Json(products, JsonRequestBehavior.AllowGet);
}
ビュー内に、すべてのデータをサーバーに送信するために使用されるテーブルとアンカーを含めることができます。
<table id="products"></table>
@Html.ActionLink("Complete order", "CompleteOrder", null, new { id = "completeOrder" })
パズルの最後の平和はもちろん、これを有効にする JavaScript です。
<script type="text/javascript">
$('#completeOrder').click(function () {
var data = $("#products").jqGrid('getRowData');
$.ajax({
url: this.href,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(data),
success: function(result) {
alert('success');
}
});
return false;
});
var lastId;
$('#products').jqGrid({
url: "@Url.Action("GetProducts")",
datatype: "json",
mtype: "GET",
colNames: [ "Id", "Name" ],
colModel: [
{ name: "Id", width: 55, editable: true },
{ name: "Name", width: 90, editable: true }
],
onSelectRow: function (id) {
if (id && id !== lastId) {
jQuery('#products').restoreRow(lastId);
jQuery('#products').editRow(id, true);
lastId = id;
}
},
editurl: 'clientArray' // <!-- This prevents jQgrid from sending an AJAX request to the server when the client has finished editing a row
});
</script>
これで、ユーザーがリンクをクリックしたときに呼び出され、すべての製品を取得するサーバー側コントローラー アクションを作成できます。
[HttpPost]
public ActionResult CompleteOrder(IList<Product> products)
{
return Json(products);
}
もちろん、これは単純化しすぎた例にすぎませんが、関連するメカニズムを示しています。jQgrid コントロールには、利用できるはるかに多くの可能性と高度な機能があります。Demos
公式ウェブサイトのページを注意深く読み、それらをよく理解することをお勧めします。