How to update each row of a table dynamically in a Asp.Net Core

Question

I'm developing a web application using Asp.Net Core(Razor Pages),and I have a table with three columns,one representing cellphone numbers,the other one text messages that are supposed to be sent to each one and the last one showing results.I'm looking for a way to update the last column of each row and have it highlighted as each messages is being sent to the cellphone number by clicking the Send To All button down the table.How can I accomplish it? Thanks for your responses in advance.

    <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

I haven't used Razor syntax for a while but this is the idea:

An array of model comes to the view and your model needs to have an ID property.

When you're rendering the html use that ID to identify each row of your model, for example:

<tr id="@item.Id">

and each row can have its own trigger like this for example:

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

a JavaScript function can take that function sendMessage(id) and then you can query that row and update its UI. for example before sending the request you can create an loading element and using JavaScript promise, update that to a success or fail icon.

But if I'm understanding right you want to have a send all button. In that case you can just query third <td> of each row and update its UI:

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

Hope this was helpful.

Answer 2

I think in scenarios like this, we want to have our javascript as unobtrusive as possible by attaching events to actions through javascript rather than through the html attributes.

with that, you would probably want something like the following:

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

if you want to put the function as a proper function or variable then you can easily do that as well to make the code a little easier to read