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

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

0 голосов
/ 11 апреля 2019

Я занимаюсь разработкой веб-приложения с использованием 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>

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

Я думаю, что в подобных сценариях мы хотим, чтобы наш 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");
     }
 });

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

0 голосов
/ 11 апреля 2019

Я некоторое время не использовал синтаксис 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
})

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

...