Как связать свойство с динамическим списком объектов - PullRequest
Новая
       32

Как связать свойство с динамическим списком объектов

0 голосов
/ 01 апреля 2019

Я использую .net core 2.2 framework и не могу понять, как связать список объектов со страницей бритвы.На странице бритвы у меня есть кнопка, чтобы добавить новую строку в таблицу.Эта кнопка выполняет событие jquery click, которое изменяет html, добавляя новую строку без обновления страницы.Что я хочу сделать с этим, так это то, что когда я добавляю строку, она связывает ее со списком объектов.Затем я могу обработать этот список элементов при публикации формы.

Моя страница Razor Page 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();
    }
}

Cshtml Razor Page выглядит примерно так: 

...
<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из моей привязанной собственности.Пожалуйста, имейте в виду, что в этом примере я только добавляю новые строки, но мне нужно будет также удалить и отредактировать их.

Возможно, я ошибаюсь в этом, так что если кто-то знает, как яможет сделать это, все идеи приветствуются.Также, если есть что-то, что не понято, пожалуйста, дайте мне знать, и я постараюсь уточнить.

1 Ответ

1 голос
/ 02 апреля 2019

Попробуйте следующий пример, который работает

Код 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 код Razor Page 

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