Как динамически добавлять в список с помощью ViewModel в ASP. NET Core 3.1 MVC с JavaScript и C#

Question

Я пытаюсь динамически добавить свойство списка в моей ViewModel, используя JavaScript. Всякий раз, когда я отправляю свою форму, в почтовом контроллере нет элементов в списке. Я попытался добавить в список внутри функции JavaScript, используя синтаксис бритвы, например:

@{
    Model.Contacts.Add(new Contact { ID = 1, FirstName = "Tester" })
}

Просто чтобы посмотреть, смогу ли я вообще получить какой-либо элемент в списке. Я также сделал это в верхней части страницы, чтобы увидеть, было ли это только потому, что это было в JavaScript. Однако, когда я отправил форму, произошло то же самое, в списке не было ни одного элемента. Я не знаю, нужно ли мне создавать API для отправки данных, но свойство Company отправляется с данными в нем. Я хотел бы иметь возможность представить оба свойства без необходимости создания API. Я не знаю, есть ли специальный синтаксис или класс бритвы, который я могу использовать для достижения этой цели. Пожалуйста помоги! Спасибо.

Создать страницу компании

ViewModel:

public class CompanyViewModel
    {
        public Company Company { get; set; }
        public List<Contact> Contacts { get; set; }

        public CompanyViewModel()
        {
            this.Contacts = new List<Contact>();
        }
    }

Контроллер:

        public IActionResult Create()
        {
            var vm = new CompanyViewModel();
            return View(vm);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create(CompanyViewModel companyView)
        {
            if (companyView.Company != null)
            {
                _context.Add(companyView.Company);
                if (companyView.Contacts != null)
                    _context.Contacts.AddRange(companyView.Contacts);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(companyView);
        }

Просмотр:

@model CheckbookRegister.Models.CompanyViewModel

@{
    ViewData["Title"] = "Create";
}

<h1>Create Company</h1>
<hr />
<form asp-action="Create">

    <!-- Omitted for brevity -->

    <div class="row justify-content-between">
        <h4 class="col mb-0 align-self-end">Contacts</h4>
        <div class="col-md-auto text-right mt-2">
            <a class="col btn btn-sm btn-outline-success px-4" id="add" href="#" onclick="addContact()">Add</a>
        </div>
    </div>
    <table class="table mt-2" id="contactsTable">
        <thead>
            <tr>
                <th><label asp-for="@Model.Contacts.First().FirstName" class="control-label"></label></th>
                <th><label asp-for="@Model.Contacts.First().LastName" class="control-label"></label></th>
                <th><label asp-for="@Model.Contacts.First().Email" class="control-label"></label></th>
                <th><label asp-for="@Model.Contacts.First().PhoneNumber" class="control-label"></label></th>
                <th><label asp-for="@Model.Contacts.First().WorkPhoneNumber" class="control-label"></label></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary"/>
    </div>
</form>

@section Scripts{ 
    <script type="text/javascript">
        var count = 0;
        function addContact() {
            var table = document.querySelector("tbody");
            table.insertAdjacentHTML("beforeend", "<tr>" +
                "<td>" +
                "<input asp-for='Model.Contacts[" + count + "].FirstName' class='form-control'/>" +
                "<span asp-validation-for='Model.Contacts[" + count + "].FirstName' class='text-danger'></span >" +
                "</td>" +
                "<td>" +
                "<input asp-for='Model.Contacts[" + count + "].LastName' class='form-control'/>" +
                "<span asp-validation-for='Model.Contacts[" + count + "].LastName' class='text-danger'></span >" +
                "</td>" +
                "<td>" +
                "<input asp-for='Model.Contacts[" + count + "].Email' class='form-control'/>" +
                "<span asp-validation-for='Model.Contacts[" + count + "].Email' class='text-danger'></span >" +
                "</td>" +
                "<td>" +
                "<input asp-for='Model.Contacts[" + count + "].PhoneNumber' class='form-control'/>" +
                "<span asp-validation-for='Model.Contacts[" + count + "].PhoneNumber' class='text-danger'></span >" +
                "</td>" +
                "<td>" +
                "<input asp-for='Model.Contacts[" + count + "].WorkPhoneNumber' class='form-control'/>" +
                "<span asp-validation-for='Model.Contacts[" + count + "].WorkPhoneNumber' class='text-danger'></span >" +
                "</td>" +
                "<td>" +
                "<button type='button' class='btn btn-sm btn-outline-danger' onclick='deleteContact(this)'>Delete</button>" +
                "</td>" +
                "</tr>");
            count++;
        }
        function deleteContact(button) {
            button.closest("tr").remove();
        }
    </script>
}

Answer 1

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

<form asp-controller="Demo" asp-action="RegisterInput" method="post">
    Email:  <input asp-for="Email" /> <br />
    Password: <input asp-for="Password" /><br />
    <button type="submit">Register</button>
</form>

Контроллер должен принять класс контакта как пары. Это будет работать для добавления контакта по одному.

Для нескольких контактов используйте ту же модель представления, которая у вас есть в настоящее время, со списком контактов. Затем используйте для каждого в этом списке В вашем представлении, а затем добавьте входные данные для каждого свойства контакта и его значений.

Когда вам нужно добавить новый контакт, в основном генерируйте html для нового контакта при событии нажатия на кнопка добавления через js.

Следуйте этому вопросу, и вы окажетесь на правильном пути: Как добавить элемент в список в ViewModel с помощью Razor и. NET Core?