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 populating a list via sql query and then loads said list to the view. Up next, I divvy up the list into 4 color categories based on the data I get: red, blue, green and yellow (respectively). I display the count for each of them on 4 <divs>. Each div is its own ActionLink and right now sends a string to a Controller containing the color name.

The Controller then takes the string and compares it against a query where it returns the list objects that belong to that color category; then I do whatever I want to that list.

But my issue is that I am forced to do this data pull over and over and it takes too long as is. Is there a way for me to just load up the list once then pass it to my controller so I am not stuck waiting for my query to finish loading?

Here is my Model:

using System.Collections.Generic;

namespace Foo.Models
{
  public class FooViewModel
  {
    public List<Foo> FooCollection = new List<Foo>();
    /*Contains two properties
      string CarName {get; set;}
      string Color   {get; set;}
      List<Features> Features = new List<Features>();
    */
  }
}

My View

    @model Foo.Models.FooViewModel
    @{
var RedCars = Model.FooCollection.Where(c => c.Color == "Red").ToList();
    ... //{yellow, blue, green}
}
    <div id="FooCollection">
      <section class="no-padding-top no-padding-bottom">
        <div class="container-fluid">
          <div class="public-user-block block">
            <div class="row d-flex align-items-center">

              <!--Red Cars-->
                @using (Ajax.BeginForm("../Bar/Index/Red", null,
new AjaxOptions
{
HttpMethod = "post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "CarsList"
}, new { id = "RedCarsForm" }))
  {
        <input type="hidden" name="Cars" value="@RedCars" />
          <div id="status-container" class="col-lg-3 d-flex align-items-center">
            <button type="submit">@RedAlerts.Count</button>
            <strong>Red Cars</strong>
          </div>

          }
          <!-- same structure for yellow, green, blue --!>
      </section>
    </div>

My Controller:

public ActionResult Index()
{

   foreach (var car in db.database.Db_GetCars())
   {
      model.FooCollection.Add(new Foo()
      {
         CarName = car.CarName,
         Color= car.Color
      });
    }
    return View(model);
}  

Destination Controller:

    namespace Foo.Controllers
    {
      public class BarController: Controller
      {
        BarViewModel model = new BarViewModel();

[HttpPost, Route("/Bar/Index/{color}")]
        public ActionResult Index(List<Foo> Cars)
        {
          //logic goes here

          return View(model);
        }
      }
    }

My desired output is to send the complete List<Foo> object to my Destination Controller. But right now I am getting a value count of zero (0) when it gets to the controller. Can anyone see what I am doing wrong? Many thanks in advance.

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...