如何通過 ajax 和 MVC controller 正確填充下拉列表

Question

我已經為這個答案搜索了很多，但找不到太多能滿足我需要的東西。

我有一些數據存儲在一個數據庫表中，我想用這些數據填充某些下拉列表。 在 document.ready 上，我有一個 AJAX 調用 controller 根據我發送的參數請求數據。 controller 返回數據為 Json。 我是 Json 過程的新手，所以，弄清楚它返回后該怎么做是我卡住的地方。

我能夠在 controller 返回時在警報或 console.log 中顯示返回的數據，所以我知道那里有正確的值，但我不知道如何用這些值填充下拉列表。 所有的數據，大約是 5 到 10 個整數。 （我知道，不是以整數形式返回，但它們是 65、70、2、10、11 之類的東西）我嘗試了一些不同的選項，但似乎沒有任何效果。

我可以 static 數組中的值，這實際上將填充下拉列表。 我試過用返回的數據填充同一個數組，但沒有成功。 這是 ajax 調用：

//Fill symbols drop down list
function returnSymbols(cc) {

var sendData = JSON.stringify({ 'ul': cc });
$.ajax({
    url: '/Trucking/returnSymbols',
    type: 'POST',
    contentType: 'application/json',
    data: sendData,
    success: function (data) {
        //alert('success');
        console.log('success, yes');
        alert(data);
        var numbers = [];
        var obj = jQuery.parseJSON(data);
       /* If I do this and static these, it does work 
          var numbers = [1, 2, 3, 4, 5]  */
        var option = '';
        for (var i = 0; i < numbers.length; i++) {
            option += '<option value="' + numbers[i] + '">' + numbers[i] + '</option>';
        }
        $('#ddlMcalSymbols').append(option); //fill ddl with these values. 

    },
    error: function () {
        //alert('Error');
        console.log('Error');
    }
});

}

重申一下，我已經嘗試過 numbers.push(obj) 甚至。 .push(data)，但那些不起作用。 由於 controller 返回 Json 值，我的印象是我需要解析 Json 才能對其進行任何操作。 這是 controller 如果它有幫助的話：

    [HttpPost]
    public ActionResult returnSymbols(string ul)
    {
        List<Get_CIF_SymbolsVM> symbols;

        Guid newGuid = Guid.Parse(ul); //parse param as Guid

        using (TruckingDb db = new TruckingDb())
        {
            symbols = db.GetSymbols.ToArray().OrderBy(x => x.RID).Select(x => new Get_CIF_SymbolsVM(x)).ToList();

        }
        var syms = (from s in symbols
                    where s.UniqLineType == newGuid
                    select s.SymbolCode).Distinct();

        return Json(syms, JsonRequestBehavior.AllowGet);
    }

任何幫助將不勝感激。

編輯：更新過程以解釋更多。

取得了一些成功，但仍然不正確。

這是 ajax 調用。 我只改變了一些項目。 它帶回了正確的數據，但它將所有數組項顯示為一行。 我需要數組中的每個值作為下拉列表中的單個值。

 var sendData = JSON.stringify({ 'ul': cc });
$.ajax({
    url: '/Trucking/returnSymbols',
    type: 'POST',
    contentType: 'application/json',
    data: sendData,
    success: function (data) {
        //alert('success');
        console.log('success, yes');
        alert(data);
        var numbers = [];
        numbers.push(data);

        var option = '';
       //Added two for loops to show what I've tried. 
       for (var i = 0; i < numbers.length; i++) {
            option += '<option value="' + numbers[i] + '">' + numbers[i] + '</option><br>';
        }
        $('#ddlMcalSymbols').append(option);

       //Tried this option to fill ddl
        for (var i = 0; i < numbers.length; i++) {
            option = '<option value="' + numbers[i] + '">' + numbers[i] + '</option><br>';
            $('#ddlMcalSymbols').append(option);
        }
      //This Jquery foreach only returns one value to the ddl
      $.each(numbers, function (i, value) {
            console.log(value);
            option += '<option value="' + value[i] + '">' + value[i] + '</option>';
        });
        $('#ddlMcalSymbols').append(option); 

    },
    error: function () {
        //alert('Error');
        console.log('Error');
    }
});

它帶回了數據，但在下拉列表中，上面的兩個 for 循環都將 ddl 填充為一個看起來很長的字符串。 “61,62,64,66,70,71,72”.. 它們不會顯示為單個 select 值。

Answer 1

我嘗試了部分代碼，您似乎忽略了var numbers從不獲取值。

我通常也更喜歡創建 jquery 對象而不是手動編譯 html； 這種方式更容易開發。 代碼失敗並提供更多細節。

類似的東西：

var listEl=$('#ddlMcalSymbols');
for (var key in obj) {
   jQuery('<option value="' + obj[key] + '">' + obj[key] + '</option>').appendTo(listEl);
}

但更好的秩序

Answer 2

制定了一個解決方案，雖然它起作用，但它的 CSS 有一些奇怪的行為。 我正在使用一個名為 bootstrap-select 的多選下拉菜單。 有一個.js和.css文件。 我需要使用數據庫中的值填充多選下拉列表，而不是使用該方法對它們進行硬編碼。

我使用帖子 ajax 調用將參數發送到 controller ，它會根據它檢索我需要的值。 我不知道這是引導選擇還是多選的限制，但它不喜歡顯示 Json 數據。 我的 ajax 調用已經在解析 Json，所以不是這樣。 經過多次嘗試和試驗，我發現唯一真正有效的是使用 int 數組。 當我擁有字符串數組時，它會將所有內容顯示為一個長字符串或僅一個值。 此外，即使現在它可以按我的意願工作，每次我對正在處理的 .js 文件進行更改時，我都必須重新加載頁面。 這搞砸了 bootstrap-select.css 文件。 不知道為什么。 發生的情況是每重新加載 3 到 4 個頁面，這些值就在下拉列表之外，並且像一堆不可讀的文本一樣平滑在一起。 （見上圖）我按 ctrl + shft + R 清除緩存的鉻 css 並返回到它的外觀和 ZC1C425268E68385D1AB5074C17A94F1。 長篇大論，但確實如此。 這是我的 ajax 通話，帶有一些評論，所以你可以看到我做了什么。 我確信可能有更優雅和更直接的方法可以做到這一點，但這是對我已有的改進。 也許它會幫助別人。

function returnSymbols(cc) {

var sendData = JSON.stringify({ 'ul': cc });
$.ajax({
    url: '/Trucking/returnSymbols',
    type: 'POST',
    contentType: 'application/json',
    data: sendData,
    success: function (data) {
        var num = [];
        var num1 = [];

        //Push all returned values into num array
        $.each(data, function (index, value) {
            num.push(value);
        });
        console.log(num); // console out to ensure values have been pushed

        //convert the string array into an int array
        for (var i in num) {
            num1[i] = parseInt(num[i]);
        }
        console.log(num1); //conosle out to ensure values have parsed correctly
        fillddl(num1); // send int array to fill drop down func
    },
    error: function () {
        //alert('Error');
        console.log('Error');
    }
 });
}

然后 Function 將值實際發送到下拉列表。 與我在其他方法中發現的非常相似。

function fillddl(sym) 
{
  var s = '';
  for (var i = 0; i < sym.length; i++) 
  {
    s += '<option value="' + sym[i] + '">' + sym[i] + '</option>';
  }
   $(".ddlMcalSymbols").html(s);
}

Answer 3

你可以做這樣的事情

在行動方法

[HttpPost]
public ActionResult getCicitesAction(int provinceId)
{
     var cities = db.cities.Where(a => a.provinceId == provinceId).Select(a => "<option value='" + a.cityId + "'>" + a.cityName + "'</option>'";

     return Content(String.Join("", cities));
}

ajax 調用將是這樣的：

$("province_dll").change(function(){
    $.ajax({
         url: 'getCitiesController/getCitiesAction',
         type: 'post',
         data: {
               provinceId: provinceIdVar
         }
    }).done(function(response){
         $("cities_dll").html(response);
    });