如何将属性绑定到动态对象列表 [英] How to bind a property to a dynamic list of objects

问题描述

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

I am using the .net core 2.2 framework and am having trouble finding out how I can bind a list of objects to a razor page. On the razor page I have a button to add a new row to a table. This button executes a jquery click event that alters the html to add a new row without refreshing the page. What I am looking to do with this, is that when I add a row it binds it to the list of objects. I can then process this list of items when I post the form.

我的剃刀页面" cs看起来像这样:

My Razor Page cs looks something like this:

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看起来像这样:

The Razor Page cshtml looks something like this:

...
<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代码:

and finally here is my jquery code:

$("#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中的值.请记住，在此示例中，我仅添加新行，但也需要删除和编辑它们.

Finally, when I post the form that contains this code, I want to be able to access the values input into the dynamically created html from my binded property. Please keep in mind in this example I am only adding new rows but I will need to remove and edit them as well.

我可能会做错所有的事情，因此，如果有人对如何实现此目标有任何想法，那么欢迎所有想法.另外，如果有任何无法理解的内容，请告诉我，我会尽力澄清.

推荐答案

尝试以下有效的示例

Razor Page CS代码

Razor Page cs code

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代码

Razor Page cshtml code

@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代码如下

jquery code like below

<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>

这篇关于如何将属性绑定到动态对象列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！