razor pages html select dropdown not binding to model and not seen by javascript

Question

I'm new to razor pages and trying to bind the value of two select lists to two model properties. The value is always empty ("") when I try to retrieve it using JavaScript. It works as expected when I give the select element a normal ID but not when I use asp-for="CustomerInfo.ExpMonth". The asp-for binding works for every other input just not the selects.

public class CustomerViewModel
{
    public string ExpMonth { get; set; }
    public string ExpYear { get; set; }
}


//PageModel

[BindProperty]
public CustomerViewModel CustomerInfo { get; set; }

public void OnGet()
{
            
     ViewData["Months"] = Enumerable.Range(1, 12)
     .Select(n => new SelectListItem
     {
         Value = n.ToString(),
         Text = n.ToString()
     }).ToList();
     ViewData["Years"] = Enumerable.Range(DateTime.Now.Year, 10)
     .Select(n => new SelectListItem
     {
         Value = n.ToString(),
         Text = n.ToString()
     }).ToList();
}


// html
<form method="post" id="payment-form" onsubmit="submitPaymentForm(); return false;">
<div style="width: 100%; height: 65px;">
            <select asp-for="CustomerInfo.ExpMonth" asp-items="@((List<SelectListItem>)ViewData["Months"])">
                <option value="" selected  disabled="">Expiration Month</option>
            </select>
            <select asp-for="CustomerInfo.ExpYear" asp-items="@((List<SelectListItem>)ViewData["Years"])">
                <option value="" selected disabled="">Expiration Year</option>
            </select>
        </div>

<input id="submit-button" type="submit" value="Pay Now">
</form>
<script>
function submitPaymentForm() {

            var requiredFields = {};
            requiredFields["month"] = document.getElementById("CustomerInfo_ExpMonth").value;
            requiredFields["year"] = document.getElementById("CustomerInfo_ExpYear").value;
        }
</script>

I feel this should be trivial, what am I missing?

Answer 1

I used to do razor few times. I am on MVC more. Not sure if I still can remember about submit code.

Try this.

public class CustomerViewModel
{
    public string ExpMonth { get; set; }
    public string ExpYear { get; set; }
}


//PageModel

[BindProperty]
public CustomerViewModel CustomerInfo { get; set; }

public void OnGet()
{
            
     
}
public void OnPost()
{
    var Month = CustomerInfo.ExpMonth;
    var Year = CustomerInfo.ExpYear;
}

// html
@{
var monthslist = Enumerable.Range(1, 12)
     .Select(n => new SelectListItem
     {
         Value = n.ToString(),
         Text = n.ToString()
     }).ToList();
     var yearslist = Enumerable.Range(DateTime.Now.Year, 10)
     .Select(n => new SelectListItem
     {
         Value = n.ToString(),
         Text = n.ToString()
     }).ToList();
}
<form method="post" id="payment-form">
<div style="width: 100%; height: 65px;">
            <select asp-for="ExpMonth" asp-items="@monthslist">
                <option value="" selected  disabled="">Expiration Month</option>
            </select>
            <select asp-for="ExpYear" asp-items="@yearslist">
                <option value="" selected disabled="">Expiration Year</option>
            </select>
        </div>

<button id="submit-button" type="submit" value="Pay Now"></button>
</form>

Answer 2

A silly mistake:

had hidden fields for that model property then used asp-for for the select and the javascript was asking for the value of the hidden input which would be empty. Removing the hidden value fields obviously solved the problem.

@Html.HiddenFor(m => m.CustomerInfo.ExpMonth)
@Html.HiddenFor(m => m.CustomerInfo.ExpYear)

<div style="width: 100%; height: 65px;">
            <select asp-for="CustomerInfo.ExpMonth" asp-items="@((List<SelectListItem>)ViewData["Months"])">
                <option value="" disabled="">Expiration Month</option>
            </select>
            <select asp-for="CustomerInfo.ExpYear" asp-items="@((List<SelectListItem>)ViewData["Years"])">
                <option value="" disabled="">Expiration Year</option>
            </select>
        </div>