Question

现在，我们有一个使用核心2.2处理剃须刀页面的应用程序。我们想将模型发送到包含集合的剃刀页面。可以编辑该集合，并通过OnPost请求将其发送回控制器。要添加新行，有一个按钮应添加一个空行。现在，我们使用Vue.js来实现此目的，但随后必须将ajax请求发送到单独的webapi，因为数据无法绑定到razor模型。我们希望摆脱单独的webapi，而仅依赖于剃须刀页面。有没有一种方法可以通过按一个按钮来扩展表，新行的内容可以绑定到剃刀模型。最好不要“取消隐藏”某些行。

我们尝试创建上面的必需项，但是找不到扩展表并将其绑定到模型的方法。

下面的代码在frondend中用于渲染所有对象。 “ 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

使用javascript将空白行添加到表格中，该表格可以保留在razor页面模型中

0 个答案: