How to import data from checkbox (html) to database ASP.NET Core MVC

Question

I have a list of guests which is stored in my database. After a party is created, I want the user to be able to invite guests to the party.

To do that, I have two tables with a one-to-many relationship. In the first table (guests), I have the guests' information, and in the second table (PartyGuests), there are two other columns for referencing other stuff.

After the user creates a party, a list of guests will appear in which the user can select whoever he wants to invite by selecting checkboxes. Clicking on the Submit button passes all selected guests id to the controller.

Here is my View.

            <table class="table">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">First</th>
                        <th scope="col">Last</th>
                        <th scope="col">Operation</th>
                    </tr>
                </thead>

                <tbody>

                    @foreach (var item in ViewBag.Guests)
                    {
                        <tr>
                            <td>@item.FirstName</td>
                            <td>@item.LastName</td>
                            
                            <td><input type="checkbox" name="guests" value="@item.Id"></td>
                        </tr>
                    }


                </tbody>

            </table>
            <input type="hidden" value="@Model.Id" name="eventId"/>
            <button type="submit" class="btn btn-primary">Invite</button>
        </form>

Here is my controller:

[HttpGet]
        public IActionResult Invite(int id)
        {
            ViewBag.Guests= _guestService.GetGuests(); //Display list of guests for invitation
            ViewBag.Id = id;

            return View(_eventService.GetEvent(id));    // Return event to get the event information o the Invite page
        }

        [HttpPost]
        public IActionResult Invite(int eventId, string[] guests)
        {
            foreach (var item in guests)
            {
                var newGuest = new EventGuest
                {
                    EventId = eventId,
                    GuestId = int.Parse(item)
                };

                // LINQ -- To avoid invite a guest more than once
                if (_eventService.IsInvited(newGuest.GuestId, eventId))  // Does not invite
                {
                    return RedirectToAction("Error", "Something");  // Give an error message
                }
                else
                {
                    _eventService.InviteGuest(newGuest);
                    _eventService.SaveChanges();
                }
            }
            return View("Index", "Home");
        }

Now, the problem is that I want the invited guest checkboxes to be checked when they already invited. In another word, if the party manager wants to add more, he can be able to recognize the invited guests by looking at the checked checkboxes.

I should note that my database get valid data in its columns through this operation

I am not familiar with JavaScript, so please help me with HTML.

Thank you

Answer 1

The first thing to note is that you have a string array for guests in the action but I suspect this should be an array integers. You could also have a generic list of integers which should also work.

The following worked for me - note that if no checkboxes are checked then the list of ID's is empty

<form method="post" asp-area="YourArea" asp-controller="YourController" asp-action="Test">
    <button type="submit">Post</button>
    <input type="hidden" value="123" name="eventId" />
    @for (int index = 0; index < Model.Count; index++)
    {
        <input type="checkbox" name="checkedIdList" value="@Model[index].Id" />
    }
</form>
        
            
[HttpPost]
public async Task<IActionResult> Test(int eventId, List<int> checkedIdList)
{
    await Task.CompletedTask;
            
    return RedirectToAction("Index");
}