post and get data using jquery ajax and update html table row only in mvc

Question

I have a HTML table and I want that when the user clicks on the Count cell, the data for that row is updated in the database and the result is also updated in that row. I only want to update that row and not the whole page. This is what I have so far:

View (the view contains a partial view that represents a row:

<table class="table table-striped table-bordered table-condensed table-hover">
    <tbody>
        @foreach (var item in Model)
        {
            <div class="@item.ProductID">
                @Html.Partial("TableTransactionsTableRow", item)
            </div>
        }

        @if (!string.IsNullOrEmpty(log.Opmerking))
        {
            <tr>
                <td></td>
                <td>@log.Opmerking</td>
                <td></td>
            </tr>
        }
    </tbody>
</table>

Model:

public class Transaction
{
    private int ProductID { get; set; }
    private int Count { get; set; }
    private string Description { get; set; }
    private decimal Total { get; set; }
}

Partial view (TableTransactionRow):

@model Transaction

<tr>
    <td class="text-right" style="width: 20%;">
        <a class="CountClick" href="@Url.Action("UpdateProductCount", "Tables", new { productID = Model.ProductID, count = -1 })">
            <div>
                @Model.Count
            </div>
        </a>
    </td>
    <td>
        <a href="@Url.Action("UpdateProductCount", "Tables", new { productID = Model.ProductID, count = 1 })">
            <div>
                @Model.Description
            </div>
        </a>
    </td>
    <td class="text-right" style="width: 20%;">@Model.Total</td>
</tr>

Ajax script:

$(document).ready(function () {
    $('.CountClick').click(function () {
        var productID = getParameterByName('productID', $(this).attr("href"));        
        var id = "#" + productID;

        $.ajax({
            cache: false,
            url: $(this).attr("href"), // used data from url
            datatype: "text",
            type: "POST",
            success: function (data) {
                $(id).html(data);
            },
            error: function () {
                $(id).html("ERROR");
            }
        });
        return false;
    });
});

The TablesController:

public ActionResult UpdateProductCount(int? productID, int? count)
{
    if (productID.HasValue)
    {
        Transaction t = new Transaction();
        t.Count += count.Value;
        t.Total= t.Count * t.Price;
        //save the transaction to the database and return it to the partial view
        return PartialView("TableTransactionsTableRow", t);
    }
    return RedirectToAction(MVCItems.TableTransactions);
}

How can I update the values in the cells without refreshing the whole table? Any help is appreciated.

Community · Accepted Answer · 2017-05-23 12:15:55Z

After thinking for a while I have solved the problem. I used this answer as base of my solution. So I return a json object of the Transaction from the controller to ajax jQuery. I have removed the partialview and used the html as a row within the main view. I have set id's for div of the count and total div element. When I return the json object to the view I update the values by using element.innerText.

Controller:

public ActionResult UpdateProductCount(int? productID, int? count)
    {
        if (productID.HasValue)
        {

Transaction t = new Transaction();
    t.Count += count.Value;
    t.Total= t.Count * t.Price;

            if (transaction == null)
                return Json(t, JsonRequestBehavior.AllowGet);           

    }

jQuery:

$(document).ready(function () {
$('.CountClick').click(function () {

    var productID = getParameterByName('productID', $(this).attr("href"));        
    var countID = "Count" + productID;
    var totalID = "Total" + productID;

    var countElement = document.getElementById(countID);
    var totalElement = document.getElementById(totalID);
    var rowElement = document.getElementById(productID);

    $.ajax({
        cache: false,
        url: $(this).attr("href"), // used data from url
        datatype: "text",
        type: "POST",
        success: function (response) {

            var count = parseInt(response.Count);

            if (count > 0)
            {
                countElement.innerText = response.Count;
                totalElement.innerText = response.Total;
            }
            else
            {
                rowElement.innerHTML = "";
            }
        },
        error: function () {
            $("#divResult").html("ERROR");
        }
    });

    return false;
});
});

Hope this helps someone else in the future.

Collectives™ on Stack Overflow

post and get data using jquery ajax and update html table row only in mvc

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related