【发布时间】:2022-01-19 15:47:12
【问题描述】:
我正在开发一个小型 ASP.Net Core MVC 应用程序,但我被困在重新加载表中。在控制器中,我从数据库中读取数据并将其解析到视图中。在这个视图中,数据将通过使用模式和 for-each 循环来显示。到目前为止,一切都很好。在同一页面上,我有许多输入控件来设置时间窗口和 ID 范围。基于此过滤器,我想在按下“应用过滤器”按钮后重新加载表格。
按下按钮后,我调用 JQuery 方法并形成一个对象,以便可以使用 AJAX-Post 将其解析为相应的操作方法。当我调试时,我会点击 Action 方法并且填充的过滤器对象是好的。在这个操作方法中,我调用数据库,它的结果应该被发送回视图。我可以看到调用了数据库并且列表更短/过滤了。
感谢任何帮助。
查看以填充表格:
<!-- CSHTML File -->
@if (Model.Count() > 0)
{
<div class="table">
<table id="mainTable" class="table table-hover">
<thead>
<tr>
@*<th scope="col">ID</th>*@
<th scope="col">ID</th>
<th scope="col">Block/Sample ID</th>
<th scope="col">Timestamp</th>
<th scope="col">Usabele rows in file</th>
<th scope="auto"></th>
</tr>
</thead>
<tbody>
@foreach (var sample in Model)
{
<tr height: 10px>
<td>@sample.Id</td>
<td>@sample.SampleID</td>
<td>@sample.Timestamp</td>
<td>@sample.UsableRows</td>
<td>
<a asp-controller="ShadowTable" asp-action="details" asp-route-ID="@sample.Id"
class="btn btn-outline-primary mx-1 rounded-pill">Details</a>
</td>
</tr>
}
</tbody>
</table>
</div>
}
else
{
<h3>No samples available yet !</h3>
}
jQuery Ajax 代码块:
$(function () {
$("#btnApplyFilter").click(function () {
var FilterObject = {};
FilterObject.BlockIdStart = $("#blockStartId").val();
FilterObject.BlockIdEnd = $("#blockEndId").val();
FilterObject.Start = $("#dtpStartDate").val();
FilterObject.End = $("#dtpEndDate").val();
var url = "@Url.Action("GetFilteredResult", "DataOverview")";
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(FilterObject),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
$("#mainTable").load("/DataOverview/Index");
}
});
});
});
索引操作方法:
public ActionResult Index()
{
List <Sample> sampleList;
try{ // todo: add logging
sampleList = _databaseAccess.GetFilteredList(-1, -1, DateTime.Now.AddDays(-7), DateTime.Now);
}
catch (Exception ex){ // todo: add logging
throw;
}
return View(sampleList);
}
读取过滤数据的动作方法:
[HttpPost]
public IActionResult GetFilteredResult([FromBody]FilterObject filterObject)
{
#region Variables
List<Sample> sampleList;
DateTime startDdate = DateTime.Now;
DateTime endDate = DateTime.Now;
ContentResult contentResult = null;
#endregion
#region Perform some data validation
int blokStartId =string.IsNullOrEmpty( filterObject.BlockIdStart) == true ?-1: Convert.ToInt32( filterObject.BlockIdStart);
int blokEndId = string.IsNullOrEmpty(filterObject.BlockIdEnd) == true ? -1 : Convert.ToInt32(filterObject.BlockIdEnd);
if (string.IsNullOrEmpty(filterObject.Start) ==false)
startDdate = Convert.ToDateTime(filterObject.Start);
if (string.IsNullOrEmpty(filterObject.End)==false )
endDate = Convert.ToDateTime(filterObject.End);
#endregion
try{
var options = new JsonSerializerOptions(JsonSerializerDefaults.Web);
options.Converters.Add(new JsonStringEnumConverter());
sampleList = _databaseAccess.GetFilteredList(blokStartId, blokEndId, startDdate, endDate);
contentResult = new ContentResult
{
StatusCode = (int)HttpStatusCode.OK,
ContentType = "application/json",
Content = JsonSerializer.Serialize(sampleList, options)
};
}
catch (Exception){ //PK : Add some logging
throw;
}
return contentResult;
}
【问题讨论】:
标签: jquery ajax asp.net-core-mvc