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

第一次将数据集返回到视图时，HTML表将正确填充。
我手动将一行插入数据库。
然后调用javascript函数，再次调用ActionResult Transaction。这被称为罚款，并从数据库罚款检索条目。在调试模式下，我可以看到手动插入的行。
然后将结果再次返回到视图。在视图上处于调试模式时，我可以看到新的数据集，并按预期显示了新行。
但是，当执行剃刀代码将其添加到表中时，表完全没有变化。

尽管可以从数据库中检索数据，但是为什么不更新HTML表呢？

编辑：

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

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

});

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

1 个答案: