Pass Comma Separated Value to ASP.NET MVC Action Method

Question

Ok so I basically have an ajax call retrieving values from html select multiple tag ... Thing is I'm not able to pass these values into my controller (I'm getting a null reference in my controller)

Check types: $('select#opt2').val() in the ajax call. avion: $('select#opt1').val() isn't a multiple values so it works fine. When I alert($('select#opt2').val()) I get values like: GC,VSG,AA7... (They are separated by ",")

Here's my code:

AJAX

$('select#opt2').change(function () {
            $.ajax({
                url: '@Url.Action("RetournerPostes", "Home", new { area = "Avion" })',
                data: { avion: $('select#opt1').val(), types: $('select#opt2').val() },
                type: 'POST',
                dataType: 'JSON',
            //Rest of code

CONTROLLER This is where I get the null reference for variable "types"

[HttpPost]
    public async Task<ActionResult> RetournerPostes(string avion,List<string> types)
    {
       //Rest of action

Tell me if you need any more information. Thanks!

EDIT

Added fiddle: https://jsfiddle.net/f73jxo5v/

val() returns an array for multiple. However output of $('select#opt2').val() seems to be string try to convert it to array. try types: $('select#opt2').val().split(',') once — Satpal
– Satpal, Commented Aug 17, 2017 at 12:52

Win · Accepted Answer · 2017-08-17 14:12:45Z

If you bind comma separated value (CSV) a lot, the easiest and maintainable way is to create a custom model binder called CommaSeparatedModelBinder.

It is not common to capture select's change event, and make an Ajax call whenever user selects an option. But it is up to you.

[HttpGet]
public ActionResult RetournerPostes()
{
    return View();
}

[HttpPost]
public ActionResult RetournerPostes(string avion, 
    [ModelBinder(typeof(CommaSeparatedModelBinder))] int[] types)
{
    return View();
}

View

@using (Html.BeginForm())
{
    <select id="opt1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

    <select id="opt2" multiple>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <input type="submit" value="Submit"/>
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $('select#opt2').change(function () {
        var data = JSON.stringify({ avion: $('select#opt1').val(), types: $('select#opt2').val() });
        console.log(data);
        $.ajax({
            url: '@Url.Action("RetournerPostes", "Home")',
            data: data,
            type: 'POST',
            contentType: "application/json",
            dataType: 'JSON',
            success: function(msg) {
                console.log(msg);
            }
        });
    });
</script>

CommaSeparatedModelBinder

public class CommaSeparatedModelBinder : DefaultModelBinder
{
    private static readonly MethodInfo ToArrayMethod = typeof(Enumerable).GetMethod("ToArray");

    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        return BindCsv(bindingContext.ModelType, bindingContext.ModelName, bindingContext)
                ?? base.BindModel(controllerContext, bindingContext);
    }

    protected override object GetPropertyValue(ControllerContext controllerContext, ModelBindingContext bindingContext, System.ComponentModel.PropertyDescriptor propertyDescriptor, IModelBinder propertyBinder)
    {
        return BindCsv(propertyDescriptor.PropertyType, propertyDescriptor.Name, bindingContext)
                ?? base.GetPropertyValue(controllerContext, bindingContext, propertyDescriptor, propertyBinder);
    }

    private object BindCsv(Type type, string name, ModelBindingContext bindingContext)
    {
        if (type.GetInterface(typeof(IEnumerable).Name) != null)
        {
            var actualValue = bindingContext.ValueProvider.GetValue(name);

            if (actualValue != null)
            {
                var valueType = type.GetElementType() ?? type.GetGenericArguments().FirstOrDefault();

                if (valueType != null && valueType.GetInterface(typeof(IConvertible).Name) != null)
                {
                    var list = (IList)Activator.CreateInstance(typeof(List<>).MakeGenericType(valueType));

                    foreach (var splitValue in actualValue.AttemptedValue.Split(new[] { ',' }))
                    {
                        if (!String.IsNullOrWhiteSpace(splitValue))
                            list.Add(Convert.ChangeType(splitValue, valueType));
                    }

                    if (type.IsArray)
                        return ToArrayMethod.MakeGenericMethod(valueType).Invoke(this, new[] { list });

                    return list;
                }
            }
        }

        return null;
    }
}

Original Source: CommaSeparatedModelBinder.cs

Wow thanks for the example and the time you put into this! I'm trying it before closing the case but thanks again man!
Whenever possible please include contentType: "application/json" and JSON.stringify to ensure data is in Json format.

Barr J · Accepted Answer · 2017-08-17 12:56:47Z

1

That's because what you are passing as types, are a string object and not as string list.

You will have to cast the types variable into an array of string:

var array = string.split(',');

and pass it as an array to the method, not as a list:

[HttpPost]
    public async Task<ActionResult> RetournerPostes(string avion, string[] types)
    {

answered Aug 17, 2017 at 12:56

Barr J

11k2 gold badges31 silver badges49 bronze badges

6 Comments

J. Lavoie Over a year ago

var array = $('select#opt2').val().split(',') doesn't work, it tells me it doesn't generate the property

Barr J Over a year ago

types: $('select#opt2').val().split(',')

J. Lavoie Over a year ago

it does the same :/

Barr J Over a year ago

then types: $('select#opt2').val().split(' '); this way or the other, you will have to use split.

J. Lavoie Over a year ago

I'm only trying to say that when I try to use split I get a javascript error

|

Mohd Ismail Siddiqui · Accepted Answer · 2017-08-17 14:11:25Z

1

Hope this will sort out your problem:

       $('select#opt2').change(function () {
        var stringArray = new Array();
        stringArray =$("#opt2>option").map(function() { return $(this).text(); }).get();
        var selectedValue = $('select#opt2').val();
        $.ajax({
            url: '@Url.Action("RetournerPostes", "Home", new { area = "Avion" })',
            data: {avion: selectedValue, types: stringArray},
            type: 'POST',
            dataType: 'JSON',
        //Rest Code

edited Aug 17, 2017 at 14:11

answered Aug 17, 2017 at 13:50

Mohd Ismail Siddiqui

6788 silver badges22 bronze badges

3 Comments

J. Lavoie Over a year ago

So I get no error but "avion" and "types" are null in my controller

J. Lavoie Over a year ago

Yes exact same except I changed var selectedValue = $('select#opt2').val(); for var selectedValue = $('select#opt1').val();

Mohd Ismail Siddiqui Over a year ago

I have changed code for you. hope this will resolve your problem

peter.stankowski · Accepted Answer · 2017-08-17 13:24:46Z

0

if your types = "GC,VSG,AA7" then you are passing a string, not a list of strings, so:

public async Task<ActionResult> RetournerPostes(string avion, string types){
    var myArray = types.Split(','); // split into an array
}

answered Aug 17, 2017 at 13:24

peter.stankowski

866 bronze badges

1 Comment

J. Lavoie Over a year ago

Tried it, this way I was not even getting to my controller method

Sulyman · Accepted Answer · 2017-08-17 13:41:36Z

0

types= []
var sel = $('#selectID');
for (var i=0, n=sel.options.length;i<n;i++) { // looping over the options
  if (sel.options[i].value) types.push(sel.options[i].value);
}

then pass types to your controller without changing ur server code

answered Aug 17, 2017 at 13:41

Sulyman

4605 silver badges14 bronze badges

1 Comment

J. Lavoie Over a year ago

I'm getting an error telling me that I can't get the length of an undefined object

Collectives™ on Stack Overflow

Pass Comma Separated Value to ASP.NET MVC Action Method

5 Answers 5

View

CommaSeparatedModelBinder

2 Comments

6 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

View

CommaSeparatedModelBinder

2 Comments

6 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related