Question

I have a listbox (multi-select) in my web form that is populated from a web service via AJAX when the form loads. This works great!

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

When select one or more entries, I execute the code below to pass (what I thought were the) values from the listbox above into the action of the controller using the code below.

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');
        }
    });
}

The action in the controller is called but (see below)

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

But the problem I’m having is that the input parameters that are passed in are null. So I added the following line of code to the GetCCRCode() JavaScript method.

alert(catFam);

The result is an alert box that shows a comma separated list as I would expect, but a null is still getting passed in.

Any thoughts?

Thanks!

Answer 1

there is a typo catfam and camfam

also change your js code to:

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');
        }
    });
}

Notice I removed the single quotes in the json data..