JQuery AJAX MVC ||将多选列表框中选定值的逗号分隔列表传递到 Controller 操作中

Question

我的 Web 表单中有一个列表框(多选)，当表单加载时，该列表框通过 AJAX 从 Web 服务填充。这太棒了!

<select multiple="multiple" size="8" id="categoryFamily" onchange="GetCCRCode()"></select>
<select multiple="multiple" size="8" id="category" onchange="GetCCRCode()"></select>

当选择一个或多个条目时，我执行下面的代码，使用下面的代码将(我认为的)值从上面的列表框中传递到 Controller 的操作中。

function GetCCRCode() {
    $('#ccrCode').html('');
    var catfam = $('#categoryFamily').val();
    var cat = $('#category').val();

    $.ajax({
        type: "POST",
        url: "/Home/LoadCCRCode/",
        data: { 'catfam': catfam, 'cat': cat },
        success: function (results) {
            alert('success');
        },
        error: function () {
            alert('error');
        }
    });
}

Controller 中的操作被调用但是(见下文)

    [AcceptVerbs("POST")]
    public string LoadCCRCode(string catfam, string cat)
    {
        return string.Empty;
    }

但是我遇到的问题是传入的输入参数为空。因此，我将以下代码行添加到 GetCCRCode() JavaScript 方法中。

alert(catFam);

结果是一个警报框，显示了一个逗号分隔的列表，正如我所期望的那样，但仍然传递了一个空值。

有什么想法吗？

谢谢!

Answer 1

catfam 和 camfam 存在拼写错误

还将你的js代码更改为:

function GetCCRCode() {
    $('#ccrCode').html('');
    var catfam = $('#categoryFamily').val();
    var cat = $('#category').val();

    $.ajax({
        type: "POST",
        url: "/Home/LoadCCRCode/",
        data: { catfam: catfam.ToString(), cat: cat.ToString() },
        success: function (results) {
            alert('success');
        },
        error: function () {
            alert('error');
        }
    });
}

注意我删除了 json 数据中的单引号..