Почему моя 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. Однако, когда код бритвы выполняется для добавления его в таблицу, таблица не изменяется вообще.

Почему таблица HTML не обновляется, хотя данные извлекаются из базы данных в порядке?

Edit:

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

});