使用 JavaScript 从 Bootstrap 下拉列表中的数据库 ASP.NET Web api 获取值

Question

我正在尝试从 json 中的数据库 web api 获取数据，并使用 jQuery 在我的引导模式页面中显示它们。

这是我的html页面

<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>

我完成了一半的 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
     }

})
}

我的响应结构看起来像..

在我的国家模型中，我有这个类

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

在我的国家实体中，我有这个代码

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;

}

然后在我的控制器中我有这个控制器：

public List<CountriesModel> GetCountries()
{

            return countryService.GetCountries();
}

当然，当我运行 /api/countries 时，我会返回 Json，但是如何使用 jQuery 检索它们我的引导页面... javascript...

Answer 1

为选择的 html 分配一个 id

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

</select>

然后在成功回调中可以绑定结果

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

我不确定您的 result 或响应结构是什么样的，但您可以对其进行调试并在值/文本字段中相应地填充属性。

你可以看看这个post。

但最短的方法是

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