如何将属性绑定到对象的动态列表

Question

我正在使用 .net core 2.2 框架，但无法找出如何将对象列表绑定到剃须刀页面。在剃须刀页面上，我有一个按钮可以向表格添加新行。此按钮执行一个 jquery 单击事件，该事件更改 html 以添加新行而不刷新页面。我想要做的是，当我添加一行时，它将它绑定到对象列表。然后，我可以在发布表单时处理此项目列表。

我的 Razor 页面 cs 看起来像这样：

public class CreateModel : PageModel
{
    #region Variables

    private readonly MyContext _myContext;

    #endregion

    #region Properties

    [BindProperty]
    public List<MyRows> rows { get; set; }

    #endregion

    public CreateModel(MyContext myContext)
    {
        _myContext = myContext;            
    }

    public async Task<IActionResult> OnGetAsync()
    {
        return Page();
    }

    public async Task<IActionResult> OnPostAsync()
    {
        return Page();
    }
}

Razor 页面 cshtml 看起来像这样：

...
<table id="myRows" class="table">
    @foreach (var row in Model.Rows)
    {
        <tr class="myrow">
            <td class="section table-column-center" rowspan="2">
                <input asp-for="@row.Name" class="form-control" />
                <span asp-validation-for="@row.Name" class="text-danger"></span>
            </td>
        </tr>
    }
</table>

<div class="item-add">
    <a id="add-row" class="link-button"><img class="add-item" src="@Url.Content("~/images/ic_add.png")" />Add Row</a>
</div>

最后是我的 jquery 代码：

$("#add-row").click(function () {
    // var nextId = $(".myrow").length;


    var rowHtml = '<tr class="myrow">' +
        '<td class="section table-column-center" rowspan="2">' +

        '<input class="form-control" type="text" id="row_Name" name="row.Name" value="">' +
        '<span class="text-danger field-validation-valid" data-valmsg-for="row.Name" data-valmsg-replace="true"></span>' +
        '</td>' +
        '</tr>';

    $("#myRows").append(rowHtml);
});

最后，当我发布包含此代码的表单时，我希望能够从我的绑定属性访问输入到动态创建的 html 中的值。请记住，在此示例中，我只是添加新行，但我还需要删除和编辑它们。

我可能会搞错这一切，所以如果有人知道我如何完成这一切，欢迎提出所有想法。另外，如果有什么不明白的，请告诉我，我会尽力澄清。

Answer 1

尝试以下有效的示例

Razor 页面 cs 代码

public class CreateModel : PageModel
{

    [BindProperty]
    public List<MyRows> rows { get; set; }

    public void OnGet()
    {
        rows = new List<MyRows>()
        {
            new MyRows{ Name="name1"},
            new MyRows{ Name="name2"}
        };
    }

    public async Task OnPostAsync()
    {
        var list = rows;
    }

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

Razor 页面 cshtml 代码

@page
@model RazorPages2_2Project.Pages.Tests.CreateModel
@{
ViewData["Title"] = "Create";
}

<h1>Create</h1>

<form method="post">
<table id="myRows" class="table">
    @for (var i=0;i<Model.rows.Count();i++)
    {
        <tr class="myrow">
            <td class="section table-column-center" rowspan="2">
                <input asp-for="rows[i].Name" class="form-control" />
                <span asp-validation-for="rows[i].Name" class="text-danger"></span>
            </td>
        </tr>
    }
</table>
  <div class="item-add">
    <a id="add-row" class="link-button">Add Row</a>
  </div>

  <div class="form-group">
    <input type="submit" value="Save" class="btn btn-default" />
  </div>
</form>

jquery 代码如下

<script>
        $("#add-row").click(function () {
            var nextId = $(".myrow").length;
      //Or  var nextId = @Model.rows.Count();

            var rowHtml = '<tr class="myrow">' +

                '<td class="section table-column-center" rowspan="2">' +
                '<input class="form-control" type="text" id="rows_' + nextId + '_Name" name="rows[' + nextId + '].Name" value="">' +

                '<span class="text-danger field-validation-valid" data-valmsg-for="rows[' + nextId + '].Name" data-valmsg-replace="true"></span>' +

                '</td>' +

                '</tr>';

            $("#myRows").append(rowHtml);
        });
</script>