使用jQuery填充DropDownListFor

Question

我想知道在强类型视图中是否可以将jQuery与@ Html.DropDownListFor结合起来，因为我开始怀疑它不是，或者我的方法这个问题是有缺陷的。

型号：

public class NewUser 
{ 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
    public string EmailAddress { get; set; } 
    public string ConfirmEmail { get; set; } 
    public string Password { get; set; } 
    public string ConfirmPassword { get; set; } 
    public SelectListItem DOBDay { get; set; } 
    public SelectListItem DOBMonth { get; set; } 
    public SelectListItem DOBYear { get; set; } 
    public string Gender { get; set; } 
} 

查看：

@model test.Models.NewUser 

@using (Ajax.BeginForm("RegisterUser", "Register", new AjaxOptions { OnSuccess = "" })) 
{ 
    <div> 
     @Html.TextBoxFor(m => Model.FirstName, new { @class = "big_i", @watermark = "First name" }) 
     @Html.TextBoxFor(m => Model.LastName, new { @class = "big_i", @watermark = "Last name" }) 
    </div> 
    <div> 
     @Html.TextBoxFor(m => Model.EmailAddress, new { @class = "big_i long_i", @watermark = "E-mail address" }) 
    </div> 
    <div> 
     @Html.TextBoxFor(m => Model.ConfirmEmail, new { @class = "big_i long_i", @watermark = "Confirm e-mail address" }) 
    </div> 
    <div> 
     @Html.PasswordFor(m => Model.Password, new { @class = "big_i long_i", @watermark = "Password" }) 
    </div> 
    <div> 
     @Html.PasswordFor(m => Model.ConfirmPassword, new { @class = "big_i long_i", @watermark = "Confirm password" }) 
    </div> 
    <div> 
     <fieldset> 
      <h2> 
       Date of birth</h2> 
      <div id="reg_date_control" class="date_control"> 
       @Html.DropDownListFor(m => Model.DOBDay, Enumerable.Empty<SelectListItem>(), "Day: ", new { @class = "dc-days big_i" }) 
       @Html.DropDownListFor(m => Model.DOBMonth, Enumerable.Empty<SelectListItem>(), "Month: ", new { @class = "dc-months big_i" }) 
       @Html.DropDownListFor(m => Model.DOBYear, Enumerable.Empty<SelectListItem>(), "Year: ", new { @class = "dc-years big_i" }) 
      </div> 
     </fieldset> 
    </div> 
} 

表单控制器行动提交：

[HttpPost] 
public ActionResult RegisterUser(Models.NewUser model) 
{ 
    string firstName = model.FirstName; 
    string lastName = model.LastName; 
    string email = model.EmailAddress; 
    string confirm_email = model.ConfirmEmail; 
    string password = model.Password; 
    string confirm_password = model.ConfirmPassword; 
    string dob_month = model.DOBMonth.Value; // an error is raised here 
    return View(); 
} 

我想最初绑定@ Html.DropDownListFor对空列表，然后jQuery将填充它。我不会在这里粘贴jQuery代码，它基本上是填充每个DOB下拉列表，并显示选定月份的有效天数。

列表填充正常。但是，DOBDay，DOBMonth和DOBYear始终为空。我想到的是使用Enumerable.Empty（）是我的问题，不过话说回来，我已经试过填充像这样的下拉菜单：

@model gs_mvc.Models.NewUser 

@{ 
    string[] months = new[]{"January", "February", "March", "April", "etc"}; 
    var items = new List<SelectListItem>(); 
    for (int i = 0; i < months.Length; i++) { 
     items.Add(new SelectListItem { Value = i.ToString(), Text = months[i] }); 
    } 
} 

... 

@Html.DropDownListFor(m => Model.DOBMonth, items, "Month: ", new { @class = "big_i" }) 

这也给了一个空值。

在这一点上，我相信我最好的选择是将我的jQuery脚本的功能移到C＃中，并且每次更改下拉列表时都会执行AJAX调用。不过，我想首先在这里检查一下，我不会错过那些让我做我想做的事的盲目显而易见的东西。

Answer 1

我认为你的问题是，模型上的月份，日期和年份的值可能应该是int而不是SelectListItem。 SelectListItem用于构建选项，因为它同时具有文本和值属性，但是您想要并将返回的值只是值 - 而不是文本/值对。当然，你可能想让它们为空，这样你就可以确定你正在接收来自POST的值，而不仅仅是将它们默认为零。

public class NewUser 
{ 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
    public string EmailAddress { get; set; } 
    public string ConfirmEmail { get; set; } 
    public string Password { get; set; } 
    public string ConfirmPassword { get; set; } 
    public int? DOBDay { get; set; } 
    public int? DOBMonth { get; set; } 
    public int? DOBYear { get; set; } 
    public string Gender { get; set; } 
}