Javascript 使用ajax抓取列表，稍后显示

作为这个问题的前言，我承认我对javascript和相关主题一无所知。我试图有一个表被创建和填写一个按钮的基础上按下。如果我将数据直接传递到ViewModel，它将正确显示，因此我知道该表工作正常。以下是JQuery请求：

<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>

这是传递到视图中的我的viewmodel：

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

这是GetApplications:（

appService.ToList（）

正确获取数据列表。这已经过良好的测试。）

---

在ajax调用的success函数中

$.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();
  },
  ....
});

$.ajax({
....
成功：功能（数据）{
$。每个（数据、功能（索引、项目）{
var row=$（''）；//创建新表行
行.append（$（''）.text（item.AppStringID））；
行.append（$（''）.text（item.ApplicationCategoryID））；
行。追加（$（''）.text（item.Description））；
$（“#仪表板”）.append（行）；//添加到表
});
$（'#AppTableID'）.show（）；
},
....
});

---

注意：您可能应该将

tbody

元素作为

表

的子元素，并将行添加到该表中。您的

foreach

循环只需要是

@foreach（Model.apps中的var项）{..

（集合已在构造函数中初始化）。在

GetApplications

方法中，您也不需要

if（apps==null）{..}

条件（包括你的

GetApplications

方法，以及你想用它创建什么html？效果很好。谢谢。注意，你的附加（行）行应该在仪表板后面有一个“after”。再次感谢。注意，应用程序中有一些DateTime对象。它们显示如下：

/Date（1365098312483）/

。如何让它们正确显示为日期？我也会自己继续查看。查看一下，但另一种方法是将日期转换为控制器中的格式化字符串，并将其传递到JSONPerfect中。再次感谢。

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

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

$.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();
  },
  ....
});