How to post a WebGrid to a Controller using Ajax

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


How to post a WebGrid to a Controller using Ajax



I want to post the full WebGrid from my view to my controller using ajax. In this WebGrid I display a table from a database and I want to provide, that the user of this webpage can update the columns (in the database).


WebGrid


WebGrid



My try so far:


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



The GridView model here has always 0 columns.


GridView model



WebGrid


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



Script


$('.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);
}
});



The outcome of alert(jsonGrid) is:


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}}



I can't see columns or anything like that in here, so I guess I need something different?





Well, does the structure of the JSON in jsonGrid match the structure of the C# GridView object? Somehow I doubt it. If they don't match, then MVC will not be able to serialise your data into the gridview object.
– ADyson
8 mins ago


jsonGrid


GridView





@ADyson exactly, they don't match. I will add it to my question
– David Walser
3 mins ago









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Visual Studio Code: How to configure includePath for better IntelliSense results

Spring cloud config client Could not locate PropertySource

Regex - How to capture all iterations of a repeating pattern?