CODEWITHSUNDEEP
c#jqueryasp.net-mvcrazor
nullseifer
nullseifer

Reputation: 112

Using jQuery to populate a DropDownListFor

I would like to know if it is even possible to combine jQuery with a @Html.DropDownListFor in a strongly typed view, as I am beginning to suspect that either it isn't, or my approach to this problem is flawed.

Model:

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

View:

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

Controller action for form submit:

[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();
}

I am trying to initially bind the @Html.DropDownListFor with an empty list, which the jQuery will then populate. I won't paste the jQuery code here, it is basically populating each DOB drop down with the valid number of days in a selected month.

The lists populate fine. However, DOBDay, DOBMonth, and DOBYear are always null. I expect that using Enumerable.Empty() is my problem, but having said that, I have tried populating the dropdowns like so:

@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" })

which also gives a null value.

At this point, I believe that my best bet would be to move the functionality of my jQuery script to C#, and do an AJAX call each time the dropdowns are changed. However, I wanted to check here first that I'm not missing something blindingly obvious that would allow me to do what I'm trying.

Upvotes: 0

Views: 534

Answers (1)

tvanfosson
tvanfosson

Reputation: 532625

I think your problem is that the values on the model for month, day, and year should probably be int not SelectListItem. SelectListItem is used to build the options, since it has both the Text and Value properties, but what you want to and will receive back are just the values - not Text/Value pairs. Of course, you probably want to make them nullable so that you're sure that you're receiving values from the POST rather than just having them default to zero.

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

Upvotes: 1

Related Questions