如何动态添加和删除表行并将它们添加/更新到数据库？

Question

我正在开发一个包含 Asp.net Core、Entity Framework 和 Razor 页面的项目。我希望能够单击添加按钮并显示更多我可以填充和更新/添加到数据库的表行。

此时有一个表格行，如果我保存它，它将添加或更新到数据库。我想不通的是如何动态添加更多表行并将它们添加/更新到数据库中。

我们通过 API 调用和 vue.js 找到了解决方法，但这似乎不需要，应该有更简单的方法对吗？

下面的例子不起作用...

<tbody>
                                @for (int i = 0; i < Model.BookingModel.HourRows.Count; i++)
                                {
                                <tr>
                                    <td><a class="btn-remove-time-row" v-on:click="removeHourRow(index)"><i class="fas fa-times"></i></a></td>
                                    <td class="has-text-input" style="display:none;"><input type="number" class="form-control" placeholder="Werksoort" asp-for="@Model.BookingModel.HourRows[i].Id" value="@Model.BookingModel.HourRows[i].Id" readonly style="display:none;"/></td>
                                    <td class="has-text-input"><input type="number" class="form-control" placeholder="Werksoort" asp-for="@Model.BookingModel.HourRows[i].WorkTypeId" value="@Model.BookingModel.HourRows[i].WorkTypeId" /></td>
                                    <td class="has-text-input"><input type="text" class="form-control" placeholder="Project" asp-for="@Model.BookingModel.HourRows[i].ProjectId" value="@Model.BookingModel.HourRows[i].ProjectId" /></td>
                                    <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" asp-for="@Model.BookingModel.HourRows[i].Monday" value="@Model.BookingModel.HourRows[i].Monday" /></td>
                                    <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" asp-for="@Model.BookingModel.HourRows[i].Tuesday" value="@Model.BookingModel.HourRows[i].Tuesday" /></td>
                                    <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" asp-for="@Model.BookingModel.HourRows[i].Wednesday" value="@Model.BookingModel.HourRows[i].Wednesday" /></td>
                                    <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" asp-for="@Model.BookingModel.HourRows[i].Thursday" value="@Model.BookingModel.HourRows[i].Thursday" /></td>
                                    <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" asp-for="@Model.BookingModel.HourRows[i].Friday" value="@Model.BookingModel.HourRows[i].Friday" /></td>
                                    <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" asp-for="@Model.BookingModel.HourRows[i].Saturday" value="@Model.BookingModel.HourRows[i].Saturday" /></td>
                                    <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" asp-for="@Model.BookingModel.HourRows[i].Sunday" value="@Model.BookingModel.HourRows[i].Sunday" /></td>
                                </tr>
                                }


                                <tr class="times-row-control">
                                    <td colspan="11">
                                        <button class="btn btn-primary btn-add-time-row" id="addBtn" v-on:click="addHourRow()"><i class="fas fa-plus"></i>Regel toevoegen</button>
                                    </td>
                                </tr>
                            </tbody>

addHourRow: function () {
                data.booking.hourRows.push({
                    workTypeId: undefined,
                    projectId: undefined,
                    monday: undefined,
                    tuesday: undefined,
                    wednesday: undefined,
                    thursday: undefined,
                    friday: undefined,
                    saturday: undefined,
                    sunday: undefined
                })
            }

我希望有一个按钮可以在表格中添加一个表格，如果我填写了所有内容，我希望它会被添加或更新到数据库中。

Answer 1

正如您所观察到的，函数addHourRow 在浏览器的页面状态中将数据添加到数据结构（我看不出是什么类型），但没有做任何事情来更改数据源，在您的数据库中.

要更新数据库，您需要将请求处理程序添加到 controller，并从您的 javascript 代码中调用控制器。

这个实体框架的视频教程可能有用：https://www.youtube.com/watch?v=ZX7_12fwQLU