title: Get value from database ASP.NET web api in Boostrap Dropdown list using JavaScript
body: <p>I am trying to get data from database web api in json and show them in my bootstrap modal page, using jQuery.</p>
  
  <p>Here is my html page</p>
  
  <pre><code>&lt;div class="form-group"&gt;
  &lt;label for="Modell"&gt;Country&lt;/label&gt;
  &lt;select class="form-control"&gt;
  // those below I want to retrieve them from database, not like this hardcoded
  &lt;option value="1"&gt;USA&lt;/option&gt;
  &lt;option value="2"&gt;Canada&lt;/option&gt;
  &lt;option value="3"&gt;France&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my half done jQuery:</p>
  
  <pre><code>function Countries()
  {
      $.ajax({
   url: "/Api/Countries",
          type: "GET",
          contentType: "application/json;charset=utf-8",
          dataType: "json",
          success: function (result) {
           // I don't know what to code here to get countries in select option
           // And how to show them in my boostrap modal page
       }
  
  })
  }
  </code></pre>
  
  <p>My response structure looks like..</p>
  
  <p>In my Country model I have this class </p>
  
  <pre><code>public class CountriesModel
      {
          public int CountryId { get; set; }
          public string CountryName { get; set; }
      }
  </code></pre>
  
  <p>In my Country Entity I have this code</p>
  
  <pre><code>public List&lt;CountriesModel&gt; GetCountries()
          {
  
              List&lt;CountriesModel&gt; lst = new List&lt;CountriesModel&gt;();
  
  
              try
              {
                  using (SqlConnection con = new SqlConnection(DBConnection.GetDBConnection()))
                  {
  
                      string sqlSelectString = "SELECT * FROM Countries";
                      command = new SqlCommand(sqlSelectString, con);
                      command.Connection.Open();
  
                      SqlDataReader reader = command.ExecuteReader();
                      while (reader.Read())
                      {
                          lst.Add(new CountryModel
                          {
                              CountryId = reader.GetInt32(reader.GetOrdinal("CountryId")),
                              CountryName = reader.GetString(reader.GetOrdinal("CountryName")),
  
                           });
  
                      }
                      return lst;
                  }
  
              }
              catch (Exception ex)
              {
                  ErrorMessage = ex.Message;
              }
              return null;
  
  }
  </code></pre>
  
  <p>And then in my Controller I have this controller:</p>
  
  <pre><code>public List&lt;CountriesModel&gt; GetCountries()
  {
  
              return countryService.GetCountries();
  }
  </code></pre>
  
  <p>Of course I get Json back when I run /api/countries but how can I retrieve them my bootstrap page using jQuery... javascript...</p>