ASP.NET Core

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

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

ASP.NET Core was introduced in 2015 and it hasn't looked back. Microsoft did surprise alot of people then,it wasn't always known for embracing open source policy with regards to its products.

ASP.NET MVC Core is built on the .NET core which is open source. It combines the power of .NET and the flexibility of Model View Controller pattern of development. This is our very firts ASP.NET MVC Core example.

We want to see how to use a custom theme as opposed to the default boring bootstrap theme. We shall then map our menus to our navigation bar and switch through the different pages via the menu items.

We use the materializecss theme. Each of our page shall have a navigation bar with title and menu items, the footer, and the content section with a jumbotron.

Questions this Examples helps answer.

  • How to use different theme in ASP.NET MVC Core.
  • ASP.NET MVC Core Controller and Action method examples.
  • ASP.NET MVC Core switch through different pages.

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 Menu Pages

Project Structure

  • Below is the project structure of our example.

ASP.NET MVC Core Menu Pages Project Structure

Tools Used

Language : C#, HTML,CSS Platform : Backend and Fronted Web IDE : Visual Studio Framework: ASP.NET MVC Core Topics : ASP.NET Core MaterializeCSS, ASP.NET Core routing,menus,

Libraries Used

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

  • MaterializeCSS.

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

1. HomeController.cs

  • 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 of 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 MenuPages.Controllers
{
    public class HomeController : Controller
    {
        /*
         * ACTION TO RETURN HOMEPAGE
         */
        public IActionResult Index()
        {
            ViewData["description"] = "Welcome to Camposha.info. Alongside ProgrammingWizards TV we provide easy to understand Programming guides in various languages.";

            return View();
        }

        /*
         * ACTION TO RETURN ABOUT US PAGE
         */
        public IActionResult About()
        {
            ViewData["description"] = "Camposha.info is a programming tutorials website.Alongside ProgrammingWizards TV, they provide easy to understand programming guides in different programming languages.";

            return View();
        }

        /*
         * ACTION TO RETURN CONTACT US PAGE
         */
        public IActionResult Contact()
        {
            ViewData["descritipm"] = "You can contact camposha.info at our website or via our programmingwizards tv youtube channel.";

            return View();
        }

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

2. 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"] - MenuPages</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>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>

            <ul id="nav-mobile" class="side-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "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>

3. About.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.
@{
    ViewData["Title"] = "About Us";
}

<div class="section no-pad-bot" id="index-banner">
    <div class="container">
        <br><br>
        <h1 class="header center orange-text">@ViewData["title"]</h1>
        <div class="row center">
            <h5 class="header col s12 light">@ViewData["description"]</h5>
        </div>
        <div class="row center">
            <a href="https://camposha.info" id="download-button" class="btn-large waves-effect waves-light orange">View More</a>
        </div>
        <br><br>
    </div>
</div>

4. Contact.cshtml

  • Our Contact 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.
@{
    ViewData["Title"] = "Contact";
}

<div class="section no-pad-bot" id="index-banner">
    <div class="container">
        <br><br>
        <h1 class="header center orange-text">@ViewData["title"]</h1>
        <div class="row center">
            <h5 class="header col s12 light">@ViewData["description"]</h5>
        </div>
        <div class="row center">
            <address>
                One Microsoft Way<br />
                Redmond, WA 98052-6399<br />
                <abbr title="Phone">P:</abbr>
                425.555.0100
            </address>

            <address>
                <strong>Support:</strong> <a href="mailto:[email protected]">[email protected]</a><br />
                <strong>Marketing:</strong> <a href="mailto:[email protected]">[email protected]</a>
            </address>
        </div>
        <br><br>
    </div>
</div>

5. 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.
@{
    ViewData["Title"] = "Home Page";
}

<div class="section no-pad-bot" id="index-banner">
    <div class="container">
        <br><br>
        <h1 class="header center orange-text">ASP.NET Core</h1>
        <div class="row center">
            <h5 class="header col s12 light">@ViewData["description"]</h5>
        </div>
        <div class="row center">
            <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=BW8rXSKZlc4

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

How to pass array data from controller to view in asp.net core mvc.
ASP.NET Core

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

agrey

Leave a Reply

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