How to store selected Id and selected text on hidden field using razor

Question

I work on razor asp.net core . I face issue i can't store selected value id and selected text of select option drop down on hidden fields

so I need to create two hidden fields first hidden field to store selected value id and second for store selected text

<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; }
    }

Deepak Rawat · Answer

To store the selected value and text of the dropdown in hidden fields, you can use JavaScript/jQuery. Here's an example of how you can achieve that: Add a script section to your HTML page where you can handle the selection change event of the dropdown and update the hidden fields accordingly: @section Scripts { $(document).ready(function() { $('#PrinterName-select').change(function() { var selectedValue = $(this).val(); var selectedText = $(this).find('option:selected').text(); $('#selectedPrinterId').val(selectedValue); $('#selectedPrinterText').val(selectedText); }); }); } In your server-side code, you can access the values of the hidden fields by binding them to properties in your model: public class LabelPrintingModel : PageModel { [BindProperty(Name = "selectedPrinterId")] public int SelectedPrinterId { get; set; } [BindProperty(Name = "selectedPrinterText")] public string SelectedPrinterText { get; set; } public List PrinterList { get; set; } public async Task OnGet() { PrinterList = dtprinters.AsEnumerable() .Select(row => new LabelPrinitingView { UserPC = (string)row["UserPC"], PrinterName = row["PrinterName"].ToString() }) .ToList(); } public class LabelPrinitingView { public string UserPC { get; set; } public string PrinterName { get; set; } } } when the user selects an option from the dropdown, the hidden fields will be updated with the selected value and text. When the form is submitted, the selected values will be available in the SelectedPrinterId and SelectedPrinterText properties of your model.

Amit Mohanty · Answer

Print Location --Select-- @foreach (var printer in Model.PrinterList) { @printer.PrinterName } function updateHiddenFields() { var select = document.getElementById('PrinterName-select'); var selectedOption = select.options[select.selectedIndex]; var selectedValue = selectedOption.value; var selectedText = selectedOption.text; document.getElementById('SelectedPrinterIdHidden').value = selectedValue; document.getElementById('SelectedPrinterTextHidden').value = selectedText; } public class LabelPrintingModel : PageModel { [BindProperty] public List PrinterList { get; set; } [BindProperty] public string SelectedPrinterId { get; set; } [BindProperty] public string SelectedPrinterName { get; set; } public async void OnGet() { PrinterList = dtprinters.AsEnumerable() .Select(row => new LabelPrinitingView { UserPC = (string)row["UserPC"], PrinterName = row["PrinterName"].ToString() }) .ToList(); // Set the initial selected values for the hidden fields SelectedPrinterId = "0"; SelectedPrinterName = "--Select--"; } public class LabelPrinitingView { public string UserPC { get; set; } public string PrinterName { get; set; } } }