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>

我将此代码松散地放在代码I上，用于填充下拉列表。我知道正在抓取数据，因为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>

这是我传递给视图的viewmodel：

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

这是Application类：

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) {..（该集合已在构造函数中初始化）。您也不需要if (apps == null) {..}方法

中的GetApplications条件

使用ajax抓取列表以便稍后显示

1 个答案: