-1

我有一个 asp.net-mvc 网站，在一个页面上，我有一个显示订单信息的表单（基本 CRUD）

在订单中，您可以选择许多产品，因此在我要发布表格的表格中。我正在考虑为此使用jqGrid，但我过去一直这样做，每次编辑和添加时，您都会发布到服务器并刷新。.

问题是我无法将任何产品信息发布到服务器，直到我发布整个订单，所以我有一个 orderId。

无论如何我可以使用 jqGrid 在客户端纯粹添加行，然后将整个网格（产品集）作为表单帖子的一部分发布吗？

4

1 回答 1

1

一种可能的方法是使用标准jQgrid inline editing functionality就地编辑和/或添加行，然后当用户完成数据处理后，从包含所有值的表中构造一个 JSON 对象，并使用AJAX 请求。

让我们举个例子。假设我们有以下视图模型：

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
}

和一个控制器动作，它将检索产品集合并将它们作为 JSON 数组返回。当页面初始加载以检索数据时，jQgrid 将使用 AJAX 调用调用此控制器操作：

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 回答