如何使用 JavaScript 和 C# 在 ASP.NET Core 3.1 MVC 中使用

Question

我正在尝试使用 JavaScript 动态添加到我的 ViewModel 中的列表属性。每当我提交表单时，post 控制器的列表中都没有项目。我尝试使用 razor 语法将其添加到 JavaScript 函数中的列表，如下所示：

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

只是想看看我是否能在列表中找到一个项目。我还在页面顶部做了它，看看它是否只是因为它是在 JavaScript 中的。但是，当我提交表单时，同样的事情发生了，列表中没有项目。我不知道是否需要创建 API 才能提交数据，但 Company 属性会在其中提交数据。我希望能够提交这两个属性而无需创建 API。我不知道是否有一种特殊的剃刀语法或类可以用来实现这一点。请帮忙！谢谢你。

视图模型：

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>

Answer 1

因此，要一一添加联系人，您的视图模型应该是联系人，并且您的表单应该如下所示，除了使用您的联系人类属性而不是电子邮件密码。<form asp-controller="Demo" asp-action="RegisterInput" method="post">&nbsp; &nbsp; Email:&nbsp; <input asp-for="Email" /> <br />&nbsp; &nbsp; Password: <input asp-for="Password" /><br />&nbsp; &nbsp; <button type="submit">Register</button></form>您的控制器应该接受联系人类作为参数。这将适用于一一添加联系人。对于多个联系人，使用与联系人列表相同的视图模型。然后在该列表中使用每个在您的视图中，然后为每个联系人属性及其值添加输入。当您必须添加新联系人时，基本上通过 js 在添加按钮的单击事件上为新联系人生成 html。按照这个问题，你会走在正确的轨道上： 如何使用 Razor 和 .NET Core 将项目添加到 ViewModel 中的列表中？