如何在Asp.Net Core中动态更新表的每一行

Question

我正在使用Asp.Net Core（Razor Pages）开发一个Web应用程序，我有一个包含三列的表，一个代表手机号码，另一个应该发送到每个列的文本消息，最后一个显示结果。我正在寻找一种方法来更新每一行的最后一列，并通过点击桌面上的Send To All按钮将每条消息发送到手机号码时突出显示。我怎样才能完成它？感谢您的回复。

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

Answer 1

我认为在这样的场景中，我们希望通过javascript而不是通过html属性将事件附加到动作，使我们的javascript尽可能不引人注目。

有了这个，你可能想要以下内容：

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

如果你想把这个函数作为一个合适的函数或变量，你也可以轻松地做到这一点，使代码更容易阅读

Answer 2

我有一段时间没有使用Razor语法，但这是个主意：

一组模型进入视图，您的模型需要具有ID属性。

当您渲染html时，使用该ID来标识模型的每一行，例如：

<tr id="@item.Id">

并且每行可以有这样的触发器，例如：

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

JavaScript函数可以使用function sendMessage(id)，然后您可以查询该行并更新其UI。例如，在发送请求之前，您可以创建一个加载元素并使用JavaScript承诺，将其更新为成功或失败图标。

但如果我理解正确，你想要一个发送全部按钮。在这种情况下，您可以只查询每行的第三个<td>并更新其UI：

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

希望这有用。