title: How to reload dropdown list values in asp.net mvc3 without refreshing page
body: <p>I'm developing a MVC3 application which interacts with a db. I'm using a form to create an entity and one of the attributes is dependent on another table. To ensure referential integrity, I am populating a drop down list to restrict the user as follows:</p>
  
  <pre><code>var processGroups = repository.getAllProcessGroups();
  ViewBag.processGroup_drpdwn = new SelectList(processGroups, "process_group_id", "process_group_name");
  return View(); //this is my Creation view
  </code></pre>
  
  <p>Then, in my View I display the dropdown as </p>
  
  <pre><code>&lt;div class="editor-field"&gt;
          @Html.DropDownList("groups", (SelectList)ViewBag.processGroup_drpdwn, new { id = "groupsList" })
           @Html.ActionLink("Add", "AddGroup", null, new { @class = "addGroupLink" })
  
      &lt;/div&gt;
  </code></pre>
  
  <p>To make things easier on the user, I have implemented a <a href="http://ricardocovo.wordpress.com/2011/04/03/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms/" rel="nofollow">modal dialog</a> using jQuery which allows the user to add an option to the db without having to leave the form to enter it on another page. This all works fine, my Controller returns the partial view, validates the stuff and posts it to the db. Unfortunately, the user has to refresh the page for the new option to get loaded from the db into the drop down list.</p>
  
  <p>I'm trying to update the dropdown list using JSON and JQuery after the insert, but for some reason it is not working. </p>
  
  <p><strong>Additional Info:</strong></p>
  
  <p>Here is the relevant section of the modal form:</p>
  
  <pre><code>@using (Ajax.BeginForm("AddGroup", "Process", null,
      new AjaxOptions
      {
          UpdateTargetId = "update-message",
          InsertionMode = InsertionMode.Replace,
          HttpMethod = "POST",
          OnSuccess = "updateSuccess"
      }, new { @id = "addGroupForm" }))
  </code></pre>
  
  <p>Here is a method which returns the groups as a JSON list:</p>
  
  <pre><code>[AcceptVerbs(HttpVerbs.Post)]
      public ActionResult ShowGroups()
      {
          var groups = repository.getAllProcessGroups();
          List&lt;SelectListItem&gt; list=new List&lt;SelectListItem&gt;();
          foreach (PROCESS_GROUP p in groups)
          {
              list.Add(new SelectListItem() { Value = p.PROCESS_GROUP_ID.ToString(), Text = p.PROCESS_GROUP_NAME });
          }
          return Json(list,JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>Here is the jQuery snippet of code which runs after my data has been inserted:</p>
  
  <pre><code>function loadGroups() {
      alert();
      $.getJSON("/Process/ShowGroups", null, function (data) {
          var selectList = $("#groupsList");
          selectList.empty();
          $.each(data, function (index, optionData) {
              var option = $('&lt;option&gt;').text(optionData.Text).val(optionData.Value);
              selectList.append(option);
          });
      });
  }
  function updateSuccess() {
      if ($("#update-message").html() == "True") {
  
          loadGroups();
          $('#updateDialog').dialog('close');
          //twitter type notification
          $('#commonMessage').html("Successfully Added");
          $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
  
      }
      else {
          $("#update-message").show();
      }
      }
  </code></pre>
  
  <p>The <code>loadGroups()</code> begins but nothing happens. I also don't get any error messages explaining what went wrong. </p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Works now. I had to remove <code>[AcceptVerbs(HttpVerbs.Post)]</code> from the Action</p>