How can I post multiple entries at once, when selecting multiple options from a Multi List Dropdown

Question

Hi All,

I have hit a bit of a snag with this. I have a form, which contains a multi select dropdown menu. I want to allow the user to select as many options from the drop down menu and upon pressing submit, each different item selected will be saved into its own row in the database. So 5 selections = 5 different Id's. Currently I am only able to post the first item selected from the multi select list. I have a good idea why, but not able to implement

My Form looks like this

 <form method="post" id="newReferralForm">       
<div class="row">          
<div class="col-md-6">              
<label>Location</label>              
<select class="form-select" asp-for="@Model.Referral.Location">                  <option>Option 2</option>                  
<option>Option 2</option>              
</select>          
</div>          
<div class="col-md-6 my-3 my-md-0">              
<label>Date and Time</label>             
 <input type="datetime-local" class="form-control" asp-for="@Model.Referral.ReferralDate" />         
 </div>      </div>     
 <div class="row my-md-3">       
   <div class="col-md-6">            
  <label>Staff Names</label>          
    <select class="form-control staffReferral" multiple="multiple" asp-items="@Model.EsrRecords" asp-for="@Model.Referral.AssignmentNumber">                  <option></option>             
 </select>         
 </div>         
 <div class="col-md-6 my-3 my-md-0">           
   <label>Reason(s) for Referral</label>      
 <select class="form-select" asp-items="@Model.ReferralReasons" asp-for="@Model.Referral.ReferralReason">           
       <option value="@null">Please Choose...</option>  
            </select>        
  </div>    
  </div>     
 <div class="row">     
     <div class="col-12 my-3 my-md-0">   
           <label>Incident Description</label>     
         <textarea class="form-control" rows="3" asp-for="@Model.Referral.IncidentDescription"></textarea>    
      </div>   
   </div>     
 <div class="row my-md-3">    
      <div class="col-md-6">  
            <label>Debrief State</label>    
          <select class="form-select" asp-for="@Model.Referral.Status">                  <option>Option 2</option>   
               <option>Option 2</option>     
         </select>     
     </div>      
    <div class="col-md-6">   
           <label>Incident Number</label>     
         <input class="form-control" asp-for="@Model.Referral.IncidentNumber" />          </div>  
    </div>  
    <div class="row">   
       <div class="col-md-6 my-3 my-md-0">  
            <label>Referral Made By</label> 
             <select class="form-select" asp-for="@Model.Referral.ReferralMadeBy">                  <option>Option 2</option>         
         <option>Option 2</option>   
           </select>   
       </div>          
<div class="col-md-6">  
            <label>Senior in Attendance</label>    
          <select class="form-select" asp-for="@Model.Referral.SeniorStaffMember">                  <option>Option 2</option> 
                 <option>Option 2</option>  
            </select>  
        </div>    
  </div>     
 <div class="d-flex justify-content-center mt-5">   
       <button class="btn btn-primary fw-bold createReferral">Submit</button>      </div> 
 </form>

My Post Method which I know is wrong

public async Task<IActionResult> OnPostNewReferral() 
{  
await _db.TblReferrals.AddAsync(Referral);     
await _db.SaveChangesAsync();     
return new JsonResult(Referral);   
}
																									

typublic class TblReferrals
{

    public int Id { get; set; }

    public string AssignmentNumber { get; set; }

    public string? Location { get; set; }

    public DateTime? ReferralCreatedAt { get; set; }

    public DateTime? ReferralDate { get; set; }

    public DateTime? SubmittedAt { get; set; }

    public string? ReferralReason { get; set; }

    public string? IncidentNumber { get; set; }

    public string? IncidentDescription { get; set; }

    public string? Status { get; set; }

    public string? ReferralMadeBy { get; set; }

    public string? SeniorStaffMember { get; set; }

    public string? SeniorStaffPersonId { get; set; }

    public bool IsSubmitted { get; set; }   


}

Answer 1

add a string collection to the view model

public string[] AssignmentNumbers {get; set;}

and change the binding:

asp-for="@Model.AssignmentNumbers">

then do the proper database updates.

Answer 2

Hi @John Rowan, The multiple select should match the list type property and the database cannot directly store the List<string> data. You need set a separated property with type of List<string>, then foreach the list value and set it to the property in model. Here is a simple demo:

Page

<form method="post" id="newReferralForm">
    <div class="row my-md-3">
        <div class="col-md-6">
            <label>Staff Names</label>
            <select class="form-control staffReferral" asp-for="@Model.MultipleSelect">
                <option value="1">p1</option>
                <option value="2">p2</option>
                <option value="3">p3</option>
            </select>
        </div>
       
    </div>
    <div class="d-flex justify-content-center mt-5">
        <button class="btn btn-primary fw-bold createReferral">Submit</button>
    </div>
</form>

Backend

[BindProperty]
public TblReferrals Referral { get; set; }
[BindProperty]
public List<string> MultipleSelect { get; set; }
public void OnPost()
{
     List<TblReferralStaff> model = new List<TblReferralStaff>();  
     foreach (var item in MultipleSelect)  
     {      
          model.Add(new TblReferralStaff() { TblReferralId = int.Parse(item) });
     }                  
}

Model

public class TblReferralStaff
{
    public int Id { get; set; }
    public int TblReferralId { get; set; }
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Rena