根據mvc中另一個下拉選項填充下拉選項

Question

我有2個下拉選項（即）mutualExcParam。它有3個選項。根據選擇的這個選項，需要填充另一個下拉列表（即agencyRetrieve）。 這是通過JSON請求完成的，對於更少的記錄正常工作。如果記錄越來越多，數量> 500，則需要加載時間。是否有任何其他的方式做同樣的性能時，我環通過它..

$(document).ready(function() { 
$('.mutualExcParam').change(function() { // calling by class name on 1st dropdown 
    var agencyRetrieveId = $(this).attr('id') + '_'; // 2nd dropdown id 

    $.ajax({ 
     type: "POST", 
     contentType: 'application/json', 
     url: "../Report/FillAgencyValue", 
     data: JSON.stringify({ agencyId: agencyId}), 
     success: function (data) { 
      $('#' + agencyRetrieveId).html(''); 
      var optionhtml1 = '<option value="All">Select All</option>'; 
      $('#' + agencyRetrieveId).append(optionhtml1); 
      $(data).each(function() { 
      $('#' + agencyRetrieveId).append($("<option></option>").val(this.Value).html(this.Text));  
      }); 
      $(".selectpicker").selectpicker('refresh'); 
     } 
    }); 
}); 
}); 

[HttpPost] 
    public ActionResult FillAgencyValue(int agencyId, string fromDate, string toDate, int salesArea, string[] salesGroup) 
    { 
     AppCode.CommonCommands commonCommands = new AppCode.CommonCommands(); 

     PopulateControlData populateControlData = new PopulateControlData(); 
     // Get all Sales Area 
     DataTable dtsalesArea = commonCommands.GetAgencyDropdownData(agencyId, fromDate, toDate, salesArea, salesGroup); 

     populateControlData.agencyValues = new List<SelectListItem>(); 
     if (dtsalesArea.Rows.Count > 0) 
     { 

      populateControlData.agencyValues = (from DataRow row in dtsalesArea.Rows 
               select new SelectListItem 
               { 
                Text = row["ParameterLabel"].ToString(), 
                Value = row["ParameterValue"].ToString() 
               }).ToList(); 
     } 
     return Json(populateControlData.agencyValues, JsonRequestBehavior.AllowGet); 
    } 

Answer 1

我已經修改了你的代碼返回HTML的影響。我沒有包含select all選項，可以通過在控制器方法返回之前執行插入操作來添加此選項。

我沒有測試代碼，它只是概念。

$(document).ready(function() { 
$('.mutualExcParam').change(function() { // calling by class name on 1st dropdown 
    var agencyRetrieveId = $(this).attr('id') + '_'; // 2nd dropdown id 

    $.ajax({ 
     type: "POST", 
     contentType: 'application/json', 
     url: "../Report/FillAgencyValue", 
     data: { agencyId: agencyId}, 
     success: function (data) { 
      $('#' + agencyRetrieveId).empty(); 
      $('#' + agencyRetrieveId).html(data); 
     } 
    }); 
}); 
}); 

[HttpPost] 
public ActionResult FillAgencyValue(int agencyId, string fromDate, string toDate, int salesArea, string[] salesGroup) 
{ 
    AppCode.CommonCommands commonCommands = new AppCode.CommonCommands(); 

    PopulateControlData populateControlData = new PopulateControlData(); 
    // Get all Sales Area 
    DataTable dtsalesArea = commonCommands.GetAgencyDropdownData(agencyId, fromDate, toDate, salesArea, salesGroup); 

    List<string> lst = new List<string>(); 
    if (dtsalesArea.Rows.Count > 0) 
    { 

     lst = (from DataRow row in dtsalesArea.Rows 
       select new string.Format("<option value='{0}'>{1}</option>", row["ParameterValue"], row["ParameterLabel"])).ToList(); 
    } 
    return Content(string.Join(lst, "\n")); 
}