title: Filling MVC DropdownList with AJAX source and bind selected value
body: <p>I have view for showing Member details. Inside there is an EditorFor element which represents subjects taken by the member.</p>
  
  <pre><code> @Html.EditorFor(m =&gt; m.Subject)
  </code></pre>
  
  <p>Inside the editor template there is a Html.DropDownListFor() which shows the selected subject and button to delete that subject </p>
  
  <p>I am using an Html.DropDownListFor element as :</p>
  
  <pre><code>@Html.DropDownListFor(m =&gt; m.SubjectID, Enumerable.Empty&lt;SelectListItem&gt;(), "Select Subject", 
  new { @class = "form-control subjects" }) 
  </code></pre>
  
  <p>The second parameter(source) is set empty since I want to load the source from an AJAX request; like below:</p>
  
  <pre><code>$.getJSON(url, function (response) {
           $.each(response.Subjects, function (index, item) { 
                  $('.subjects').append($('&lt;option&gt;&lt;/option&gt;').text(item.Text).val(item.ID));
              });
           // code to fill other dropdowns
      });
  </code></pre>
  
  <p>Currently the html loads before the dropdowns are filled. So the values of all subject dropdowns are set to the default "Select Subject". Is there a way around this or is it the wrong approach? </p>
  
  <p><em>Note</em>: There are a number of dropdowns in this page. That's why I would prefer to load them an AJAX request and cache it instead of putting in viewModel and filling it for each request.</p>
  
  <p>** <strong>EDIT</strong> **</p>
  
  <p>In AJAX call, the action returns a json object containing dropdowns used across all pages. This action is decorated with <code>[Output Cache]</code> to avoid frequent trips to server. Changed the code in <code>$.each</code> to reflect this.</p>