抓取ajax列表以后再显示

Question

为了说明这个问题，我承认我对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> 

我将这段代码松散地放在我用来填充下拉列表的代码上。我知道数据正在被正确抓取，因为alert(data.length);这一行在我的列表中显示了正确数量的对象。

下拉代码包含$.each行。我曾尝试使用这种变体，没有为我工作。

我将如何获取保存到我的ViewModel中的数据以便显示它？

编辑：添加更多细节

这是在我的视图中的表显示：

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

这是我的视图模型，其被传递到视图：

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

这是应用等级：

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

这是GetApplications：（appService.ToList()正确获取数据列表。这已经得到了很好的测试）

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

Answer 1

在你的Ajax调用

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

票据的成功功能：你或许应该包括tbody元素作为你的table的孩子和行添加到。您的foreach循环只需要@foreach (var item in Model.apps) {..（集合已在构造函数中初始化）。你也不需要在GetApplications方法