如何使用 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">

    Email:  <input asp-for="Email" /> <br />

    Password: <input asp-for="Password" /><br />

    <button type="submit">Register</button>

</form>

您的控制器应该接受联系人类作为参数。这将适用于一一添加联系人。

对于多个联系人，使用与联系人列表相同的视图模型。然后在该列表中使用每个在您的视图中，然后为每个联系人属性及其值添加输入。

当您必须添加新联系人时，基本上通过 js 在添加按钮的单击事件上为新联系人生成 html。

按照这个问题，你会走在正确的轨道上： 如何使用 Razor 和 .NET Core 将项目添加到 ViewModel 中的列表中？