Loading Data into Table from Jquery in MVC

Question

I have this Json returned from controller :

 public ActionResult VerifyApp(string recurrence)
        {
            List<foo> item = schedulingProxy.CheckApp(recurrence);

            return Json(item, JsonRequestBehavior.AllowGet);
        }

And I have this table in my view:

<div class="table">
                <table id="thids" class="bg">
                    <thead>
                        <tr>
                            <th>
                                Date
                            </th>
                            <th>
                                Time
                            </th>
                            <th>
                                Slot
                            </th>
                            <th>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in conflictList)
                        {
                            <tr id="@item.ID">
                                <td>   
                                  @Html.DisplayFor(modelItem => item.ResourceFName)                             
                                </td>
                                <td>
                                  @Html.DisplayFor(modelItem => item.ResourceLName)
                                </td>
                                <td>
                                  @Html.DisplayFor(modelItem => item.ResourceSlot)
                                </td>
                                <td>
                                  @Html.DisplayFor(modelItem => item.reason)
                                </td>
                            </tr>                                 
                        }
                    </tbody>
                </table>

also i have added in the top of the view this :

@{
    var conflictList =new List<Mavi.Domain.Model.contactThread>();
}

And I have this Axaj call in my Jquery :

function ChkAvailable() {

        pairString = pairString + newObj.ToString() + "]";
        var requrl = '@Url.Action("VerifyAppointment", "Scheduling", null, Request.Url.Scheme, null)';
        $.ajax({
            type: "POST",
            url: requrl,
            data: { recurrence: pairString },
            success: function (data) {
               //returned List<foo>
            }
        });
    }

How can i add the values from my returned JSon Object into the conflictList ?? Or better yet .. How can i populate my Table ?

thevan · Accepted Answer · 2015-10-20 06:07:41Z

4

If I understand you right, you need just to append the new html content in to your table like this:

...
success: function (data) {
   for(var el in data)
   {
     $("#thids").find("tbody")
        .append($("<tr>").append($("<td>").text(el.ResourceFName))/*and so on*/);
   }               
}
...

edited Oct 20, 2015 at 6:07

thevan

10.4k55 gold badges140 silver badges203 bronze badges

answered Sep 12, 2012 at 9:04

Igor Konopko

7642 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mihai Labo Over a year ago

Yup ... that's exactly what I am looking for.Trying it out now ... If it works you get the answer mark :)

Mihai Labo Over a year ago

It worked .. had to use $.each ,but other than that ... everything was a-ok.Thank you!

Collectives™ on Stack Overflow

Loading Data into Table from Jquery in MVC

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related