jebbo
jebbo

Reputation: 53

Asp.net MVC deserialize Kendo Grid data in the controller

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

Answers (2)

jebbo
jebbo

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

Matt Millican
Matt Millican

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

Related Questions