Get value from database ASP.NET web api in Boostrap Dropdown list using JavaScript

Question

I am trying to get data from database web api in json and show them in my bootstrap modal page, using jQuery.

Here is my html page

<div class="form-group">
<label for="Modell">Country</label>
<select class="form-control">
// those below I want to retrieve them from database, not like this hardcoded
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">France</option>
</select>
</div>

and my half done jQuery:

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
     }

})
}

My response structure looks like..

In my Country model I have this class

public class CountriesModel
    {
        public int CountryId { get; set; }
        public string CountryName { get; set; }
    }

In my Country Entity I have this code

public List<CountriesModel> GetCountries()
        {

            List<CountriesModel> lst = new List<CountriesModel>();


            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;

}

And then in my Controller I have this controller:

public List<CountriesModel> GetCountries()
{

            return countryService.GetCountries();
}

Of course I get Json back when I run /api/countries but how can I retrieve them my bootstrap page using jQuery... javascript...

Answer 1

Assign an id to the select html

<select class="form-control" id="cntryDD">

</select>

then in the success callback you can bind the result

for (var i = 0; i < result.length; i++) {
        var val = result[i];
        var text = result[i];
        $('#cntryDD').addOption(val, text, false);
     }

I am not sure of how your result or response structure looks like but you can debug that and fill the properties accordingly in value/text field.

You can look at this post .

But the most shortest possible way is

$.each(result, function (key, value) {
$("#cntryDD").append($("<option></option>").val(value.CountryId).html(value.CountryName));
});