Question

I have a simple password reset form that has a username field, and below it, a drop down list for security questions.

What I am trying to get working is when the user types in a valid username, when they unfocus from the textbox, I want to have it so that the drop down list will populate with the users security questions as found in my database.

Here is my HTML

    <div class="editor-field">
        @Html.TextBoxFor(model => model.userName, new { @Id = "forgotPassUserName" })
        @Html.ValidationMessageFor(model => model.userName)
    </div>

    <div class="editor-field">
    @{
        List<SelectListItem> securityquestionvalues = new List<SelectListItem>();
    }
        @Html.DropDownListFor(model => model.securityQuestion, securityquestionvalues, new { @Id = "forgotPassSecurityQuestions" })

Here is my jQuery/JS

<script type="text/javascript">
$(function () {
    $("#forgotPassUserName").change(function () {
        var selectedValue = $(this).val();
        $.getJson("LoginRegisterController/ForgotPasswordDropDownList", { user: selectedValue }, function (result) {
            var selectList = $("#forgotPassSecurityQuestions");
            selectList.add(result, null);

        });
    });
});

Here is the method in the controller that gets called by the getJSON above:

        public ActionResult ForgotPasswordDropDownList(string userName)
    {
        var db = IoC.ResolveObjectContextelearningCommon();

        var rep = db.GetRepository<EmployeeReg>();

        List<EmployeeReg> user = rep.Find(o => o.Login == userName).ToList();

        List<SelectListItem> questionList = new List<SelectListItem>();

        if (user[0].secureQuestion1 != null)
        {
            questionList.Add(new SelectListItem { Text = user[0].secureQuestion1, Value = user[0].secureQuestion1 });
        }

        if (user[0].secureQuestion2 != null)
        {
            questionList.Add(new SelectListItem { Text = user[0].secureQuestion2, Value = user[0].secureQuestion2 });
        }

        return Json(questionList, JsonRequestBehavior.AllowGet);
    }

Unfortunately. This is not working for me. I unfortunately get errors when I try to breakpoint at the getJSON method. The issue seems to be in there.

EDIT

I changed my getJSON method to .ajax like so

<script type="text/javascript">
$(function () {
    $("#forgotPassUserName").change(function () {
        var selectedValue = $(this).val();
        var url = '<%= Url.Action("ForgotPasswordDropDownList", "LoginRegisterController") %>';
        $.ajax({
            type: "GET",
            url: url,
            data: { userName: selectedValue },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                alert("testing");
            }
        });
    });
});

Still getting no alert popup….

Answer 1

The following line isn’t right:

selectList.add(result, null);

You’ll need a for loop instead to add them to the Select List, something like:

selectList.html(""); //empty the options first

for (var i = 0; i < result.length; i++)
{
    selectList.append("<option value='" + result[i].Value  + "'>" 
        + result[i].Text  + "</option>");
}