Populating a Webgrid from an Ajax Call

Question

I have a problem with populating a Webgrid from an Ajax call.

I have followed the example as showed in the following thread: mvc3 populating bind webgrid from ajax however, that did not yield any results.

When I run the website, I always get the message: "Error: undefined".

when debugging the code, I am quite sure that the problem lies in the fact that the return PartialView is the problem, as my data object in the ajax success method does not get filled with data.

Here are the examples of my code:

Ajax call:

$.fn.getCardResult = function (leerling, kaart) {
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetResults","Kaarten")',
            data: { leerlingID: leerling, cardID: kaart },
            cache: false,
            success: function (data) {
                console.log(data);
                if (!data.ok) {
                    window.alert(' error : ' + data.message);
                }
                else {
                    $('#card').html(data);
                }
            }
        });
    }

Partial View call:

<div class="card-content" id="card">
    @{
        if(Model.Kaart != null && Model.Kaart.Count > 0)
        {
            @Html.Partial("_Kaarten")
        }
        else
        {
            @: Er zijn geen kaarten beschikbaar.
        }
    }
</div>

Partial View:

@model List<ProjectCarrousel.Models.KaartenModel>

@{
    var grid = new WebGrid(source: Model,ajaxUpdateContainerId: "card",
        defaultSort: "Topicname");

    grid.GetHtml(
        tableStyle: "webgrid",
        columns: grid.Columns(
            grid.Column("Topicname", "Topic"),
            grid.Column("Taskname", "Taken"),
            grid.Column("Taskpoints", "Punten"),
            grid.Column("Grades", "Resultaat"),
            grid.Column("Date", "Datum"),
            grid.Column("Teachercode", "Paraaf Docent")
        )
    );
}

Controller code:

public ActionResult GetResults(int leerlingID, string cardID)
    {
        try
        {
            int Ovnumber = leerlingID;
            string CardId = cardID;

            List<KaartenModel> kaartlijst = new List<KaartenModel>();


            IEnumerable<topic> topics = _db.topic.Include("tasks.studenttotask").Where(i => i.CardID == CardId);
            foreach (topic topic in topics)
            {
                foreach (tasks task in topic.tasks)
                {
                    KaartenModel ka = new KaartenModel();

                    ka.Topicname = task.topic.Topicname;
                    ka.Taskname = task.Taskname;
                    ka.Taskpoints = task.Taskpoints;
                    ka.Ranks = task.Ranks;
                    ka.Date = task.studenttotask.Where(i => i.Ovnumber == Ovnumber).Select(d => d.Date).SingleOrDefault();
                    ka.Grades = task.studenttotask.Where(i => i.Ovnumber == Ovnumber).Select(d => d.Grades).SingleOrDefault();
                    ka.Teachercode = task.studenttotask.Where(i => i.Ovnumber == Ovnumber).Select(d => d.Teachercode).SingleOrDefault();
                    kaartlijst.Add(ka);
                }
            }

            KVM.Kaart = kaartlijst;

            return PartialView("_Kaarten", KVM.Kaart);

        }
        catch (Exception ex)
        {
            return Json(new { ok = false, message = ex.Message });
        }
    }

If anyone could help it would be greatly appreciated.

UPDATE

After fiddling about a bit I found a solution that worked for me. Below is a snippet of an updated Ajax Call:

The solution I found was too make the Success method in another way. This made sure that the Partial View rendered properly. Below is the Ajax call snippet.

$.ajax({
    url: '@Url.Action("GetAjaxCall","Home")',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html',
    data: { id: id },
})
.success(function (result) {
     $('#sectionContents').html(result);
 })
 .error(function (xhr, status) {
     alert(xhr.responseText);
 });

Answer 1

The solution I found was too make the Success method in another way. This made sure that the Partial View rendered properly. Below is the Ajax call snippet.

$.ajax({
    url: '@Url.Action("GetAjaxCall","Home")',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html',
    data: { id: id },
})
.success(function (result) {
     $('#sectionContents').html(result);
 })
 .error(function (xhr, status) {
     alert(xhr.responseText);
 });