Как перезагрузить представление после AJAX POST - PullRequest
Новая
       12

Как перезагрузить представление после AJAX POST

0 голосов
/ 18 марта 2019

Будучи новичком в AJAX, я столкнулся с этой проблемой и не смог решить ее. Я хочу, чтобы моя таблица обновлялась после публикации сообщения ajax для проверки объекта, все, что я пробовал, было бесполезно.

Предположим, что ответ ajax является результатом JSON, чтобы не публиковать мой код OnPost(). Я отправляю Id продукта, используя ajax, а затем использую этот Id для удаления продукта.

Затем я вызываю тот же метод, который OnGet() использует для заполнения таблиц, которые возвращают обновленный список. Я вижу, что в инструментах отладки Chrome ответ успешно возвращается с обновленным списком. Я просто не знаю, как донести это до моего списка. Заранее спасибо, ребята. 

    @Html.AntiForgeryToken()
<table id="shoppingBag" class="table">
    <thead>
        <tr>
            <th scope="col">Item</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.ShoppingBagItems)
        {
            <tr>
                <td>
                    @item.Product.Name
                </td>
                <td>
                    @item.Price.ToString("C")
                </td>
                <td>
                    <input value="@item.Quantity" size="1" maxlength="1" class="text-center" />
                </td>
                <td>
                        <button onclick="remove(@item.Product.Id.ToString())" class="close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                </td>
            </tr>
        }
    </tbody>
</table>

<script>
    function remove(id) {
        $.ajax({
            type: 'POST',
            url: 'ShoppingBag?handler=Delete',
            headers: {
                "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: ''+id+'',
            sucess: function (response) {
                append_json(response);
            }
        });
    }

    function append_json(data){
        var table = document.getElementById('shoppingBag');
        data.forEach(function(object) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' +
                object.product.name +
                '</td>' +
                '<td>' +
                object.price +
                '</td>' +
                '<td>' +
                object.quantity +
                '</td>';
            table.appendChild(tr);
        });
    }
</script>

Ответы [ 3 ]

2 голосов
/ 18 марта 2019

В методе успеха Ajax после этого append_json(response); добавьте приведенный ниже код для обновления таблицы 

$("#shoppingBag").load(window.location + " #shoppingBag");
0 голосов
/ 18 марта 2019

вы добавляете свои данные к основному <table>, если вы просматриваете свою таблицу, вы можете увидеть добавленный html.но вам нужно добавить данные в теле таблицы , для этого вы можете использовать $("#shoppingBag tbody").append(tr);

или вы можете добавить id к <body> как <tbody id="myTestTableBody"> и использовать это в своем JavaScript 

function append_json(data){
        var table = document.getElementById('myTestTableBody');
        data.forEach(function(object) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' +
                object.product.name +
                '</td>' +
                '<td>' +
                object.price +
                '</td>' +
                '<td>' +
                object.quantity +
                '</td>';
            table.appendChild(tr);
        });
    }

Я добавил пример кода, который, как вы можетедобавить данные в существующую таблицу 

var page=1;
function AddData() {

       $.ajax({
    url: "https://reqres.in/api/users?page="+page,
    type: "GET",
    
    success: function(response){
        append_json(response.data);
    }
});
page++;
}

    function append_json(data){
        data.forEach(function(object) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' +
                object.first_name +
                '</td>' +
                '<td>' +
                object.last_name +
                '</td>' +
                '<td>' +
                '<img src ='+object.avatar +' width="50px" height="50px" />'+
                '</td>';
            $("#shoppingBag tbody").append(tr);
        });
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Add Data" onclick="AddData()">
<table id="shoppingBag" class="table">
    <thead>
        <tr>
            <th scope="col">Item</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
        </tr>
    </thead>
    <tbody>
       
    </tbody>
</table>
0 голосов
/ 18 марта 2019

изменить: 

var table = document.getElementById('shoppingBag');

на: 

var table = $('#shoppingBag tbody');

И

изменить: 

table.appendChild(tr);

на: 

table.append(tr);
...