Bind html select to array of long C#

March 8, 2022

My problem is when I want to bind html select to a property of long[] in my DTO, it shows me a dropdown list with multiple selection ability. But I want it in non-multiple (single selection) mode.
My DTO:

public class CreateSmsPattern
    {
        [Required(ErrorMessage = ValidationMessages.IsRequired)]
        [MaxLength(128, ErrorMessage = ValidationMessages.InvalidLength)]
        public string Name { get; set; }

        [Required(ErrorMessage = ValidationMessages.IsRequired)]
        [Range(1, long.MaxValue, ErrorMessage = ValidationMessages.IsRequired)]
        public long SpecialListId { get; set; }

        [Required(ErrorMessage = ValidationMessages.IsRequired)]
        [MaxLength(5000, ErrorMessage = ValidationMessages.InvalidLength)]
        public string Message { get; set; }

        [Required(ErrorMessage = ValidationMessages.IsRequired)]
        [Range(1, int.MaxValue, ErrorMessage = ValidationMessages.IsRequired)]
        public int ParametersCount { get; set; }

        public long[] ParametersList { get; set; }
    }

and my front-end (please notice that user must choose 3 times and every time ONLY 1 selection, becuase order of his selections is important to me):

<div class="col-md-4">
    <div class="form-group">
        <label class="control-label" asp-for="Command.ParametersList">Parameters List</label>
        <select class="form-control" asp-for="Command.ParametersList" asp-items='new SelectList(Model.ParametersList, "Id", "Name")'>
            <option value="-1">Choose one...</option>
        </select>
        <span asp-validation-for="Command.ParametersList" class="error"></span>
    </div>
    <div class="form-group">
        <select class="form-control" asp-for="Command.ParametersList" asp-items='new SelectList(Model.ParametersList, "Id", "Name")'>
            <option value="-1">Choose one...</option>
        </select>
        <span asp-validation-for="Command.ParametersList" class="error"></span>
    </div>
    <div class="form-group">
        <select class="form-control" asp-for="Command.ParametersList" asp-items='new SelectList(Model.ParametersList, "Id", "Name")'>
            <option value="-1">Choose one...</option>
        </select>
        <span asp-validation-for="Command.ParametersList" class="error"></span>
    </div>
</div>

>Solution :

If what you need is three selections, then you should have three receiving properties for each of the selections:

public long Selection1 { get; set; }
public long Selection2 { get; set; }
public long Selection3 { get; set; }

And target these properties with your tag helpers:

<div class="form-group">
    <select class="form-control" asp-for="Selection1" asp-items='new SelectList(Model.ParametersList, "Id", "Name")'>
        <option value="-1">Choose one...</option>
    </select>
    <span asp-validation-for="Selection1" class="error"></span>
</div>

<div class="form-group">
    <select class="form-control" asp-for="Selection2" asp-items='new SelectList(Model.ParametersList, "Id", "Name")'>
        <option value="-1">Choose one...</option>
    </select>
    <span asp-validation-for="Selection2" class="error"></span>
</div>

<div class="form-group">
    <select class="form-control" asp-for="Selection3" asp-items='new SelectList(Model.ParametersList, "Id", "Name")'>
        <option value="-1">Choose one...</option>
    </select>
    <span asp-validation-for="Selection3" class="error"></span>
</div>

This way you don’t have to be concerned with the order either.