c# - How to submit from a razor view a list in a model with dynamic list? ASP.NET Core 3.1

Question

First of all, I have these models

public class Event
{
    //other properties
    public IEnumerable<EventsParticipants> ParticipantsList { get; set; }
}

public class EventsParticipants
{
    public string ParticipantId { get; set; }
    public int EventId{ get; set; }
}

ParticipantId stores an Identity User Id so that I can relate those two tables.

I've made this dynamic list so that I can add users to events in an "UpdateEvent" Razor view.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a onclick="addToList(this)">(click me)User to add into list(click me)</a>
<br/>
<select multiple id="participantsList"
style="height: 7em; overflow-y: scroll; width: 10em"></select>
<br/>
<button type="button" onclick="removeFromList()">Remove</button>
<button type="button" onclick="clearList()">Clear list</button>

    <script>
    function addToList(usuario) {
        var lista = document.getElementById("participantsList");
        var item = document.createElement("option");
        item.text = $(usuario).text()
        lista.appendChild(item);
    }
    

    function removeFromList() {
        $("#participantsList option:selected").remove();
    }

    function clearList() {
        $("#participantsList").empty();
    }
    </script>

Answer 1

You can do something like this

 public class EventsDto
 {
   //other properties
   public List<string> ParticipantsIds { get; set; }
 }

Then in view so after submit you can get list of ParticipantsIds you can loop on them then initiate new objects of EventsParticipants finally add them to DB

@model EventsDto
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

<a onclick="addToList(this)">(click me)User to add into list(click me)</a>
<br/>
<select asp-for="ParticipantsIds" multiple id="participantsList"
style="height: 7em; overflow-y: scroll; width: 10em"></select>
<br/>
<button type="button" onclick="removeFromList()">Remove</button>
<button type="button" onclick="clearList()">Clear list</button>


<script>
function addToList(usuario) {
    var lista = document.getElementById("participantsList");
    var item = document.createElement("option");
    item.text = $(usuario).text()
    lista.appendChild(item);
}

function removeFromList() {
    $("#participantsList option:selected").remove();
}

function clearList() {
    $("#participantsList").empty();
}
</script>