Как добавить строки в таблицу и сохранить элементы, привязанные к списку в модели с AJAX?

Question

Я работаю над преобразованием нескольких бумажных форм в цифровой формат и работаю над скретч-приложением, чтобы продемонстрировать некоторые функции, которые я хочу иметь в них. Прямо сейчас я работаю над формой, для которой потребуется несколько таблиц, которые все работают одинаково.

По сути, пользователь может ввести n количество местоположений, пользователей и т. Д. c. в соответствующие таблицы на странице. Вот что у меня есть на данный момент.

Классы моделей

public class TableDemo
{
    public List<Location> Locations { get; set; }
    public List<User> Users { get; set; }

    public TableDemo()
    {
        Locations = new List<Location>();
        Locations.Add(new Location());

        Users = new List<User>();
        Users.Add(new User());
    }
}

public class Location
{
    public string Street { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Zip { get; set; }
}

public class User
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string PhoneNumber { get; set; }
}

Контроллер

public IActionResult Index()
{
    TableDemo model = new TableDemo();
    return View(model);
}

Вид:

@model TableDemo
@{
    ViewData["Title"] = "Table Test";
}

@section Scripts{
    <script type="text/javascript">
            function addLocation() {
                var locTab = $('#locationsTable');
                var html = "<tr>"+
                            "<td><input type='text'/></td>"+
                            "<td><input type='text'/></td>"+
                            "<td><input type='text'/></td>"+
                            "<td><input type='text'/></td>"+
                        "</tr>"
                locTab.append(html);
            };
    </script>
}


<h2>Table Example</h2>

<form>
    <div class="form-group">
        <div class="form-row">
            <table id="locationsTable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>Street</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip</th>
                    </tr>
                </thead>
                <tbody>
                    @for (int i = 0; i < Model.Locations.Count(); i++)
                    {
                        <tr>
                            <td><input type="text" asp-for="@Model.Locations[i].Street" /></td>
                            <td><input type="text" asp-for="@Model.Locations[i].City" /></td>
                            <td><input type="text" asp-for="@Model.Locations[i].State" /></td>
                            <td><input type="text" asp-for="@Model.Locations[i].Zip" /></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        <button type="button" onclick="addLocation()">Add</button>
        <button type="button" onclick="removeLocation()">Remove</button>
    </div>
</form>

Отсюда я мне нужно иметь возможность нажимать кнопку "Добавить" столько раз, сколько я хочу, и добавить в таблицу строку, которая будет привязана к следующему элементу в списке. На странице будут другие поля и таблицы, и вся форма будет проверена на наличие ошибок валидации и отправлена ​​после заполнения всех полей, включая несколько таблиц, подобных приведенной выше, привязанной к разному списку элементов в таблице. После добавления всех строк и ввода значений после отправки всей формы список (в данном случае) местоположений будет содержать столько элементов, сколько ввел пользователь.

Я пробовал следующее:

Добавление метода к классу TableDemo, который создает StringBuilder со строками, включая вспомогательный тег тега для Model.Locations[i].Property, и внутри скрипта у меня было var html = @Model.AddLocation();, но HTML, сгенерированный из этого, был gibberi sh и выдавал ошибки.

Я также пробовал добавить локальный счетчик к скрипту, например,

<script type="text/javascript">
    @{
        var counter = 1;
     }
        function addLocation() {
            var locTab = $('#locationsTable');
            var html = "<tr><td><input type='text' asp-for='@Model.Locations[counter].Street' /></td>"+
                        "<td><input type='text' asp-for='@Model.Locations[counter].City' /></td>"+
                        "<td><input type='text' asp-for='@Model.Locations[counter].State' /></td>"+
                        "<td><input type='text' asp-for='@Model.Locations[counter].Zip' /></td>"+
                    "</tr>"
            locTab.append(html);
            @counter++;
        };
</script>

Но это привело к новой проблеме: в списке модели в настоящее время нет элемент с индексом 1.

Как добиться желаемого результата с помощью. NET Core MVC?

Answer 1

Taghelper (asp -for) не может быть выделен в jquery. Если вы хотите привязать новые данные, вы можете добавить имя лайка name=Locations[" + counter + "].street Это мое мнение:

<div>
    <form method="post">
        <div class="form-group">
            <div class="form-row">
                <table id="locationsTable" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Street</th>
                            <th>City</th>
                            <th>State</th>
                            <th>Zip</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (int i = 0; i < Model.Locations.Count(); i++)
                        {
                            <tr>
                                <td><input type="text" asp-for="@Model.Locations[i].Street" /></td>
                                <td><input type="text" asp-for="@Model.Locations[i].City" /></td>
                                <td><input type="text" asp-for="@Model.Locations[i].State" /></td>
                                <td><input type="text" asp-for="@Model.Locations[i].Zip" /></td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
            <button type="button" onclick="addLocation()">Add</button>
            <button type="button" onclick="removeLocation()">Remove</button>
            <button >submit</button>
        </div>
    </form>
</div>
@section Scripts{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript">


        var counter = @Model.Locations.Count;
        function addLocation() {

            var locTab = $('#locationsTable');
            var html = "<tr><td><input type='text' name=Locations[" + counter + "].street id=Locations_" + counter + "__street /></td>" +
                "<td><input type='text' name=Locations[" + counter + "].city id=Locations_" + counter + "__city /></td>" +
                "<td><input type='text' name=Locations[" + counter + "].state id=Locations_" + counter + "__state /></td>" +
                "<td><input type='text' name=Locations[" + counter + "].zip id=Locations_" + counter + "__zip /></td>" +
                "</tr>";
            locTab.append(html);
            counter++;
        };

    </script>
}

Это мой контроллер:

[HttpPost]
    public IActionResult Index(TableDemo tableDemo)
    {
        TableDemo model = tableDemo;
        return View(model);
    }

Это результат: