How to pass List from backend to front end in ASP.NET

Question

Hi I have been trying for the last hour to connect my c# backend to the front-end to output a list. I have always wondered what about the best way to pass data from backend to front-end.

In my scenario I only want to output a simple list from in mvc, but how do I send my list to the frontend so I can do something simple as outputting all the data in a table with something like a foreach:

foreach (var value in customerList) {
<p>value.Name</p>
}

I have looked at the solution suggested in this link: How to pass List from Controller to View in MVC 3. by archil

but I can’t figure out where to put protected internal ViewResult View( Object model )

So how can I output my list? I know the list contains content as I have put a breakpoint and stepped through it.

This is how my code looks like:

    public List<Customer> customerList = new List<Customer>();
    public ActionResult Index()
    {

        var client = new CustomerAzureAPIApp();
        var response = client.Customer.Get();
        var customers = response;

        foreach (var customer in customers)
        {
            customerList.Add(customer);
        }

        return View();
}

I know I can use ViewBag, but I don’t want to create a new ViewBag for each item in the list, I would rather just send the whole list. Any suggestions?

score 3 · Accepted Answer · answered Mar 31 '16 at 16:18

Well I don’t know about the best solution, but don’t get confused about the code suggested by archil in the link you provided.

You simply could just pass your customerList with the

return View(customerList);

as an argument because that line of code automatically creates a ViewResult object by using the model that renders a view to response.

So in your front-end you could end up doing something like this for your table:

<table
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.Name</td>
        </tr>
    }
</table>

Remember to have “@” before your item because we are dealing with Razor view-engine.

score 1 · Answer 2 · answered Mar 31 '16 at 16:26

As said previously you can use the Model by returning the list in the view

return View(*insert list here*);

and than in your view :

@model List<*insertTypehere*>

and in your foreach you would use the variable name

Model

There's another way by not returning anything in the view and using the Viewbag,in your controller.

Viewbag.TheNameYouWish = *insert list*

and in your view you could use :

@Viewbag.TheNameYouWish

so either

@foreach (var item in Model)

or

@foreach (var item in @Viewbag.TheNameYouWish)

does the job.

score 0 · Answer 3 · answered Mar 31 '16 at 16:16

In you view you have declare the model to which it should be binded, and then iterate over it:

@model  List<Customer>

@foreach (var value in Model) {
<p>value.Name</p>
}

The sceond thing you need to pass your list back to view from action, so change the following :

return View();

to :

 return View(customerList);

How to pass List from backend to front end in ASP.NET

3 Answers3