Сделайте Jquery Datatable ячейку доступной для редактирования при нажатии на ссылку Href

Question

Я пытаюсь обновить ячейку количества в таблице данных. Что мне нужно, так это то, что при нажатии ссылки «Изменить» ячейка количества становится редактируемой, позволяя пользователю вводить новое значение

View

   @foreach (var item in Модель) {  @ Html .DisplayFor (modelItem => item.Id)  @ Html .DisplayFor (modelItem => item.Quantity) Изменить   @ Html .DisplayFor (modelItem => item.TotalPrice)    }   

Javascript

 $(document).ready(function () {
    var oTable= $('#customerBasket').dataTable({
    "bPaginate": false,
    "bAutoWidth": false,
    });

Answer 1

Вы можете использовать jquery и ajax для его реализации, я сделал демонстрацию на основе ваших кодов:

Просмотр:

<table id="customerBasket" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
    <tr>
        <td>
            @Html.DisplayNameFor(model => model.Id)
        </td>
        <td>
            @Html.DisplayNameFor(model => model.Quantity)
        </td>
        <td>
            @Html.DisplayNameFor(model => model.TotalPrice)
        </td>

        <td>
        </td>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Quantity)
                <a name="edit" href="">Edit</a>
                <a name="save" href="" productid="@item.Id" productquantity="@item.Quantity" hidden>Save</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.TotalPrice)
            </td>

            <td>
                <a asp-controller="Cart" asp-action="DeleteOrder" asp-route-id="@item.Id" class="text-danger m-sm-1"><i class="fa fa-trash-alt fa-lg"></i></a>
            </td>
        </tr>
    }
</tbody>
</table>


@section scripts{
<script>

    $(document).ready(function () {
        $('#customerBasket').dataTable({
            "bPaginate": false,
            "bAutoWidth": false,
        });
    });

    $("[name = edit]").on('click', function () {
        event.preventDefault();
        var quantity = this.parentElement.firstChild.nodeValue;
        this.parentElement.firstChild.remove();
        var child = document.createElement("input");
        child.value = quantity;
        this.parentElement.prepend(child);
        this.parentElement.children[1].setAttribute("hidden", "true");
        this.parentElement.children[2].removeAttribute("hidden");

    })

    $("[name = save]").on('click', function () {
        event.preventDefault();
        $.ajax({
            type: "post",
            url:"/Home/EditQuantity",
            data: {
                id: this.getAttribute("productid"),
                quantity: this.parentElement.children[0].value
            },
            success: function (x) {
                location.reload();
            }
        })
    })
</script>
}

Контроллер:

    public static List<Shop> shops = new List<Shop>
    {
        new Shop{ Id = 1, Quantity = 2, TotalPrice = 10},
        new Shop{ Id = 2, Quantity = 3, TotalPrice = 20},
        new Shop{ Id = 3, Quantity = 4, TotalPrice = 30}
    };

    public IActionResult Index()
    {
        
        return View(shops);
    }

    public void EditQuantity(int id, int quantity)
    {
        var shop = shops.Where(s => s.Id == id).FirstOrDefault();
        shop.Quantity = quantity;
        
    }

Результат:

введите описание изображения здесь