-1

asp.net-mvc Web サイトがあり、1 つのページに注文情報を表示するフォーム (基本的な CRUD) があります。

注文内では、多くの製品を選択できるため、フォーム内にテーブルを投稿したいと考えています。私はこれにjqGridを使用することを考えていましたが、編集と追加のたびにサーバーに投稿して更新している過去に常にこれを行ってきました。.

問題は、注文全体を投稿するまで製品情報をサーバーに投稿できないため、orderId があることです。

jqGrid を使用して純粋にクライアント側に行を追加し、フォームの投稿の一部としてグリッド全体 (製品のセット) を投稿できますか?

4

1 に答える 1

1

考えられるアプローチの 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公式ウェブサイトのページを注意深く読み、それらをよく理解することをお勧めします。

于 2013-09-08T16:49:05.900 に答える