在 ASP.NET Core MVC App 中添加动态表单字段

Question

在我的应用程序中，我想制作可以具有动态属性列表的模型：

提供者类

using System;
using System.Collections.Generic;

namespace DynamicForms.Models
{
    public class Provider
    {
        public String Name { get; set; }
        public List<Attribute> Attributes { get; set; }

        public Provider()
        {
            Attributes = new List<Attribute>();
        }
    }
}

我的控制器有两种方法。一种用于向当前模型添加更多属性，另一种用于保存 Provider 模型。添加更多属性的方法如下：

    [HttpPost]
    // Add attribute to current provider model
    public IActionResult Index(Provider provider)
    {
        provider.Attributes.Add(new Models.Attribute());
        return View(provider);
    }

我的观点是这样的：

@model Provider
@using (Html.BeginForm())
{
    <div>
        @Html.TextBoxFor(m => m.Name)
        <input type="submit" value="Add attribute" formmethod="post"/>
    </div>
    <div>
        @foreach ( var attribute in Model.Attributes)
        {
        <div>
            @Html.TextBoxFor(a => attribute.Name)
            @Html.TextBoxFor(a => attribute.Value)
        </div>
        }
    </div>
    <div>
        <input type="submit" value="Save form" formaction="Provider/Save" formmethod="post"/>
    </div>
}

当我按下“添加属性”按钮时，添加了属性并出现了一行输入字段。但是，当我再按一次按钮时，什么也没有发生。没有添加其他行。模型属性计数仍然是 1。我一直在网上寻找解决方案，但找不到任何可以解决我问题的方法。如何使表单字段动态添加到模型并在视图中显示？

Answer 1

尝试使用索引而不是 foreach 循环遍历您的列表，例如

@for (var i = 0; i < Model.Attributes.Count; i++)
{
  <div>
    @Html.TextBoxFor(a => Model.Attributes[i].Name)
    @Html.TextBoxFor(a => Model.Attributes[i].Value)
  </div>
}

您希望名称的格式类似于 Attributes[0].Name 等。

Answer 2

您为 Post 编写了一个方法，但您为 get 编写了一个方法。

获取方法

   public IActionResult Index()
    {
        Provider provider = new Provider();
        provider.Attributes.Add(new Models.Attribute());
        return View(provider);
    }

发布方法

   [HttpPost]
    // Add attribute to current provider model
    public IActionResult Index(Provider provider)
    {
        provider.Attributes.Add(new Models.Attribute());
        return View(provider);
    }