如何使用Ajax将WebGrid发布到控制器

Question

我想使用ajax将完整的WebGrid从我的视图发布到我的控制器。在此WebGrid中，我显示了一个数据库表，并希望提供此网页的用户可以更新（数据库中的）列的信息。

到目前为止，我的尝试：

控制器

public JsonResult UpdateTable(GridView model)
{
    // Update Model to db..
    string message = "Success";
    return Json(message, JsonRequestBehavior.AllowGet);
}  

  

此处的GridView model始终为0列。

视图/脚本

WebGrid

<div id="tableGridDiv">
    @grid.GetHtml(
    tableStyle: "table", columns: cols)
</div>

脚本

$('.save-user').on('click', function () {
    var grid = $("#tableGridDiv").find("table.grid").first();
    alert(grid.innerHTML);
    var jsonGrid = JSON.stringify(grid);
    //var jsonGrid = $.parseJSON(grid);
    alert(jsonGrid);
    $.ajax({
        url: '/Home/UpdateTable/',
        data: jsonGrid,
        datatype: JSON,
        type: 'POST',
        contentType: 'application/json, charset=utf-8',
        success: function (data) {
            alert(data);
        }
    });

alert(jsonGrid)的结果是：

{
   "length":0,
   "prevObject":{
      "length":0,
      "prevObject":{
         "0":{
            "__browserLink_sourceMapping":[
               "~/Views/Home/ViewTable.cshtml",
               "div#tableGridDiv",
               4717,
               104,
               23
            ]
         },
         "length":1,
         "context":{
            "location":{
               "href":"http://localhost:56452/Home/ViewTable?View=0",
               "ancestorOrigins":{

               },
               "origin":"http://localhost:56452",
               "protocol":"http:",
               "host":"localhost:56452",
               "hostname":"localhost",
               "port":"56452",
               "pathname":"/Home/ViewTable",
               "search":"?View=0",
               "hash":""
            },
            "_html5shiv":1,
            "jQuery110201336937122154982":1
         },
         "selector":"#tableGridDiv"
      },
      "context":{
         "location":{
            "href":"http://localhost:56452/Home/ViewTable?View=0",
            "ancestorOrigins":{

            },
            "origin":"http://localhost:56452",
            "protocol":"http:",
            "host":"localhost:56452",
            "hostname":"localhost",
            "port":"56452",
            "pathname":"/Home/ViewTable",
            "search":"?View=0",
            "hash":""
         },
         "_html5shiv":1,
         "jQuery110201336937122154982":1
      },
      "selector":"#tableGridDiv table.grid"
   },
   "context":{
      "location":{
         "href":"http://localhost:56452/Home/ViewTable?View=0",
         "ancestorOrigins":{

         },
         "origin":"http://localhost:56452",
         "protocol":"http:",
         "host":"localhost:56452",
         "hostname":"localhost",
         "port":"56452",
         "pathname":"/Home/ViewTable",
         "search":"?View=0",
         "hash":""
      },
      "_html5shiv":1,
      "jQuery110201336937122154982":1
   }
}

我在这里看不到列或类似的东西，所以我想我需要其他东西吗？