title: ASP.NET Populate dropdown based on other dropdown selected option AJAX
body: <p>Maybe you would help me. Cause I got stuck. I am not that good in jquery/ajax. SO the problem is that Ajax does not get the answer from server. It should the json array. It says: Failed to load resource: <em>the server responded with a status of 500 (Internal Server Error)</em>.</p>
  
  <p>What I want to do is basically populate drodon based on selected option of another.</p>
  
  <p><strong>c#:</strong></p>
  
  <pre><code>protected String ajax_test(String value)
      {
  
          DropDownForTime.Items.Clear();
          List&lt;String&gt; timesarray = new List&lt;String&gt;();
          String CS = ConfigurationManager.ConnectionStrings["DatabaseConnectionString1"].ConnectionString;
          using (SqlConnection con = new SqlConnection(CS))
          {
              SqlCommand cmd = new SqlCommand("SELECT Id from Movies WHERE Name='"+value+"'", con);
              con.Open();
  
              SqlDataReader reader = cmd.ExecuteReader();
  
              if (reader.Read())
              {
                  /*int a = int.Parse(reader[0].ToString());
                  selectTimes(a);*/
  
                  int movieid = int.Parse(reader[0].ToString());
  
                  SqlCommand cmd2 = new SqlCommand("SELECT Time from Time WHERE MovieID = '"+movieid+"'", con);
                  SqlDataReader reader2 = cmd.ExecuteReader();
                  while (reader2.Read())
                  {
                      timesarray.Add(reader[0].ToString());
                  }
              }
  
              var jsonSerialiser = new JavaScriptSerializer();
              String json = jsonSerialiser.Serialize(timesarray);
  
              return json;
          }
      }
  
  
  &lt;div class="form-group"&gt;
                  &lt;asp:Label ID="LabelForMovie" runat="server" Text="Select a movie"&gt;&lt;/asp:Label&gt;
                  &lt;asp:DropDownList ID="DropDownForMovie" runat="server" CssClass="form-control"&gt;&lt;/asp:DropDownList&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;asp:Label ID="LabelForTime" runat="server" Text="Choose time"&gt;&lt;/asp:Label&gt;
                  &lt;asp:DropDownList ID="DropDownForTime" runat="server" CssClass="form-control"&gt;&lt;/asp:DropDownList&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><strong>jquery/ajax:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $("#DropDownForMovie").change(function () {
  
                  var s = $("#DropDownForMovie").find(":selected").text();
                  var n = $("#DropDownForTime");
  
                  $.ajax({
                      type: "POST",
                      url: "UserHome.aspx/ajax_test",
                      data: { value: s },
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function (e) {
                          var obj = e.parseJSON();
  
                          $.each(obj, function (index, value) {
                              n.append("&lt;option&gt;" + value.text() + "&lt;/option&gt;");
                          });
                      }
                  });
              });
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Probably there are not only one mistake but more. Maybe some of you will show the correct way.</p>
  
  <p>P.S I know I can make the same using c# AutoPostBack and SelectedItemsIndexOnChange, but I want to use ajax for learning reasons. </p>
  
  <p><em>Thank you.</em></p>