在不知道用户将提供的对象数量的情况下绑定对象列表的输入

Question

我正在尝试将列表项的输入绑定到 List 对象，但似乎唯一可以做到这一点的方法是，如果我用一定数量的那些来初始化我的 List对象，然后将输入的属性绑定到我的 List

中对象的空属性

因此，例如，除非我将一些 PersonInputModel 对象添加到 PersonInput

，否则以下将给出越界异常

索引视图页面

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <form method="post">
        <label for="name">Name</label>
        <input type="text" asp-for="PersonInput[0].Name" />

        <label for="age">Age</label>
        <input type="number" asp-for="PersonInput[0].Age" />
    </form>
</div>

索引页面模型

 public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        
        [BindProperty]
        public IList<PersonInputModel> PersonInput { get; set; } = new List<PersonInputModel>();


        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }

        public void OnGet()
        {

        }
    }

PersonInputModel

public class PersonInputModel
    {
        
        public string Name { get; set; }
        
        public int Age { get; set; }

        public Person ToPerson()
        {
            return new Person
            {
                Name = Name,
                Age = Age
            };
        }
    }

但是如果用户可以添加更多的输入表单来添加一个以上的人呢？如果用户提供的输入多于 PersonInput 列表中的对象数怎么办？如何使我的输入列表动态化？

Answer 1

下面是工作demo，大家可以参考一下

Person.cs

public class Person
    {
        public string Name { get; set; }

        public int Age { get; set; }
    }

PersonInputModel

public class PersonInputModel
    {
        public string Name { get; set; }

        public int Age { get; set; }
        public List<Person> Persons { get; set; }

    }

索引模型

public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;
       
        [BindProperty]
        public PersonInputModel PersonInputModel { get; set; } 
        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }

        public void OnGet()
        {
             
        }
        [HttpPost]
        public void OnPost(PersonInputModel personInputModel)
        {

        }
    }

Index.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

    <form  method="post">
        <label for="name">Name</label>
        <input type="text" asp-for="PersonInputModel.Name" />

        <label for="age">Age</label>
        <input type="number" asp-for="PersonInputModel.Age" /> 
        <button type="button" onclick="myfunction()">Add Person</button>
          
        <table id="myTable" style="display: none;" >
        <tr>
            <th>Name</th>
            <th>age</th>           
        </tr>
        </table>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" >Create</button>
        </div>
     </div>
  </form>

  <script type="text/javascript">
        var mytab = document.getElementById("myTable");
        var i = 0;
        function myfunction() {
            document.getElementById("myTable").style.display = "block";
            document.getElementById("myTable").insertRow(-1).innerHTML =
                '<td>  <input type="text" name="PersonInputModel.Persons[' +i + '].Name" />       </td><td> <input type="number" name="PersonInputModel.Persons[' + i + '].Age" />    </td>';
            i++;
           
        }
  </script>

结果：

在不知道用户将提供的对象数量的情况下绑定对象列表的输入

Binding input of list of objects without knowing the number of objects the user will feed

c#

razor

asp.net-core

索引视图页面

索引页面模型

PersonInputModel