Why does my MVC Razor populate the HTML table only the first time the view is returned?

Question

I am trying to populate a HTML table from a database. 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. The view recognises this as a model fine and populates the HTML table fine with the below code:

@{ 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. When the dataset is returned to the view for the first time, the HTML table populates correctly.
2. I manually insert a row into the database.
3. A javascript function is then called, toinvoke ActionResult Transaction again. 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.
4. The results are then returned to the view for a second time. When in debug mode on the view, I can see the new dataset, with new row as expected.
5. However, when the razor code is executed to add it to the table, the table does not change at all.

Why is the HTML table not being updated, although data is being retrieved from the database fine?

Edit:

Javascipt/Ajax for calling 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? I have tried changing this to GET, but then I am not able to pass the properties of paginationObject to ActionMethod.

Answer 1

With AJAX, your browser will not navigate away from the current page and will not automatically reload the page. This is usually what we want when we use AJAX. Therefore, you'll need to trap the response from the AJAX POST and update the DOM yourself.

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.

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

});