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