使用jquery ajax发布和获取数据，仅在mvc中更新html表行

Question

我有一个HTML表，我希望当用户单击“计数”单元格时，该行的数据在数据库中更新，并且结果也在该行中更新。 我只想更新该行而不是整个页面。 这是我到目前为止的内容：

视图（该视图包含表示一行的局部视图：

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

模型：

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

局部视图（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脚本：

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

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

如何在不刷新整个表的情况下更新单元格中的值？ 任何帮助表示赞赏。

Answer 1

经过一段时间的思考，我已经解决了问题。 我以这个答案为基础。 所以我将事务的json对象从控制器返回给ajax jQuery。 我已经删除了partialview，并将html用作主视图中的一行。 我已经为计数和总div元素的div设置了id。 当我将json对象返回到视图时，我使用element.innerText更新了值。

控制器：

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

希望这对以后的人有所帮助。