title: Auto Populate a Drop Down List based on value in Text Box
body: <p>I have a simple password reset form that has a username field, and below it, a drop down list for security questions. </p>
  
  <p>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.</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>    &lt;div class="editor-field"&gt;
          @Html.TextBoxFor(model =&gt; model.userName, new { @Id = "forgotPassUserName" })
          @Html.ValidationMessageFor(model =&gt; model.userName)
      &lt;/div&gt;
  
      &lt;div class="editor-field"&gt;
      @{
          List&lt;SelectListItem&gt; securityquestionvalues = new List&lt;SelectListItem&gt;();
      }
          @Html.DropDownListFor(model =&gt; model.securityQuestion, securityquestionvalues, new { @Id = "forgotPassSecurityQuestions" })
  </code></pre>
  
  <p>Here is my jQuery/JS</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function () {
      $("#forgotPassUserName").change(function () {
          var selectedValue = $(this).val();
          $.getJson("LoginRegisterController/ForgotPasswordDropDownList", { user: selectedValue }, function (result) {
              var selectList = $("#forgotPassSecurityQuestions");
              selectList.add(result, null);
  
          });
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>Here is the method in the controller that gets called by the getJSON above:</p>
  
  <pre><code>        public ActionResult ForgotPasswordDropDownList(string userName)
      {
          var db = IoC.ResolveObjectContextelearningCommon();
  
          var rep = db.GetRepository&lt;EmployeeReg&gt;();
  
          List&lt;EmployeeReg&gt; user = rep.Find(o =&gt; o.Login == userName).ToList();
  
          List&lt;SelectListItem&gt; questionList = new List&lt;SelectListItem&gt;();
  
          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);
      }
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I changed my getJSON method to .ajax like so</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function () {
      $("#forgotPassUserName").change(function () {
          var selectedValue = $(this).val();
          var url = '&lt;%= Url.Action("ForgotPasswordDropDownList", "LoginRegisterController") %&gt;';
          $.ajax({
              type: "GET",
              url: url,
              data: { userName: selectedValue },
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (result) {
                  alert("testing");
              }
          });
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>Still getting no alert popup....</p>