Question

我正在使用ASP.NET Core 2.1，Razor Pages和View组件（尽管如果还需要View组件，我还没有出售）

我有一个父模型Organization，其中包含子模型Contacts的列表：

组织

public Guid Id { get; set; }
public string OrganizationName { get; set; }

public ICollection<Contact> Contacts { get; set; }

联系方式

public Guid Id { get; set; }
public string ContactName { get; set; }
public Guid OrganizationId { get; set; }

我要做的是列出组织中n个联系人的列表，我可以从视图中添加和删除这些联系人，并在我点击OnPost()页面模型方法时反映出来

在我之前的项目中，一个MVC5网络应用程序：

我使用Ajax将部分视图添加到视图：Update a DIV with a Partial View on Button Click (dynamic)
我至少能够获得一个深层列表以返回到控制器：C# MVC, Link Together Nested Partial Views

这两个的组合看起来很像：MVC 5 BeginCollectionItem with Partial CRUD

当前状态

在~/ViewComponents/Contact.cs中，我有：

public class Contact : ViewComponent
{
    private readonly ApplicationDbContext _context;

    public Contact(ApplicationDbContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync(Guid organizationId, Guid contactId)
    {
        var contact = new Models.Contact { Id = contactId, OrganizationId = organizationId };
        return View(contact);
    }
}

哪个调用~/Pages/Shared/Components/Contact/Default.cshtml，uses a ported version of BeginCollectionItem：

@model Models.Contact

@using (Html.BeginCollectionItem("Contacts"))
{
    <div class="row">
        <input asp-for="Id" type="hidden" />
        <input asp-for="OrganizationId" type="hidden"/>
        <input asp-for="ContactName" class="form-control"/>
    </div>
}

然后我将其直接加载到Organiztion的~/Pages/Organizations/Create.cshtml中：

@page
@using System.Linq
@using ViewComponents
@model CreateModel

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

<h2>Create</h2>

<h4>Organization</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div class="form-group">
                <input asp-for="Organization.OrganizationName" class="form-control" />
            </div>
            <div class="form-group">
                <label asp-for="OrganizationContacts" class="col-form-label"></label>
  <!-- HERE --> @await Component.InvokeAsync(nameof(ViewComponents.Contact), new { organizationId = Model.Organization.Id, contactId = Guid.NewGuid() })
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

当我单击Submit（提交）按钮时，它会触及OnPostAsync()中的Create.cshtml.cs方法：

public class CreateModel : PageModel
{
    private readonly ApplicationDbContext _context;

    [BindProperty]
    public Organization Organization { get; set; }

    public CreateModel(ApplicationDbContext context, IMapper mapper)
    {
        _context = context;
    }

    public IActionResult OnGet()
    {
        Organization = new Organization{ Contacts = new List<Contact>() };
        return Page();
    }

    public async Task<IActionResult> OnPostAsync()
    {
        _context.Organizations.Add(Organization); // <--- Always has an empty Contacts list
        await _context.SaveChangesAsync();

        return RedirectToPage("./Index");
    }
}

当我点击OnPostAsync时，绑定的Organization模型的OrganizationName值就很好，但是Contacts列表始终为空。

如何知道我以后要添加或删除n个联系人，如何将联系人添加到组织的Contacts列表中？

我对此类问题所见的大多数答案都有for循环，但它们要求我提前知道组织中有或将有多少联系人，而事实并非如此。我。

Answer 1

要解决空白的Contacts，请尝试将Html.BeginCollectionItem("Contacts")更改为Html.BeginCollectionItem("Organization.Contacts")。

由于Contacts是Organization的集合，因此您需要传递Organization.Contacts[index].Property，否则，它将无法将请求绑定到模型。

在Razor页面中模型绑定视图组件

1 个答案: