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

Question

Прямо сейчас у нас есть приложение, которое работает со страницами бритвы, используя ядро ​​2.2.Мы хотим отправить модель на бритвенные страницы, содержащие коллекцию.Эта коллекция может быть отредактирована и отправлена ​​обратно в контроллер через запрос OnPost.Для добавления новой строки существует кнопка, которая должна добавить пустую строку.Прямо сейчас мы используем Vue.js для достижения этой цели, но затем мы должны отправить запрос ajax отдельному webapi, потому что данные не могут быть привязаны к модели бритвы.Мы хотим избавиться от отдельных webapi и зависеть исключительно от бритвенных страниц.Есть ли способ расширить таблицу, нажав кнопку, где содержимое новой строки может быть привязано к модели бритвы.Желательно не «скрывать» некоторые строки.

Мы попытались создать требуемое выше, но не нашли способа расширить таблицу и привязать ее к модели.

Код ниже используется в веб-интерфейсеотрендерить все объекты.SomeCollection - это коллекция, в которую я хочу добавить еще одну запись.(Модель имеет только четыре свойства, которые показаны ниже.) Это неработающий код, который я хотел бы получить.

@for (int i = 0; i < Model.SomeObject.SomeCollection.Count; i++)
{
    <tr>
        <td class="has-text-input"><input type="number" class="form-control" placeholder="Werksoort" asp-for="@Model.SomeObject.SomeCollection[i].WorkTypeId" value="@Model.SomeObject.SomeCollection[i].WorkTypeId" /></td>
        <td class="has-text-input"><input type="text" class="form-control" placeholder="Project" asp-for="@Model.SomeObject.SomeCollection[i]..ProjectId" value="@Model.SomeObject.SomeCollection[i].ProjectId" /></td>
        <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" asp-for="@Model.SomeObject.SomeCollection[i].Hours" value="Model.SomeObject.SomeCollection[i].Hours" /></td>
        <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" asp-for="@Model.SomeObject.SomeCollection[i].Overtime" value="Model.SomeObject.SomeCollection[i].Overtime" /></td>
    </tr>
}

До того, как мы использовали Vue.js

<tr v-for="(someCollection, index) in someObject.someCollection">
    <td class="has-text-input"><input type="number" class="form-control" placeholder="Werksoort" v-model="someCollection.workTypeId"/></td>
    <td class="has-text-input"><input type="text" class="form-control" placeholder="Project" v-model="someCollection.projectId"/></td>
    <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" v-model="someCollection.hours" /></td>
    <td class="has-text-input"><input type="number" class="form-control" placeholder="0,00" v-model="someCollection.overtime" /></td>
</tr>

Который может быть расширен с помощью javascript

addSomeObject: function () {
                data.someObject.someCollection.push({
                    workTypeId: undefined,
                    projectId: undefined,
                    hours: undefined,
                    overtime: undefined,
                })
            }

Затем он был сохранен с помощью запроса ajax к отдельному webapi.

Я хотел бы избавиться от отдельной webapi и одиночной работы.со страницами бритвы и некоторым javascript