根据 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"));
}