[英]Why does my MVC Razor populate the HTML table only the first time the view is returned?
I am trying to populate a HTML table from a database. 我正在尝试从数据库填充HTML表。 The data is retrieved from the database fine. 可以从数据库中精确检索数据。
The controller code: 控制器代码:
public ActionResult Transaction(int pageNumber = 1, int resultsPerPage = 10)
{
Logic.ManipulateTransaction.SelectTransactions(Guid.Parse(Session["UserId"].ToString()), Guid.Parse("013E3D0F-E755-495B-8D1E-4A3D1340ACF8"), 0, 9223372036854775807, false, DateTime.Now.Date, DateTime.Now.Date, pageNumber - 1, resultsPerPage);
return View(currentPageTransactions);
}
When this page is visited for the first time, currentPageTransactions
is returned to the view fine. 首次访问此页面时, currentPageTransactions
将返回到视图罚款。 The view recognises this as a model fine and populates the HTML table fine with the below code: 视图将其识别为模型,并使用以下代码填充HTML表:
@{ int rowNumber = 0; }
@foreach (var transaction in Model)
{
<tr>
<td hidden>@transaction.transaction_id</td>
<td hidden>@transaction.category_id.ToString().ToUpper()</td>
<td>@transaction.name</td>
<td>@transaction.type</td>
<td>@transaction.amount</td>
<td>@transaction.description</td>
<td>@transaction.datestamp.ToString("MM/dd/yyyy")</td>
<td hidden>@(rowNumber += 1)</td>
<td width="20%">
<input type="button" class="btn btn-warning" value="Modify" onclick="EditTransactionModal(this)" data-toggle="modal" data-target="#modifyTransactionModal" />
<input type="button" class="btn btn-danger" value="Decimate" onclick="DeleteTransaction(this)" />
</td>
</tr>
}
ActionResult Transaction
again. 然后调用一个javascript函数,以再次调用ActionResult Transaction
。 This gets called fine, and retrieves the entries from the database fine. 这被称为罚款,并从数据库罚款检索条目。 When in debug mode, I can see the row that I inserted manually is present. 在调试模式下,我可以看到手动插入的行。 Why is the HTML table not being updated, although data is being retrieved from the database fine? 尽管可以从数据库中检索数据,但为什么不更新HTML表呢?
Edit: 编辑:
Javascipt/Ajax for calling ActionMehtod
Javascipt / Ajax用于调用ActionMehtod
function GetTransactions() {
var paginationObject =
{
pageNumber: $('#pageNumber').val(),
resultsPerPage: $('#resultPerPage').val()
};
$.ajax({
url: '/Transaction/Transaction',
data: JSON.stringify(paginationObject),
type: "POST",
contentType: "application/json;charset=utf-8",
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
Could it be something to do with POST
? 可能与POST
吗? I have tried changing this to GET
, but then I am not able to pass the properties of paginationObject
to ActionMethod
. 我尝试将其更改为GET
,但是后来我无法将paginationObject
的属性传递给ActionMethod
。
With AJAX, your browser will not navigate away from the current page and will not automatically reload the page. 使用AJAX,您的浏览器将不会离开当前页面,也不会自动重新加载该页面。 This is usually what we want when we use AJAX. 这通常是我们使用AJAX时想要的。 Therefore, you'll need to trap the response from the AJAX POST and update the DOM yourself. 因此,您需要捕获来自AJAX POST的响应并自己更新DOM。
First identify or create a parent element. 首先确定或创建一个父元素。
<div id="parent">
@* The table is what we want re-rendered after the POST, then inserted here *@
<table>
@{ int rowNumber = 0; }
@foreach (var transaction in Model)
{
<tr>
<td hidden>@transaction.transaction_id</td>
...
</tr>
}
</table>
</div>
Then add a success handler and replace the HTML result. 然后添加成功处理程序并替换HTML结果。
$.ajax({
url: '/Transaction/Transaction',
data: JSON.stringify(paginationObject),
type: "POST",
contentType: "application/json;charset=utf-8",
error: function (errormessage) {
alert(errormessage.responseText);
},
success: function(htmlResponse)
{
$("#parent").html(htmlResponse);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.