剃须刀页面 html 选择下拉菜单未绑定到模型且 javascript 看不到

Question

我是 razor 页面的新手，并试图将两个选择列表的值绑定到两个模型属性。当我尝试使用 JavaScript 检索它时，该值始终为空 ("")。当我给选择元素一个正常的 ID 时，它按预期工作，但在我使用 asp-for="CustomerInfo.ExpMonth" 时却没有。 asp-for 绑定适用于所有其他输入，但不适用于选择。

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>

我觉得这应该是微不足道的，我错过了什么？

Answer 1

一个愚蠢的错误：

该模型属性具有隐藏字段，然后使用 asp-for 进行选择，并且 javascript 正在询问隐藏输入的值，该值将为空。去掉隐藏的值字段显然解决了这个问题。

@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>

Answer 2

我曾经做过几次剃须刀。我在 MVC 上更多。不知道我是否还记得提交代码。

试试这个。

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>