如何在动态列表组中将某些复选框标记为已选中？ .NETCore / Bootstrap / Razor 页面

Question

I am building a tool to add contacts to distribution lists and one contact can be in multiple distribution lists. I am using a List Group with checkboxes for users to display and select the distribution lists. On the edit contact page I need to check the checkboxes in the list group of the distribution lists that the contact is already a member of. I simply cannot work out how to do this. I am using asp.net core with page models (no controllers) and razor pages

This on my cshtml page:

<label for="DistributionListSelectIDLG" id="SeletDistributionListLabel" class="control-label">Select a Distribution List</label>
<div class="overflow-auto" style="max-height:500px">
    <ul class="list-group" id="DistributionListSelectIDLG" role="group" aria-labelledby="SeletDistributionListLabel">
        @foreach (var item in Model.CreateContactViewModel.DistributionLists)
        {
            <li class="list-group-item"><input type="checkbox" name="DistributionListSelectID" id="@item.DistributionListId" value="@item.DistributionListId" aria-label="@item.ListName" /> @item.ListName</li>
        }
    </ul>
</div>

This is on my code behind page

Contact = await _context.Contacts.FirstOrDefaultAsync(m => m.ContactId == id);

if (Contact == null)
{
    return NotFound();
}

CreateContactViewModel = new ContactViewModel()
            {
                DistributionLists = _distService.GetAllLists().Where(d => d.IsDeleted == false).OrderBy(d => d.ListName).ToList(),
                ListsAndContacts = _linkService.GetListsForContact((int)id).ToList()
            };

foreach (var dlitem in CreateContactViewModel.ListsAndContacts)
{
    // Do something here to populate the checkboxes
}

return Page();

There are two interfaces, one to get the full list of DLs, and one to get a list of DLs that contact belongs to.

Thanks

Answer 1

On the edit contact page I need to check the checkboxes in the list group of the distribution lists that the contact is already a member of.

Do you mean check if the name in one distribution list and in a List Group too?

Try to make an if judgment for the checkbox. If the name(contact) is already a member of the distribution list, input checkbox will be checked="checked".

Demo: The ContactViewModels has 8 items:AA,BB,CC,DD,EE,FF,GG,HH; The Contacts has 5 items:AA,BB,CC.DD,EE.

Code:

<label for="DistributionListSelectIDLG" id="SeletDistributionListLabel" class="control-label">Select a Distribution List</label>
<div class="overflow-auto" style="max-height:500px">
    <ul class="list-group" id="DistributionListSelectIDLG" role="group" aria-labelledby="SeletDistributionListLabel">
        @foreach (var item in Model.ContactViewModels)
        {
            <li class="list-group-item">
               @*@if (Model.Contacts.Where(c => c.Name == item.Name).Count() != 0)*@//First method
                @if (Model.Contacts.Any(c => c.Name == item.Name))      //Second method
                {
                  <input type="checkbox" checked="checked" name="DistributionListSelectID" id="@item.Id" value="@item.Id" aria-label="@item.Name" />
                }
                else
                {
                    <input type="checkbox" />
                }

                @item.Name

            </li>
        }
        </ul>
</div>

Result: