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始终为null。我希望使用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用于构建选项，因为它具有Text和Value属性，但您想要和将要收到的只是值 - 而不是Text / Value对。当然，您可能希望使它们可以为空，这样您就可以确保从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; }
}

使用jQuery填充DropDownListFor

1 个答案: