在同一个剃须刀页面上创建新的父子节点

Question

我知道这是一个现有的问题，但我还没有看到一个可以回答我在 asp.net core 2.1 mvc 中的场景的问题。另外，我是这个领域的菜鸟，这是我在这里的第一个问题，提前抱歉。问题很简单（我猜）：使用asp-net core 2.1和mvc，我如何为create方法创建一个剃须刀页面，我可以在客户端动态创建父子关系，接收所有数据服务器上的帖子？到目前为止我所拥有的（简单代码）：

父模型：

    public class BusinessCategory
        {
            public BusinessCategory()
            {
                SubBusinessCategories = new List<SubBusinessCategory>();
            }

            [Key]
            public long ID { get; set; }

            public string Code { get; set; }

            [Required]
            public string Name { get; set; }

            public virtual ICollection<SubBusinessCategory> SubBusinessCategories { get; set; }
        }

子模型：

public class SubBusinessCategory
    {
        [Key]
        public long ID { get; set; }

        public string Code { get; set; }

        [Required]
        public string Name { get; set; }

        [Required]
        public long BusinessCategoryID { get; set; }
        [ForeignKey("BusinessCategoryID")]
        public virtual BusinessCategory BusinessCategory { get; set; }
    }

ViewModel（我认为这是错误的......但我试图得到一些东西）：

public class BusinessCategoryViewModel
    {
        public BusinessCategory BusinessCategory { get; set; }
        public List<SubBusinessCategory> SubBusinessCategories { get; set; }
    }

父 GET 在控制器中创建操作：

[BindProperty]
public BusinessCategoryViewModel BusinessCategoryVM { get; set; }

public IActionResult Create()
{
    return View(BusinessCategoryVM);
}

创建视图：

<form method="post" asp-action="Create">
    <div class="p-4 border rounded">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group row">
            <div class="col-2">
                <label asp-for="BusinessCategory.Code" class="control-label"></label>
            </div>
            <div class="col-5">
                <input asp-for="BusinessCategory.Code" class="form-control" />
            </div>
            <span asp-validation-for="BusinessCategory.Code" class="text-danger"></span>
        </div>
        //
        // all other properties...
        //
        <br />
        <h2 class="text-info">CHILDS</h2>
        <input type="button" value="Add" class="btn btn-primary" onclick="addSubBusinessCategory()" />
        <br />
        <br />
        <div id="subBusinessCategories" class="p-4 border rounded">
            // HERE I WOULD LIKE TO ADD THE CHILDS 
        </div>

        <br />
        <br />
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
            <a asp-action="Index" class="btn btn-success">Back to List</a>
        </div>
    </div>
</form>

我知道我遗漏了很多东西...我是否必须为孩子使用部分视图并将它们附加到 ajax 调用和 jquery 或其他东西？请问有没有人可以指导我正确的方式？

Answer 1

我记得在开始时遇到了同样的问题，所以你可以做几件事。有针对这些的解决方案，所以我将只写出一般步骤。

原版 JS

如果您没有对列表做太多事情，我认为这对于一个简单的解决方案很有用。并且只需要删除或添加一条记录。

1. 有多少行的索引
2. 单击按钮时，将预先编写的输入附加到容器中
3. 然后你可以使用索引来移除孩子，创建一个数据索引，属性。

container.appendChild("<input name="SubBusinessCategories[index].Property" />")

Ajax 请求（获取）

与 Vanilla JS 类似，但这次您的模板位于 PartialView.cshtml 中。如果您需要在渲染模板或以某种方式填充模板中的值之前运行一些后端代码，这很好。

1. 在这种情况下，您仍然需要存储 index 并在渲染之前将其传递到后端。

fetch(UrlToGetPartial).then(res => {container.appendChild(res)})

注意：如果您要开始删除记录，则需要修改每条记录中的索引。说如果你有 5 在一个列表中，索引 0 到 4。如果你删除 1，你最终会得到 0、2、3、4。所以当你提交这个时，你只会在索引 0 处收到 1 条记录。

JS 框架 (Vue)

可能是最容易启动和运行的一种，只需将库文件添加到您的项目中即可。这非常强大，并且使您的代码比其他解决方案更干净。

你的 Javascript

var app = new Vue({
    el: '#subBusinessCategories',
    data: {
        rows: []
    },
    methods: {
         addRow(){
             this.rows.push(this.rows.length)
         },
         removeRow(index){
             this.rows.splice(index, 1)
         },
         createName(index, property) {
              return 'SubBusinessCategories[' + index + '].' + property;
         }
    }
})

在您的 HTML 中

<div id="subBusinessCategories" class="p-4 border rounded">
     <button v-on:click="addRow()">Add</button>
     <div v-for="(el, index) in rows">
           <input v-bind:name="createName(index, 'Code')" />
           <button v-on:click="removeRow(index)">Add</button>
     </div>
</div>

PS：这些都没有经过测试。 Vue 解决方案并不理想，但适合初学者，并且仍然允许您利用 Razor。