根据mvc中的另一个下拉选项填充下拉选项

时间:2017-02-15 17:03:31

标签: jquery json asp.net-mvc asp.net-mvc-4 asp.net-mvc-5

我有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);
    }

1 个答案:

答案 0 :(得分:0)

我修改了你的代码以返回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"));
}