ASP.NET Core

ASP.NET Core MVC – Pass Array From Controller To View

agrey
How to pass array data from controller to view in asp.net core mvc.

In the previous example we introduced using Materializecss theme with our ASP.NET Core MVC webapp and switch through the menu items and switch through different pages. In this example we see how to pass data from Controller to the view. Specifically we pass a list or array and bind it to a listview in our html view We use the ViewData dictionary to pass data. We then loop through the array of data in our razor view and show the data in materialize list.

Questions this Examples helps answer.

  • How to pass array data from controller to view in asp.net core mvc.
  • ASP.NET MVC Core example.
  • ASP.NET Core MVC passing data via ViewData dictionary.
  • Passing data via ViewBag object to view.
  • ASP.NET MVC Core Controller and Action method examples.
Asssumptions.

We assume that you have visual studio and ASP.NET Core installed. We use of the built in templates and customize them. Watch the video tutorial below for more info.

Screenshot

  • Here's the screenshot of the project.

ASP.NET MVC Core Pass Data to List

Project Structure

  • Below is the project structure of our example.

ASP.NET MVC Core Pass Data to List

Tools Used

Language : C#, HTML,CSS Framework: ASP.NET Core MVC Platform : Backend and Fronted Web IDE : Visual Studio Topics : ViewBag ASP.NET Core,ViewData,Passing List ASP.NET MVC Core

Libraries Used

These are the third party CSS and JS used in this project.

  • MaterializeCSS.

Source Code

Lets have a look at the project's source code.

  • Our Controller class.
  • Derives from he ASPNETCore.MVC.Controller base class.
  • Our public methods are action methods, routed to different seo friendly urls.
  • They return ActionResult objects. By convention, they are mapped to views with similar names.
  • Uses a ViewData dictionary or ViewBag to pass data from controller to our views.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace ListPass.Controllers
{
    public class HomeController : Controller
    {
        /*
         * ACTION TO RETURN HOMEPAGE
         */
        public IActionResult Index()
        {
            ViewData["description"] = "Our universe is amazing. It has over 100 billion galaxies. Each galaxy has over 100 billion stars. Just remarkable.";
            string[] spacecrafts = {"Whirlpool","Messier 81","Cosmos Redshift","NGC 6872","Andromeda","Milky Way","Sombrero","StarBust","Centarus A"};
            ViewData["spacecrafts"] = spacecrafts;
            return View();
        }

        public IActionResult Error()
        {
            return View();
        }
    }
}

Layout.cshtml

  • Our master page/view.
  • It's shared and other public views shall derive from it.
  • It defines the header section,footer section and content section for the children. Then it calls the RenderBody() to provide the space for the children to show themselves.
  • We also show menu items here. Take note we have applied the materializecss them here.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Camposha.info</title>

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/materialize/dist/css/materialize.min.css" />
        <link rel="stylesheet" href="~/css/style.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/style.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <nav class="light-blue lighten-1" role="navigation">
        <div class="nav-wrapper container">
            @Html.ActionLink("Camposha.info", "Index", "Home", new { area = "" }, new { @class = "brand-logo" })

            <ul class="right hide-on-med-and-down">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>

            </ul>

            <ul id="nav-mobile" class="side-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>

            </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
    </nav>

    <div class="container">
        @RenderBody()
        <hr />
    </div>
    <footer class="page-footer orange">
        <div class="container">
            <div class="row">
                <div class="col l3 s12">
                    <h5 class="white-text">Company Bio</h5>
                    <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job support and continue development on this project.</p>

                </div>
                <div class="col l3 s12">
                    <h5 class="white-text">Languages</h5>
                    <ul>
                        <li><a class="white-text" href="#!">C#</a></li>
                        <li><a class="white-text" href="#!">Java</a></li>
                        <li><a class="white-text" href="#!">PHP</a></li>
                        <li><a class="white-text" href="#!">Python</a></li>
                    </ul>
                </div>
                <div class="col l3 s12">
                    <h5 class="white-text">Categories</h5>
                    <ul>
                        <li><a class="white-text" href="#!">Backend Web</a></li>
                        <li><a class="white-text" href="#!">Mobile</a></li>
                        <li><a class="white-text" href="#!">Desktop</a></li>
                        <li><a class="white-text" href="#!">Frontend Web</a></li>
                    </ul>
                </div>
            </div>
        </div>

    </footer>

    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/materialize/dist/js/materialize.min.js"></script>
        <script src="~/lib/materialize/dist/js/init.js"></script>

        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
                asp-fallback-src="~/lib/materialize/dist/js/materialize.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml

  • Our About Us page.
  • Is a razor view page. It can understand both html and c# code.
  • C# code is written in expressions beginning with "@" for inline code or "@{}" for block code.
  • Data is passed from the controller using the ViewData dictionary or ViewBag object. These are dynamic types and share the same dictionary for storage.
  • In this case case we pass an array of strings from the conrtoller to index.cshtml view.
@{
    ViewData["Title"] = "Home Page";
}

<div class="section no-pad-bot" id="index-banner">
    <div class="container">
        <br><br>
        <h1 class="header center orange-text">Amazing Universe</h1>
        <div class="row center">
            <h5 class="header col s12 light">@ViewData["description"]</h5>
        </div>
        <div class="row">
            <ul class="collection with-header">
                <li class="collection-header"><h4>Galaxies</h4></li>
                @foreach (string s in ViewBag.Spacecrafts)
                {
                    <li class="collection-item"><a href="#!">@s</a> </li>
                }

            </ul>
            <a href="https://camposha.info" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>
        </div>
        <br><br>
    </div>
</div>

Video/Demo

Below is the video tutorial for this project. https://www.youtube.com/watch?v=bRX_mTSFOS4

Download

Download the full project below: Download

How To Run

  1. Download the source code above.
  2. Extract it.
  3. In your Visual Studio: File -> Open ->Project/Solution.
  4. Choose the Solution location.
  5. Open
  6. That's it, you've imported the project to your visual studio.

Related Posts

ASP.NET MVC Core Controller and Action method examples.
ASP.NET Core

ASP.NET Core MVC – Materializecss – Navigate Menus and Pages

agrey

Leave a Reply

Your email address will not be published. Required fields are marked *