Grabbing a list with ajax to be displayed later

Question

To preface this question, I will admit that I know nothing about javascript and related topics. I am trying to have a table be created and filled out based on a button push. If I pass the data directly into the ViewModel, it displays correctly, so I know the table is working right. Here is the JQuery request:

<input type="button" id="RootsBtn" value="Go"/>
<script language="javascript" type="text/javascript">
    $(function () {
        $("#RootsBtn").click(function () {  
            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.RouteUrl("GetApplications"))",
                data: {},
                success: function (data) {
                    alert(data.length);
                    $('#AppTableID').show();
                },
                error: function (xhr, ajaxOptions, throwError) {
                    alert("Error");
                    $('#AppTableID').hide();
                }
            });
        });
    });
</script>

I'm basing this code loosely on code I'm using to populate a dropdown list. I know the data is being grabbed properly because the alert(data.length); line shows the proper number of objects in my list.

The dropdown code included a $.each line. I have tried using variants of this and nothing has worked for me.

How would I get the data saved into my ViewModel so that it can be displayed?

EDIT: Adding more details

This is the Table display in my view:

<div id="AppTableID">
    <table id="dashboard">
        <thead>
            <th>
                @Html.LabelFor(model => model.apps.FirstOrDefault().AppStringID)
            </th>
            <th>
                @Html.LabelFor(model => model.apps.FirstOrDefault().ApplicationCategoryID)
            </th>
            <th>
                @Html.LabelFor(model => model.apps.FirstOrDefault().Description)
            </th>
        </thead>
        @foreach (var item in Model.apps ?? new List<Application> { null })
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.AppStringID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ApplicationCategoryID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
            </tr>
        }
    </table>
</div>

This is my viewmodel which is passed into the view:

public class HomeViewModel
{
    public HomeViewModel()
    {
         apps = new List<Application>();
    }
    public IEnumerable<Application> apps { get; set; }
}

This is the Application class:

public class Application
{
    public long ID { get; set; }
    public string AppStringID { get; set; }
    public int? ApplicationCategoryID { get; set; }
    public string Description { get; set; }
}

This is GetApplications: (appService.ToList() correctly gets the list of data. This has been well tested.)

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GetApplications()
{
    var apps = appService.ToList();
    if (apps == null)
    {
        return Json(null, JsonRequestBehavior.AllowGet);
    }
    return Json(apps, JsonRequestBehavior.AllowGet);
}

What is the structure of the data you are returning (include your `GetApplications` method, and what html to you want to create with it? — , Oct 01 '14 at 22:16

score 0 · Accepted Answer · 2014-10-01T23:03:29.033

0

In the success function of your ajax call

$.ajax({
  ....
  success: function (data) {
    $.each(data, function(index, item) {
      var row = $('<tr></tr>'); // create new table row
      row.append($('<td></td>').text(item.AppStringID));
      row.append($('<td></td>').text(item.ApplicationCategoryID));
      row.append($('<td></td>').text(item.Description));
      $('#dashboard').append(row); // add to table
    });
    $('#AppTableID').show();
  },
  ....
});

Notes: You should probably include a tbody element as a child of your table and add the rows to that. Your foreach loop only needs to be @foreach (var item in Model.apps) {.. (the collection has been initialized in the constructor). You also don't need the if (apps == null) {..} condition in the GetApplications method

edited Oct 01 '14 at 23:03

answered Oct 01 '14 at 22:45

It worked great. Thank you. One note, your append(row) line should have a ' after dashboard. Thanks again. – NerdyFool Oct 01 '14 at 23:02
One note, Application has a few DateTime objects in it. They are being displayed like this: `/Date(1365098312483)/` . How would I get them to display correctly as a date? I'll keep looking on my own as well. – NerdyFool Oct 01 '14 at 23:16
Have a look at [this answer](http://stackoverflow.com/questions/726334/asp-net-mvc-jsonresult-date-format), but an alternative would be to convert the date to a formatted string in the controller and pass that in the JSON – Oct 01 '14 at 23:24

Grabbing a list with ajax to be displayed later

1 Answers1