Get drop-down list selected value and text from in ASP Razor Pages

Question

I have this in my form as shown below:

<div class="col-lg-3">
    <label class="form-label" asp-for="WOHeader.SP_ID">@CommonResource.SalesPerson *</label>
    <select class="form-select" asp-for="WOHeader.SP_ID" asp-items='(IEnumerable<SelectListItem>)ViewData["SPList"]!' asp-disabled="@(Model.REC_MODE == (short)RecModeId.AddNew)">
    </select>
    <span class="invalid-feedback" asp-validation-for="WOHeader.SP_ID"></span>
</div>

I can get the selected value binded to WOHeader.SP_ID. I also need to get its selected text. The best option I can think of right now is to save it to a hidden field.

Is there any better way to get both the selected value and text in code-behind after a post-back via Ajax? I have tried various ways but didn't work.

Please advise. Thanks.

Answer 1

If you need post the selected value and text to backend, hidden input should be a better way. Just be sure the name match the model property and submit the button.

For ajax, it may not easy to get the element value and you need post with antiforeign token. Any way it depends on your real scenario.

A simple working demo:

Page

@page
@model IndexModel      
<form method="post" enctype="multipart/form-data">    
<div class="col-lg-3">
    <label class="form-label" asp-for="WOHeader.SP_ID">Person</label>
    <select class="form-select" asp-for="WOHeader.SP_ID" asp-items='(IEnumerable<SelectListItem>)ViewData["SPList"]!' >
    </select>
    <span class="invalid-feedback" asp-validation-for="WOHeader.SP_ID"></span>
</div>
    <input asp-for="WOHeader.SP_Name" hidden/>
<button type="submit" class="btn btn-primary">Create</button>
</form>
@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script>
        $('select').change(function () {
            // Get the selected text of the dropdown
            var selectedText = $(this).find('option:selected').text();    
            // Set the input field value to the selected text
            $('#WOHeader_SP_Name').val(selectedText);
        });
    </script>
}

Bakcend

public class IndexModel : PageModel
{        
    [BindProperty]
    public WOHeader WOHeader { get; set; }
    public void OnGet()
    {
        ViewData["SPList"] = new List<SelectListItem>()
        {
            new SelectListItem(){ Text="aa",Value="1"},
            new SelectListItem(){ Text="bb",Value="2"},
            new SelectListItem(){ Text="cc",Value="3"}
        };
    }
    public IActionResult OnPost()
    {
        return Page();
    }
  }
public class WOHeader
{
    public int SP_ID { get; set; }
    public string SP_Name { get; set; }
}

Answer 2

The text of the selected item in a select element is not passed to the server as part of the form submission process, so your current solution of saving it to a hidden field using client-side code is the most obvious and easiest to implement.