0

When I use FireBug I see that the selected value for selectedPrdLctn is being set correctly but when I pass it through JSON to my action, it is a null

        $.getJSON('@Url.Action("GetCS")', { cntrParam: selectedPrdLctn }, function (getCS) {

My Action

   public ActionResult GetCS(String[] cntrParam)

The code works if I use a dropDownList. Any idea why I'm not passing in the selection?

Mustang31
  • 282
  • 1
  • 3
  • 15

1 Answers1

2

I suspect that the problem comes from the fact that you haven't set the traditional parameter and jQuery doesn't send the collection in a format that the default model binder is able to understand. If you are using jQuery 1.4 or later you must set this parameter.

For example:

Model:

public class MyViewModel
{
    public string[] SelectedValues { get; set; }
    public IEnumerable<SelectListItem> Items { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            Items = new[] 
            {
                new SelectListItem { Value = "1", Text = "item 1" },
                new SelectListItem { Value = "2", Text = "item 2" },
                new SelectListItem { Value = "3", Text = "item 3" },
                new SelectListItem { Value = "4", Text = "item 4" },
            }
        };
        return View(model);
    }

    public ActionResult GetCS(string[] values)
    {
        return Json(new 
        { 
            message = string.Format("{0} item(s) selected", values.Length) 
        }, JsonRequestBehavior.AllowGet);
    }
}

View:

@model MyViewModel

@Html.ListBoxFor(
    x => x.SelectedValues, 
    Model.Items, 
    new { 
        id = "mylist",
    }
)

@Html.ActionLink("Send AJAX", "getcs", null, new { id = "mylink" })

Script:

$(function () {
    $('#mylink').click(function () {
        var selectedValues = $('#mylist').val();
        $.getJSON(this.href, $.param({ values: selectedValues }, true), function (result) {
            alert(result.message);
        });
        return false;
    });
});

Notice how I use the $.param function and pass it true as second argument which represents the traditional parameter. Try with calling it with true and false and you will see the differences in FireBug and you will understand why it doesn't work if you don't set this parameter.

You could also set this parameter globally for all AJAX requests:

$.ajaxSetup({
    traditional: true
});

and then the following will work:

$.getJSON(this.href, { values: selectedValues }, function (result) {
    alert(result.message);
});
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • Darin, first off thanks for your response. Over the past many months your insight and posts have been super helpful to me. I have used your information on handling dropDownList with jquery/json. All good stuff!! Over the weekend I'll try your recommendations above and will let y'all know. Thanks again for your contributions – Mustang31 Apr 06 '12 at 20:03
  • Darin, I wrote this page based off what you wrote here http://stackoverflow.com/questions/5497524/easiest-way-to-create-a-cascade-dropdown-in-asp-net-mvc-3-with-c-sharp (great post btw), but changed it to handle ListBoxFor. For cascading ListBox I didn't think I needed Ajax since the $.getJSON handles invoking the controller action. Is that true for dropdownlist but not for listbox? – Mustang31 Apr 06 '12 at 20:35
  • @Mustang31, when you use `$('#mylist').val();` where `mylist` is a ListBoxFor, then you get an array of string values instead of a single string value which is the case if it was a DropDownListFor. And since jQuery 1.4, the way arrays are serialized has changed and is no longer compatible with the default model binder in ASP.NET MVC. That's why you need to use the `traditional` parameter. – Darin Dimitrov Apr 06 '12 at 20:37
  • Thanks Darin for the explanation!! I really appreciate it. cheers...will give it a try:) – Mustang31 Apr 06 '12 at 20:50
  • Darin, that did the trick!! You sir are a huge help...thanks again for your assistance. – Mustang31 Apr 06 '12 at 21:16