Как динамически обновлять каждую строку таблицы в Asp.Net Core

Я разрабатываю веб-приложение с использованием Asp.Net Core (Razor Pages), и у меня есть таблица с тремя столбцами, один из которых представляет номера мобильных телефонов, другой - текстовые сообщения, которые должны быть отправлены каждому, а последний показывает Я ищу способ обновить последний столбец каждой строки и выделить его, когда каждое сообщение отправляется на номер мобильного телефона, нажав кнопку «Отправить всем» внизу таблицы. Как это сделать? Заранее благодарим за ответы.

    <div class="row mt-2">
        <table class="table table-striped table-responsive-md">
            <thead class="thead-dark">
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.MessageList[0].ReceiverCellPhone)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.MessageList[0].Text)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.MessageList[0].Result)
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.MessageList)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReceiverCellPhone)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Text)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Result)
                        </td>
                        <td></td>
                    </tr>
                }
            </tbody>
        </table>
    <button type=submit value=Send to All/>
    </div>

c# asp.net-core razor-pages
person Meisam Dehghan    schedule 11.04.2019    source источник
comment
Если вы хотите обновить пользовательский интерфейс без перезагрузки, вам необходимо использовать JavaScript.   -  person Sasan    schedule 11.04.2019
comment
@Sasan Я знаю, что должен использовать Ajax, но не знаю, как вызвать вызов Ajax для каждой строки при нажатии кнопки «Отправить».   -  person Meisam Dehghan    schedule 11.04.2019

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, что в подобных сценариях мы хотим, чтобы наш javascript был как можно более ненавязчивым, присоединяя события к действиям через javascript, а не через атрибуты html.

при этом вам, вероятно, понадобится что-то вроде следующего:

document.getElementById('ButtonId').addEventListener('click', function() {
    // you are now in the button click context

    // you can now either fire one asyncronous request which encapsulates all the 
       rows or you can iterate through the table rows and fire individual requests. The below shows the second example

    var table = document.getElementById('TableId');
    var url = "url to endpoint you want to call';

    for (var i = 1; i < table.rows.length; i++) { // 1 so we miss the header
         // get the relevant id of the request you want to send
         var id = "whatever cell you need";
         let request = new XMLHttpRequest();
         request.onreadystatechange = function () {
             if (this.readyState === 4) {
                 //success so you can change the cell you want to change
             } else {
                 document.body.className = 'error';
             }
         }
         request.open("post", url, true);
         request.send('this should be whatever you want to send to the request - id object maybe");
     }
 });

если вы хотите поместить функцию как правильную функцию или переменную, вы можете легко сделать это, чтобы код было немного легче читать.

person Gareth Balfour    schedule 12.04.2019

arrow_upward
0
arrow_downward

Я какое-то время не использовал синтаксис Razor, но идея заключается в следующем:

В представление поступает массив модели, и ваша модель должна иметь свойство ID.

При рендеринге html используйте этот идентификатор для идентификации каждой строки вашей модели, например:

<tr id="@item.Id">

и каждая строка может иметь свой собственный триггер, например:

<button onClick="sendMessage(@item.Id)">

функция JavaScript может принять это function sendMessage(id), а затем вы можете запросить эту строку и обновить ее пользовательский интерфейс. например, перед отправкой запроса вы можете создать элемент загрузки и, используя обещание JavaScript, обновить его до значка успеха или неудачи.

Но если я правильно понимаю, вам нужна кнопка «Отправить все». В этом случае вы можете просто запросить третью <td> каждой строки и обновить ее пользовательский интерфейс:

document.querySelectorAll('td:nth-child(3)').forEach(e => {
  //update UI
})

Надеюсь, это было полезно.

person Sasan    schedule 11.04.2019