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

如果您对列表的处理不多，我认为这对于简单的解决方案是有好处的。只需删除或添加一条记录即可。

具有您拥有多少行的索引
单击按钮时，将预先输入的内容附加到容器中
然后，您可以使用索引删除子项，创建数据索引属性。

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

Ajax请求（获取）

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

在这种情况下，您仍然需要存储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。

在同一剃刀页面上创建新的父母和孩子

1 个答案: