How to store selected value id and selected text on two hidden field using Razor pages in ASP.NET Core?

Question

I work with Razor pages in ASP.NET Core 6. I face issue I can't store selected value id and selected text of select option drop down on hidden fields.

I need to create two hidden fields:

• first hidden field to store selected value id
• second for store selected text

What I have tried:

<div class="col-md-3 col-lg-2">
    <label for="printerserver-selectlbl" style="margin-left:3px;font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">Print Location</label>

    <select id="PrinterName-select" asp-for="SelectedPrinterId" name="selectprinterid" class="form-select" style="margin-left:3px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;">
        <option value="0">--Select--</option>
        @foreach (var printer in Model.PrinterList)
        {
            <option value="@printer.UserPC">@printer.PrinterName</option>
        }
    </select>
</div>

public class LabelPrintingModel : PageModel
{
    [BindProperty]
    public List<LabelPrinitingView> PrinterList { get; set; }

    public async void OnGet()
    {
        PrinterList = dtprinters.AsEnumerable()
            .Select(row => new LabelPrinitingView
                           {
                               // Map the values from the DataRow  to the properties of the PrintServer object
                               UserPC = (string)row["UserPC"],
                               PrinterName = row["PrinterName"].ToString()
                               // etc.
                           })
            .ToList();
    }

    public class LabelPrinitingView
    {
        public string UserPC { get; set; }
        public string PrinterName { get; set; }
    }
}

What I try to do is:

var selectElement = document.getElementById("PrinterName-select");

selectElement.addEventListener("change", function () {
            var selectedOption = selectElement.options[selectElement.selectedIndex];
            var selectedText = selectedOption.text;
            var selectedId = selectedOption.id;
            console.log("Selected Text: " + selectedText);
            console.log("Selected ID: " + selectedId);


<input type="hidden" id="selected-option-text" name="selected-option-text" value="@Model.SelectedOptionText" />
<input type="hidden" id="selected-option-value" name="selected-option-value" value="@Model.SelectedOptionValue" />

but still two properties have null in the page model.

SelectedOptionValue
SelectedOptionText

What do I need to do to solve this issue, please?

Answer 1

1. In your PageModel, you need both SelectedOptionValue and SelectedOptionText properties in the page model with the [BindPoperty] attribute in order to get/pass value between the Razor page and page model.

public class LabelPrintingModel : PageModel
{
    [BindProperty]
    public List<LabelPrinitingView> PrinterList { get; set; }

    [BindProperty]
    public string SelectedOptionValue { get; set; }

    [BindProperty]
    public string SelectedOptionText { get; set; }

    ...
}

2. For the JavaScript part, you are in the correct way which using the event listener to listen to the change event for the <select> element. And don't forget to bind the selected value (id) and text to the <input> element respectively. JS Demo @ StackBlitz

var selectElement = document.getElementById("PrinterName-select");
selectElement.addEventListener("change", function () {
    var selectedOption = selectElement.options[selectElement.selectedIndex];
    var selectedText = selectedOption.text;
    var selectedId = selectedOption.value;
    console.log("Selected Text: " + selectedText);
    console.log("Selected ID: " + selectedId);

    document.getElementById("selected-option-text").value = selectedText;
    document.getElementById("selected-option-value").value = selectedId;
});

3. For the <input> elements, make sure that you need to set the name attribute the same as the properties you declared in the Page Model.

<input type="hidden" id="selected-option-text" name="SelectedOptionText" value="@Model.SelectedOptionText" />
<input type="hidden" id="selected-option-value" name="SelectedOptionValue" value="@Model.SelectedOptionValue" />

Reference: Leveraging Model Binding | Using Forms in Razor Pages