Самый эффективный способ связать данные в таблице в массиве JavaScript?

Question

У меня есть таблица, которая генерируется со стороны сервера частично и отображается с использованием ajax. Из-за этого я теряю привязку.

Так что мой единственный вариант - сопоставить все в массив JavaScript и опубликовать его.

Есть ли способ отобразить все, используя jQuery, без необходимости повторять каждую строкузатем каждый столбец и искать каждый вход один за другим?

Есть ли другие варианты? Возможно, я должен использовать что-то вроде Vue?

Вот мой частичный:

@model Project.Areas.Robotics.Models.ViewModels.DefectRecordViewModel
<form method="post">
    <card>
        <card-header icon="fas fa-thumbs-down" title="Peças NOK">
        </card-header>
        <card-body>



            <div class="form-row">
                <div class="form-group col-md-6">
                    <h4>
                        <span class="">
                            <b><i class=""></i>Registo</b> @Model.ProductionRecordId
                        </span>
                    </h4>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    <label asp-for="References"></label>
                    <select id="references-nok" asp-items="Model.References" class="custom-select custom-select-sm" onchange="selectReferences(this)">
                        <option value="">--</option>
                    </select>
                </div>
            </div>

            <div class="table-responsive">
                <table id="tblDefects" class="table table-sm" style="width:100%;">
                    <thead class="bg-olive">
                        <tr>
                            <th>@Html.DisplayNameFor(model => model.DefectCodes[0].DefectCodeId)</th>
                            <th>@Html.DisplayNameFor(model => model.DefectCodes[0].Quantidade)</th>
                            <th>@Html.DisplayNameFor(model => model.DefectCodes[0].Detalhes)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (int i = 0; i < Model.DefectCodes.Count(); i++)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(model => model.DefectCodes[i].DefectCode)
                                    <input type="hidden" asp-for="DefectCodes[i].DefectCodeId" />
                                    <input type="hidden" class="reference-holder" asp-for="DefectCodes[i].ReferenceId" />
                                    <input type="hidden" asp-for="DefectCodes[i].DefectCodeId" />
                                </td>
                                <td>

                                    <input asp-for="DefectCodes[i].Quantidade" class="form-control form-control-sm" />
                                    <span asp-validation-for="DefectCodes[i].Quantidade" class="text-danger"></span>
                                </td>
                                <td>
                                    <input asp-for="DefectCodes[i].Detalhes" class="form-control form-control-sm" />
                                    <span asp-validation-for="DefectCodes[i].Detalhes" class="text-danger"></span>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>




        </card-body>
        <card-footer>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <button type="button" data-url="@Url.Page("Index","AddDefectCode")" onclick="addDefectRecord(this)" class="btn btn-success btn-sm"><i class="fas fa-plus"></i> Adicionar</button>
                    <button type="button" onclick="hideDetails()" class="btn btn-danger btn-sm"><i class="fas fa-times"></i> Cancelar</button>
                </div>
            </div>
        </card-footer>
    </card>
</form>    

Answer 1

Я использовал ненавязчивый ajax для отправки формы по частям. Модель автоматически связывается на стороне сервера, не нужно ничего делать вручную.