我正在尝试将通过AJAX调用从Controller返回的数据传递给需要视图的视图中的表（带有过滤器）。更准确地说，有3个过滤器：日期和时间，员工和访客。根据您选择的组合，Controller从数据库返回过滤的数据。
加载视图时，它将显示数据库中所有在字段Departure中具有值的访问者。我希望它在应用过滤器后显示经过过滤的访问者。
Archive.cshtml
@model IEnumerable<Visitor_Management.Models.Visitor>
@{
ViewBag.Title = "Archive";
}
<div>
<h2>"Archive"</h2>
<div> </div>
</div>
<form class="form-inline" id="formFilters" runat="server">
<div>
<label style="margin-left:10px;">Date and time:</label>
<input type="text" name="picker" id="picker" class="form-control" size="30" />
<label style="margin-left:10px;">Employee:</label>
<input type="text" id="employee" class="form-control" placeholder="select an employee" />
<label style="margin-left:10px;">Visitor:</label>
<input type="text" id="visitor" placeholder="select a visitor" class="form-control" style="margin-right:20px;" />
<button type="submit" class="btn navbar-btn btn-primary " name="filter" id="filter" value="filter">Filter</button>
</div>
<div> </div>
</form>
<table class="table table-bordered table-condensed table-striped text-center" id="archiveTable">
<tr>
<th class="text-center">
@Html.DisplayNameFor(model => model.ID)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Date)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Arrival)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Departure)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Name)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Surname)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Employee)
</th>
<th class="text-center">
ID Card
</th>
<th class="text-center">
Pass ID
</th>
</tr>
@foreach (var item in Model)
{
var Date = item.Datum.ToShortDateString();
<tr>
<td>
@Html.DisplayFor(modelItem => item.ID)
</td>
<td>
@Html.DisplayFor(modelItem => Date)
</td>
<td>
@Html.DisplayFor(modelItem => item.Arrival)
</td>
<td>
@Html.DisplayFor(modelItem => item.Departure)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Surname)
</td>
<td>
@Html.DisplayFor(modelItem => item.Employee)
</td>
<td>
@Html.DisplayFor(modelItem => item.CardID)
</td>
<td>
@Html.DisplayFor(modelItem => item.PassID)
</td>
</tr>
}
</table>
AJAX通话
<script>
$('#filter').click(function () {
$.ajax({
url: "Filter",
data: {
'datepicker': $('#picker').val().toString(),
'employee': $('#employee').val().toString(),
'visitor' : $('#visitor').val().toString()
},
async: false,
dataType: "json",
contentType: "application/json;charset=utf-8",
type: "POST",
success: function (result) {
alert("Works");
$('#archiveTable').html(result)
},
error: function (result) {
alert("Error")
}
});
});
</script>
VisitorsController.cs
public ActionResult Filter(string datepicker,string employee,string visitor)
{
List<Visitor> filterList = new List<Visitor>();
//filter data to get an filtered list
return View("Archive",filterList);
}
它说它是在AJAX成功部分的警报中“起作用”的，但是我没有在表中得到任何新的（过滤的）数据，就像什么也没有发生一样，并且视图只是重新加载（刷新）了。
如果我返回JSON类型，而ActionResult为JsonResult，则我可以读取数据，并且过滤后的数据是正确的，但仍然无法将其加载到我的数据中桌子。
答案 0 :(得分：1)
尝试在部分视图中取出表（我们称其为_ResultTable并将表放入div中，视图中带有resultTable id）：
@model IEnumerable<Visitor_Management.Models.Visitor>
@{
ViewBag.Title = "Archive";
}
<div>
<h2>"Archive"</h2>
<div> </div>
</div>
<form class="form-inline" id="formFilters" runat="server">
<div>
<label style="margin-left:10px;">Date and time:</label>
<input type="text" name="picker" id="picker" class="form-control" size="30" />
<label style="margin-left:10px;">Employee:</label>
<input type="text" id="employee" class="form-control" placeholder="select an employee" />
<label style="margin-left:10px;">Visitor:</label>
<input type="text" id="visitor" placeholder="select a visitor" class="form-control" style="margin-right:20px;" />
<button type="submit" class="btn navbar-btn btn-primary " name="filter" id="filter" value="filter">Filter</button>
</div>
<div> </div>
</form>
<div id="resultTable">
@Html.Partial("_ResultTable", Model)
</div>
部分视图：
@model IEnumerable<Visitor_Management.Models.Visitor>
<table class="table table-bordered table-condensed table-striped text-center" id="archiveTable">
<tr>
<th class="text-center">
@Html.DisplayNameFor(model => model.ID)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Date)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Arrival)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Departure)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Name)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Surname)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Employee)
</th>
<th class="text-center">
ID Card
</th>
<th class="text-center">
Pass ID
</th>
</tr>
@foreach (var item in Model)
{
var Date = item.Datum.ToShortDateString();
<tr>
<td>
@Html.DisplayFor(modelItem => item.ID)
</td>
<td>
@Html.DisplayFor(modelItem => Date)
</td>
<td>
@Html.DisplayFor(modelItem => item.Arrival)
</td>
<td>
@Html.DisplayFor(modelItem => item.Departure)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Surname)
</td>
<td>
@Html.DisplayFor(modelItem => item.Employee)
</td>
<td>
@Html.DisplayFor(modelItem => item.CardID)
</td>
<td>
@Html.DisplayFor(modelItem => item.PassID)
</td>
</tr>
}
</table>
，然后从您的控制器操作中将其返回：
public ActionResult Filter(string datepicker,string employee,string visitor)
{
List<Visitor> filterList = new List<Visitor>();
//filter data to get an filtered list
return PartialView("_ResultTable",filterList);
}
在您的Ajax帖子中，只需将div的html设置为操作结果即可。并且您需要添加preventDefault来提交按钮，这样它就不会两次提交表单。
<script>
$('#filter').click(function (e) {
e.preventDefault();
$.ajax({
url: "Filter",
data: {
'datepicker': $('#picker').val().toString(),
'employee': $('#employee').val().toString(),
'visitor' : $('#visitor').val().toString()
},
async: false,
dataType: "json",
contentType: "application/json;charset=utf-8",
type: "POST",
success: function (result) {
alert("Works");
$('#resultTable').html(result)
},
error: function (result) {
alert("Error")
}
});
});
</script>