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

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

1 个答案: