Razorページでビューコンポーネントをバインドするモデル

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()ページモデルメソッドを押したときにそれを反映させることです。

以前のプロジェクトでは、MVC5Webアプリは次のとおりです。

• Ajaxを使用してビューに部分ビューを追加しました：ボタンクリック時に部分ビューでDIVを更新します（動的）
• そして、コントローラーに戻るために少なくとも1つのレベルの深いリストを取得することができました：C＃MVC、ネストされた部分ビューをリンクする

これら2つの組み合わせは次のようになります。MVC5BeginCollectionItemとPartialCRUD

現在の状態

で~/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、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>

[送信]ボタンをクリックすると、次の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は問題ありませんが、リストは常に空です。

Contacts後でn個の連絡先を追加または削除したいのに、組織のリストに連絡先を追加するにはどうすればよいですか？

この種の質問に対する私が見たほとんどの回答にはforループがありますが、組織内の連絡先の数を事前に知る必要があり、それは私には当てはまりません。