How do I pass a list of objects from controller to view?

Question

I have some data (a list of datacontracts) in my controller. I want to show the fields/ values of that list inside my view. How do I do this properly?

This is the code inside my controller where I get the list data:

public List<ShipmentDataContract> Get(long shipmentServiceId)
        {
            Logging.Instance.Info($"Shipment request came in for shipment with ShipmentServiceId = {shipmentServiceId}");
            ShipmentQueryResult shipmentQueryResult = GetShipmentByShipmentServiceIdResult(shipmentServiceId);
            Logging.Instance.Debug($"Shipment queried with ShipmentServiceId = {shipmentServiceId}");
            List<ShipmentDataContract> shipmentDataContracts = GetShipmentsFromResult(shipmentQueryResult);
            Logging.Instance.Info($"Shipment retrieved for shipment with ShipmentServiceId = {shipmentServiceId}.");
            return shipmentDataContracts;
        }

This method returns a list of datacontracts (only one in this case).

I made a test method inside the same controller as well within the Index method:

public ActionResult Index()
        {
            var shipmentDataTest = Get(94);

            ViewBag.shipmentTestData = shipmentDataTest;

            return View();
        }

When I debug the backend, it returns the right shipment (with ID 94).

Now I want to show the shipment information within my view.

I made a variabele in my view:

<script>
    var shipmentTestData = '@ViewBag.shipmentTestData';
</script>

And within my Vue app file assigned the right values:

var Vue = new Vue({
    el: "#vueapp",
    components: ["error"],
    data: {
        shipmentTestData: shipmentTestData
    }
});

Than when I call the data, it will not show the values, but a generic string.

<p>{{ shipmentTestData }}</p>

It returns this:

System.Collections.Generic.List`1[ShipmentDataContract]

Does someone know how to get this fixed? For some reason the variable that I assign is of format string which causes this issue I assume but how can I fix this?

It's this line right here `var shipmentTestData = '@ViewBag.shipmentTestData';` You are setting the `shipmentTestData` var to the List you are returning, then you try to use it as a string, so you get the `.ToString()` value of your List, which is it's type. If you want to display the items inside your list you need to iterate them and display the properties in the View. — Ryan Wilson, Apr 23 '19 at 13:01
Hey, Thanks for your reply. I noticed that, but how do I do this? Since I am using razor to display it in the view. Can't find a way to implement this... — kabouterhuisje, Apr 23 '19 at 13:03
You could just skip setting it to a javascript variable and iterate the list using Razor inside your view and populate your HTML. This post shows how to use `Razor` and `ViewBag` together (https://stackoverflow.com/questions/13508961/how-to-loop-through-two-viewbag-items-on-view-pages-in-mvc-4-0) — Ryan Wilson, Apr 23 '19 at 13:05
But then I can;t access it right? Can you provide me with an example code snippet? — kabouterhuisje, Apr 23 '19 at 13:06
What do you mean, can't access it?? What is it you are trying to accomplish other than showing this data to the user? — Ryan Wilson, Apr 23 '19 at 13:07
I only want to show it to the user, but can't get it to work without setting the variabele. How would you do this? — kabouterhuisje, Apr 23 '19 at 13:08
I added a link above which shows how to iterate a list that belongs to the ViewBag — Ryan Wilson, Apr 23 '19 at 13:09
I see, but ViewBag is not defined in my view when I try that — kabouterhuisje, Apr 23 '19 at 13:10
Then how does this ever work? `var shipmentTestData = '@ViewBag.shipmentTestData';` — Ryan Wilson, Apr 23 '19 at 13:12
Thats in my index file, I need to display it within my template file — kabouterhuisje, Apr 23 '19 at 13:13
Should have specified that. Then you would need to iterate the `shipmentTestData` property of your Vue data. Try this post (https://stackoverflow.com/questions/40864494/looping-through-data-array-properties-in-vuejs) — Ryan Wilson, Apr 23 '19 at 13:15
Yes but that is a string, so if i iterate over that one it will iterate over every letter of the string instead of every object in the list — kabouterhuisje, Apr 23 '19 at 13:16

score 2 · Accepted Answer · answered Apr 23 '19 at 13:55

2

This is the proper way.

Model:

   public class ShipmentData
   {
       Task<List<ShipmentDataContract>> Get(long shipmentServiceId)
       {
          return YourList;
       }

Controller:

  public ActionResult Index()
    {
        var shipmentDataTest = ShipmentData.Get(//index);

        return View(shipmentDataTest);
    }

View:

    @Model YourShipmentModel
    //here you can call Model.variable

answered Apr 23 '19 at 13:55

gowiththestackflow

36
5

But this solution does not work for me because I need to load the data within the template file, instead of in the main view file. I am able to load the data there, and works fine. But the template file is the problem here – kabouterhuisje Apr 23 '19 at 14:03
Are you sure you are returning it right? it shows `return shipmentDataContracts;` in your `Get` function. Shouldn't it be `return shipmentDataContracts[shipmentServiceId];` if you want to return a specific object? else you will get what you described, a list. – gowiththestackflow Apr 23 '19 at 14:13
It needs to be a list yes.. Returning a single one does not work either. The problem is that I can only load the objects within the list in the main view file, and not in the template file.. I am looking for a way to get the full object that the Get method returns inside my view for use.. Rightr now I have a string which is the wrong data type – kabouterhuisje Apr 23 '19 at 21:23

score 0 · Answer 2 · answered Apr 23 '19 at 13:15

0

If you want to use the list as string you can send the result like

 IList<string> someStrings = Get(94); // i assume than get method returns a list of "strings"
 string joined = string.Join(",", someStrings );
 ViewBag.shipmentTestData = joined;

Now you are sending to frotend the list "shipmentDataTest" as a comma separated list. Let me know if this is what you are looking for. Greetings.

answered Apr 23 '19 at 13:15

Sebas

11
4

Hey, Thanks for your reply. I am actually getting a list of data contracts. So a list of objects – kabouterhuisje Apr 23 '19 at 13:21
then you can try JsonConvert.SerializeObject(dataContracts), and return a json string to manipulate with javascript in the cshtml. for this JsonConvert method i use Newtonsoft.Json.10.0.3 – Sebas Apr 23 '19 at 13:27

How do I pass a list of objects from controller to view?

2 Answers2