我正在尝试将ajax响应数组推入MVC表.这是我的脚本的样子:
<script type="text/javascript">
$(document).ready(function () {
$('#form1').submit(function (event) {
event.preventDefault();
event.returnValue = false;
var selectValue = $('#selectValue').val();
$.ajax({
url: "/api/Admin/GetDepotDetails/",
type: "POST",
data: { "selectValue": selectValue },
dataType: "json",
success: function (data) {
$("#Grid").html($(data).children());
},
error: function (jqXHR, textStatus, errorThrown) {
debugger;
alert(textStatus, errorThrown, jqXHR);
}
});
});
});
</script>
这是我的局部视图的样子:
@model IEnumerable<SampleApp.DepotDetail>
<table class="table table-condensed" id="Grid">
<tr>
<th>
@Html.displayNameFor(model => model.DepotID)
</th>
<th>
@Html.displayNameFor(model => model.ColumnName)
</th>
<th>
@Html.displayNameFor(model => model.Country)
</th>
<th>
@Html.displayNameFor(model => model.CountryCode)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr class="warning">
<td>
@Html.displayFor(modelItem => item.DepotID)
</td>
<td>
@Html.displayFor(modelItem => item.ColumnName)
</td>
<td>
@Html.displayFor(modelItem => item.Country)
</td>
<td>
@Html.displayFor(modelItem => item.CountryCode)
</td>
</tr>
}
</table>
这就是WebApi方法的样子:
[HttpPost]
public IEnumerable<DepotDetail> GetDepotDetails(Selected selectValue)
{
var model = depotsDetails.Where(x => x.ColumnName == selectValue.SelectValue) as IEnumerable<DepotDetail>;
var viewmodel = new Searchviewmodel{ DepotDetailsList = model, ActionLists = new ActionList()} ;
return model;
}
这就是View的样子:
@model IEnumerable<SiemensSampleApp.DepotDetail>
<div class="row">
<div class="col-md-4">
<form id="form1">
@*@Html.DropDownListFor(model => model.DepotListSelectValue, Model.DepotLists, new { @class = "form-control" })*@
@Html.DropDownList("selectValue", new List<SelectListItem>
{
new SelectListItem() {Text = "Depot ID", Value="Depot ID"},
new SelectListItem() {Text = "Depot Name", Value="Depot Name"},
new SelectListItem() {Text = "Address", Value="Address"}
}, new { @class = "selectValue", @id = "selectValue" })
@*//, new { @class = "chzn-select", @id = "chzn-select" }*@
<input type="submit" value="submit" />
</form>
<br /><br /><br />
<table id="records_table" style="width:100%;"></table>
<div id="tableHere">
@{
if (Model == null)
{
Html.RenderPartial("_SearchResult", new List<DepotDetail>() { });
}
}
</div>
</div>
</div>
问题:通过WebApi,我试图获取详细信息列表并将其绑定到MVC表.做这个的最好方式是什么?
我用过
$(“#Grid”).html($(data).children());
填补网格.但该表没有任何数据.有人可以让我知道如何使用上面的部分视图填充网格.
先感谢您!
解决方法:
您的web api端点返回数据(采用json格式),而不是部分视图中的HTML标记.你有2个选择.
1)创建一个mvc动作方法,该方法获取数据并将其传递给局部视图并返回部分视图响应并使用它来更新UI
[HttpPost]
public IEnumerable<DepotDetail> GetDepotDetails(Selected selectValue)
{
var model = depotsDetails.Where(x => x.ColumnName == selectValue.SelectValue)
as IEnumerable<DepotDetail>;
return PartialView(model);
}
现在确保在〜/ Views / Shared或〜/ View / YourControllerName /中有一个名为GetDepotDetails.cshtml的局部视图.这个视图应该强烈地输入到DepotDetail的集合中.
@model IEnumerable<DepotDetail>
<p>Here loop through each item in Model and render the table</p>
<p> Same as your partial view in the question </p>
在你的成功活动中,
success: function (data) {
$("#Grid").html(data);
},
2)使用当前的web api端点并读取ajax方法成功事件中的数据,并动态构建表行的html标记,并将其设置为Grid表的内容.
success: function (data) {
var tblHtml="";
$.each(data.DepotDetailsList,function(a,b){
tblHtml+= "<tr><td>"+b.DepotID+"</td>";
tblHtml+= "<td>"+b.ColumnName+"</td>";
tblHtml+= "<td>"+b.Country+"</td>";
tblHtml+= "<td>"+b.CountryCode+"</td>M/tr>";
});
$("#Grid > tbody").html(tblHtml);
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。