Question

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

我的剃刀页面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 Page 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 Page 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; }
    }
}

剃刀页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>

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

1 个答案: