为什么我的 MVC Razor 仅在第一次返回视图时填充 HTML 表？

Question

我正在尝试从数据库中填充 HTML 表。从数据库中检索数据很好。

控制器代码：

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);
}

第一次访问此页面时，currentPageTransactions 会正常返回视图。视图将其识别为模型，并使用以下代码很好地填充 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>
                }

1. 当数据集第一次返回视图时，HTML 表会正确填充。
2. 我手动将一行插入到数据库中。
3. 然后调用一个javascript函数，再次调用ActionResult Transaction。这被称为罚款，并从数据库中检索条目。在调试模式下，我可以看到我手动插入的行。
4. 然后第二次将结果返回到视图中。在视图上处于调试模式时，我可以看到新数据集，其中包含预期的新行。
5. 但是，当执行 Razor 代码将其添加到表中时，表根本没有改变。

为什么从数据库中检索数据正常，但 HTML 表没有更新？

编辑：

用于调用ActionMehtod的Javascipt/Ajax

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);
                    }
                });
            }

会不会和POST有关？我已经尝试将其更改为GET，但是我无法将paginationObject 的属性传递给ActionMethod。

Answer 1

使用 AJAX，您的浏览器不会离开当前页面，也不会自动重新加载页面。这通常是我们使用 AJAX 时想要的。因此，您需要捕获来自 AJAX POST 的响应并自己更新 DOM。

首先确定或创建一个父元素。

<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>

然后添加成功处理程序并替换 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);    
    }

});