用ajax抓取一个稍后显示的列表

Grabbing a list with ajax to be displayed later

本文关键字:显示 列表 一个 抓取 ajax      更新时间:2023-09-26

在回答这个问题之前,我承认我对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);
}

在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方法中也不需要if (apps == null) {..}条件