ASP.NET WebPages : Materializecss - Cards List From Array


The simplest way to create web applications targetting .NET is not Webforms nor ASP.NET Core MVC.

It's actually ASP.NET webpages,sometimes called Razor.

With this we are able to use Razor syntax and develope applications as easily as you can with languages like PHP. Yet we have the full power of .NET powering applications meaning that we can use features like LINQ and ADO.NET and the rich System.Collections framework among others.

In this example we will see how easy it is. We are going to see how to populate a ListView/GridView with items from an array. We basically have a two-column Materializecss list and we populate it with our data from a string array.

Then when our Materializecss Cards Action buttons are clicked, we show the clicked items in a dialog.

Here's what we will build:

ASP.NET WebPages List

Create ASP.NET Empty web application

First we need to create an empty ASP.NET web application:

Create ASP.NET Web app

Make sure you choose empty asp.net web app:

Choose Empty

_Layout.cshtml

This is our master page.Remember we are using materializecss as our html frontend library.

<!DOCTYPE html>
<html>
<head>
    <title>@Page.Title</title>

    <link href="~/Assets/css/materialize.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Assets/css/site.css" rel="stylesheet" type="text/css" />

    @RenderSection("head", required: false)
</head>
<body>
    <nav class="light-blue lighten-1" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="~/" class="brand-logo">Camposha.info</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="~/">Home</a></li>
                <li><a href="~/about">About</a></li>
            </ul>
            <a href="" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
    </nav>

    <div class="container">
        @RenderBody()
        <br />
        <br />
        <br />
        <br />
    </div>
    <footer class="page-footer orange">
        <div class="container">
        </div>
    </footer>
</body>
</html>

index.cshtml

This is our index page:

@{ 
    Layout = "~/_Layout.cshtml";
    Page.Title = "Camposha.info";
    Page.Header = "Amazing Universe";
    Page.SubHeader = "Nebulae in Universe";

    String[] nebulae =
            {
                "Horse Head", "Black Widow", "Ghost Head", "Cat's Eye", "Elephant's Trunk", "Helix", "Rosette","Snake","Bernad 68",
                "Ant", "Orion", "Butterfly", "Eagle", "Own", "Ring", "Pelican", "Flame", "Witch Head", "Bumerang"
            };
}
<div>
    <h3 class="header center orange-text">@Page.Header.</h3>
    <h5 class="header center light-blue-text">@Page.SubHeader.</h5>
    <div class="row">
        <ul class="collection with-header">
            @foreach (string nebular in nebulae)
            {
                <li>
                    <div class="card blue-grey darken-1">
                        <div class="card-content white-text">
                            <span class="card-title">@nebular</span>This is the Description for @nebular
                        </div>
                        <div class="card-action">
                            <a onclick="alert('@nebular shown')">Show</a>
                            <a onclick="alert('@nebular viewed')">View</a>
                        </div>
                    </div>
                </li>
            }

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

site.css

Here's our css file:

ul {
    list-style: none;
}
ul li {
    width: 50%;
    float: left;
    border-right: 1px dotted #CCC;
    padding: 2px;
}

Explanations

Once you've created an empty ASP.NET webpages project, right click your project and add a _Layout.cshtml template as well as a Web Page.cshtml.

The Layout is our master page. So first we specify the html,head,body tags.

Specify the Page Title

We will specify the page title. WebPageBase.Page is a dynamic class that allows us to set and get the webpage properties we can easily share among our razor as well as Layout pages.

We retrieve the title from it and show as our html title:

<title>@Page.Title</title>

Reference Materialize and css files

We are using materializecss so we reference it here as well as a custom css file.

<link href="~/Assets/css/materialize.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Assets/css/site.css" rel="stylesheet" type="text/css" />

Create NavigationBar

We will create our site's navigation bar, set its menu items as well as our logo:

<nav class="light-blue lighten-1" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="~/" class="brand-logo">Camposha.info</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="~/">Home</a></li>
                <li><a href="~/about">About</a></li>
            </ul>
            <a href="" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
    </nav>

Render Body

This will render our index.cshtml using the RenderBody() method:

<div class="container">
        @RenderBody()
        <br />
        <br />
        <br />
        <br />
    </div>

Site Footer

We will create our materializecss site footer:

<footer class="page-footer orange">
        <div class="container">
        </div>
    </footer>

Then we move over to our index..cshtml

Specify Layout Path

First we will specify page the layout for our site:

Layout = "~/_Layout.cshtml";

Specify Page Properties

These page properties can be shared across different webpages:

    Page.Title = "Camposha.info";
    Page.Header = "Amazing Universe";
    Page.SubHeader = "Nebulae in Universe";

Create our Data Source

In this case our data source is a simple array:

 String[] nebulae =
            {
                "Horse Head", "Black Widow", "Ghost Head", "Cat's Eye", "Elephant's Trunk", "Helix", "Rosette","Snake","Bernad 68",
                "Ant", "Orion", "Butterfly", "Eagle", "Own", "Ring", "Pelican", "Flame", "Witch Head", "Bumerang"
            };

Show Site Header and SubHeader

Let's show the header and subheader of our site:

    <h3 class="header center orange-text">@Page.Header.</h3>
    <h5 class="header center light-blue-text">@Page.SubHeader.</h5>

Render Articles in Materializecss List

We will render a list of Cards with action buttons based on our C# array.

Each card will have a title and description and two action buttons.

When the buttons are clicked we show alert dialog based on the button clicked and the current nebular being viewed.

<ul class="collection with-header">
            @foreach (string nebular in nebulae)
            {
                <li>
                    <div class="card blue-grey darken-1">
                        <div class="card-content white-text">
                            <span class="card-title">@nebular</span>This is the Description for @nebular
                        </div>
                        <div class="card-action">
                            <a onclick="alert('@nebular shown')">Show</a>
                            <a onclick="alert('@nebular viewed')">View</a>
                        </div>
                    </div>
                </li>
            }

        </ul>

That's it, Cheers.

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post