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

If its an AJAX call then you should be return a JSON object, not a PartialView... `return Json(new { @data = KVM.Kaart }, JsonRequestBehavior.AllowGet);` — musefan, Apr 22 '13 at 14:32
Well, I found out the problem and that wasn't it. Apparently, you don't want too have a success method the way I made it initially. I will update my question with the new Ajax call. — Timelog, Apr 22 '13 at 19:26

score 2 · Accepted Answer · answered Apr 23 '13 at 10:11

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

Populating a Webgrid from an Ajax Call

1 Answers1