ASP.NET MVC send List collection from my View to a Controller

Question

I have an application in ASP.NET where I want to pass this list of objects to my Controller. Right now what the application is doing is pop

Answer 1

So your main problem is that you are trying to use an action (which is a link, an anchor tag) to pass a list to the controller. But an anchor tag is a "Get" request and you normally don't pass lists via Gets (yes, it is possible, but generally not advised). It would be better for you to use a form post for this. Here is a basic outline:

<!-- red cars -->
<form action="/bar/index/red" method="post">

    @foreach(var car in Model.Where(c => c.Color == "red"))
    {
        <input type="hidden" name="carnames" value="@car.CarName" />
    }
    <button class="btn btn-primary" type="submit">Red Cars</button>

</form>

<!-- green cars -->
<form action="/bar/index/green" method="post">

    @foreach(var car in Model.Where(c => c.Color == "green"))
    {
        <input type="hidden" name="carnames" value="@car.CarName" />
    }
    <button class="btn btn-primary" type="submit">Green Cars</button>

</form>

<!-- blue cars -->
<form action="/bar/index/blue" method="post">

    @foreach(var car in Model.Where(c => c.Color == "blue"))
    {
        <input type="hidden" name="carnames" value="@car.CarName" />
    }
    <button class="btn btn-primary" type="submit">Blue Cars</button>

</form>

<!-- yeller cars -->
<form action="/bar/index/yellow" method="post">

    @foreach(var car in Model.Where(c => c.Color == "yellow"))
    {
        <input type="hidden" name="carnames" value="@car.CarName" />
    }
    <button class="btn btn-primary" type="submit">Yellow Cars</button>

</form>

This creates a form for each color so when you click the submit button, only the cars from that one form are sent in the post. Note that the input name is always the same. That is how you get them wrapped together in a list.

In your controller, use something like this:

[HttpPost, Route("bar/index/{color}")]
public IActionResult Index(string color, List<string> carNames)
{
    // do stuff...

    return View();
}

The color variable will get picked up from the url and the carNames will be pulled in from the post.

EDIT: In the comments the added question was essentially "what if I want the car name and the color on the object, so a List<Foo>, to be posted?

Posting a list of complex objects is a bit messier but here is what you need in the view:

<!-- red cars -->
<form action="/stuff/cars/red" method="post">
    @{
        var cars = Model.Where(c => c.Color == "red").ToList();
        for (var i = 0; i < cars.Count; i++)
        {
            <text>
            <input type="hidden" name="cars.Index" value="@i" />
            <input type="hidden" name="cars[@i].CarName" value="@cars[i].CarName" />
            <input type="hidden" name="cars[@i].Color" value="@cars[i].Color" />
            </text>
        }
    }
    <button class="btn btn-primary" type="submit">Red Cars</button>

</form>

Switching to a regular for loop gives us an index variable which we use to tell the form which pair of values belongs together. Notice also that I actually created a temp var cars = ... above it so that I can loop through the smaller list. Now just change the other colors to match this code and change your controller to accept string color, List<Foo> cars and you are all set!

Edit 2: If you want to do this in ajax instead then create an object in the javascript:

var cars = [
    { 'CarName': 'name', 'Color': 'color' },
    { 'CarName': 'name', 'Color': 'color' },
    { 'CarName': 'name', 'Color': 'color' },
    { 'CarName': 'name', 'Color': 'color' },
    { 'CarName': 'name', 'Color': 'color' }
];

You can populate the actual name and color various ways using jQuery. Then use ajax post:

$(document).ready(function()
{
    $('#ajaxPost').click(function ()
    {
        $.ajax(
        {
            type: 'POST',
            url: '/stuff/cars',
            contentType: "application/json",
            data: JSON.stringify(cars),
            success: function (data)
            {
                // do stuff
            },
            error: function (e)
            {
                alert(e);

            }

        });
    });
});

Note: This will be a different endpoint in the controller from the previous one. Depending on which version of .net you are using things will act slightly differently.

New controller action:

[HttpPost, Route("stuff/cars/")]
public IActionResult Cars2([FromBody] List<FooViewModel> cars)
{
    // do stuff...

    return View();
}

Notice the [FromBody] tag, that is necessary in .net Core, as is the JSON.stringify in the ajax call. If you aren't sure which version you are on, alternate adding/removing each of those. Core can be a little finicky...