Reputation: 53
I have an ASP.NET MVC 4 Application. I have a View with a Kendo.Grid and I want to send with ajax (JSON.stringify) the data of the grid at the controller.
My problem is that my controller receives a List of string and I don't know how to deserialize the Json Data.
CODE
This is the object contained in the rows of the grid:
public class CourseDto
{
public string CodCourse { get; set; }
public string DesCourse { get; set; }
}
This is the definition of the grid in my View:
@(Html.Kendo().Grid<CourseDto>()
.Name("GridCourses")
.Columns(columns =>
{
columns.Bound(c => c.CodCourse);
columns.Bound(c => c.DesCourse);
})
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Read("GetAllCourses", "ControllerCourses")
)
)
This is the ajax call to the controller with jquery:
function passTheGrid() {
$.ajax({
url: "@Url.Action("ShowCourses")",
type: "POST",
data: {
courses : JSON.stringify($("#GridCourses").data("kendoGrid").dataSource.data());
},
success: function (response) {
$("#coursesDiv").html(response);
}
});
}
This is the controller:
[HttpPost]
public PartialViewResult ShowCourses(List<string> courses)
{
JavaScriptSerializer js = new JavaScriptSerializer();
List<string> temp= new List<string>();
foreach (var singleCourse in courses)
{
temp.Add(js.Deserialize<string>(singleCourse));
}
...
return PartialView("_viewCourses");
}
In my example I have only a cource in the grid and when I pass the data with ajax at the controller, the parameter "courses" contains this string:
[{"CodCourse":"PRIVSIC0102006","DesCourse":"MULTIMEDIA - PRIVACY AND SECURITY"}]
But I get this Error when I try to deserialize:
Type 'System.String' is not supported for deserialization of a matrix
QUESTION
How do I deserialize the JSON Data in my controller correctly?
Upvotes: 1
Views: 3443
Reputation: 53
I resolved changing the code:
Call Ajax
function passTheGrid() {
var o = kendo.observable({
myCourses: $("#GridCourses").data("kendoGrid").dataSource.data()
});
var courses = JSON.stringify(o);
$.ajax({
url: "@Url.Action("ShowCourses")",
type: "POST",
data: {
courses : courses ,
success: function (response) {
$("#coursesDiv").html(response);
}
});
}
The ajax call pass this data:
{"myCourses":[{"CodCourse":"PRIVSIC0102006","DesCourse":"MULTIMEDIA - PRIVACY AND SECURITY"}]}
The controller
[HttpPost]
public PartialViewResult ShowCourses(string courses)
{
var coursesJson = JObject.Parse(courses).SelectToken("myCourses").ToString();
var coursesList = JsonConvert.DeserializeObject<List<CourseDto>>(coursesJson);
...
return PartialView("_viewCourses");
}
and the course list contains the object CourseDto.
Upvotes: 1
Reputation: 4054
MVC's built in serializer should be able to do this, assuming that the JSON structure you're passing in matches the structure of CourseDto
.
Update your controller method that accepts the Post to something like this:
[HttpPost]
public PartialViewResult ShowCourses(List<CourseDto> courses)
{
foreach (var singleCourse in courses)
{
// do something with your courses
}
...
return PartialView("_viewCourses");
}
Also, update your JS function that passes the data to the controller so that the myCourses
becomes courses
to match your controller param.
function passTheGrid() {
$.ajax({
url: "@Url.Action("ShowCourses")",
type: "POST",
data: {
courses : JSON.stringify($("#GridCourses").data("kendoGrid").dataSource.data());
},
success: function (response) {
$("#coursesDiv").html(response);
}
});
}
Upvotes: 0