Using PaperCSS with ASP.NET Core MVC 2.1 – Layout and Components
Tags: dotnet, csharp, webdev, css
Published: 2018-11-04 23:50:41

---
title: ﻿﻿﻿﻿Using PaperCSS with ASP.NET Core MVC 2.1 – Layout and Components
published: true
description: This post is the second part of the article about using the new modern PaperCSS framework with original (paper) design.
tags: #dotnet #csharp #webdev #css
---

In the [previous part](https://dev.to/andruhovski/using-papercss-with-aspnet-core-mvc-21--step-by-step-8k3), we created a simple ASP.NET Core MVC application based on the PaperCSS framework, now we add two pages to show how we can make own layout and use components such as tables or cards.

# Layout

PaperCSS uses naming conversion similar to Bootstrap: row, xs-, sm-, md-, lg-, col.

Let's change About.cshtml:


``` 
@{
    ViewData["Title"] = "About";
}
<section class="paper">
    <div class="row flex-middle">
        <div class="sm-6 md-8 lg-10 col">
            <h2>@ViewData["Title"]</h2>
            <h3>@ViewData["Message"]</h3>
        </div>
        <div class="sm-6 md-4 lg-2 col">
            <p>Use this area to provide additional information.</p>
        </div>
    </div>   
</section>
```

In the new version we created one row with two-column:
![About Page](https://thepracticaldev.s3.amazonaws.com/i/n0apmzdnvw6b0hjfbo9z.png)

Additionally, we decorated row with *flex-middle* class to place the content in the middle of the cell. 

Next, we will change the Contact.cshtml:

```
@{
    ViewData["Title"] = "Contact";
}
<style type="text/css">
    .contact {
         height: 500px;
     }
</style>

<div class="row">
    <div class="sm-12 md-6 col">
        <section class="paper contact">
            <h2>@ViewData["Title"]</h2>
            <h3>@ViewData["Message"]</h3>

            <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:Support@example.com">Support@example.com</a><br/>
                <strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
            </address>
        </section>
    </div>
    <div class="sm-12 md-6 col">
        <aside class="paper contact">
            <iframe width="325" height="300" src="https://www.bing.com/maps/embed?h=300&w=325&cp=51.478418000000005~-0.18626199999999482&lvl=12&typ=d&sty=r&src=SHELL&FORM=MBEDV8" scrolling="no"></iframe>
            <div style="white-space: nowrap; text-align: center; width: 325px; padding: 6px 0;">
                <a id="largeMapLink" target="_blank" href="https://www.bing.com/maps?cp=51.478418000000005~-0.18626199999999482&amp;sty=r&amp;lvl=12&amp;FORM=MBEDLD">View Larger Map</a> &nbsp; | &nbsp;
                <a id="dirMapLink" target="_blank" href="https://www.bing.com/maps/directions?cp=51.478418000000005~-0.18626199999999482&amp;sty=r&amp;lvl=12&amp;rtp=~pos.51.478418000000005_-0.18626199999999482____&amp;FORM=MBEDLD">Get Directions</a>
            </div>
        </aside>
    </div>
</div>

```
In this view, we add Bing Maps fragment as the second cell and align both cells by height.

# Components

In this post, we add two pages to show how to works the most popular components - table and cards. For demo purposes, we will add Event and Speaker classes 

```
using System;
namespace PaperCssDemo.Models
{
    public class Event
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string ShortDescription { get; set; }
        public DateTime StartDateTime { get; set; }
        public string Location { get; set; }
        public string ImageUrl { get; set; }
    }

    public class Speaker
    {
        public int Id { get; set; }
        public string FullName { get; set; }
        public string Address { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
    }
}
```

and create 2 actions to display events in the card-style and speaker as a table:

```
public IActionResult Speakers()
{
    var speakers = new List<Speaker>();
    for (var i = 0; i < 10; i++)
    {
        speakers.Add(new Speaker
        {
            Id = i + 1,
            FullName = Faker.Name.FullName(NameFormats.Standard),
            Address = Faker.Address.City(),
            Email = Faker.Internet.Email(),
            Phone = Faker.Phone.Number()
        });
    }

    return View(speakers);
}

public IActionResult Events()
{
    var events = new List<Event>();
    for (var i = 0; i < 15; i++)
    {
        events.Add(new Event
        {
            Id = i + 1,
            Title = Faker.Extensions.ArrayExtensions.Random(new[] { "Meetup", "Conference", "Exhibition", "Party" }),
            ShortDescription = Faker.Lorem.Sentence(6),
            Location = $"{Faker.Address.City()}, {Faker.Address.Country()}",
            StartDateTime = new DateTime(2018, 10, Faker.RandomNumber.Next(1, 28)),
            ImageUrl = $"https://loremflickr.com/320/240?random={i + 1}"
        });
    }
    return View(events);
}

```

The table presentation is pretty straightforward. We can add *table-hover* or *table-alternating* to change the style of the table:

```
@model IEnumerable<PaperCssDemo.Models.Speaker>

@{
    ViewData["Title"] = "Speakers";
}

<h2>Speakers</h2>

<table class="table-hover">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FullName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Address)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Phone)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FullName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Phone)
                </td>
            </tr>
        }
    </tbody>
</table>
```
The Speakers view will be look like the following screenshot:
 
![Table style](https://thepracticaldev.s3.amazonaws.com/i/v5nnqds76jbf6q9csq3h.png)



The cards-style uses a few classes to decorate card: *card*, *card-body*, *card-title*, *card-subtitle*, *card-text*

```
@model IEnumerable<PaperCssDemo.Models.Event>

@{
    ViewData["Title"] = "View";
}

<div class="row">
    @foreach (var item in Model)
    {
        <div class="sm-6 md-4 col">
            <div class="card">
                <img src="@item.ImageUrl" alt="Card random image">

                <div class="card-body">
                    <h4 class="card-title">@Html.DisplayFor(modelItem => item.Title)</h4>
                    <h5 class="card-subtitle">@Html.DisplayFor(modelItem => item.Location), @Html.DisplayFor(modelItem => item.StartDateTime)</h5>
                    <div style="height:100px">
                        <p class="card-text">@Html.DisplayFor(modelItem => item.ShortDescription)</p>
                    </div>
                    <button>Let me go here!</button>
                </div>
            </div>
        </div>
    }
</div>
```
In this view, we show per 3 cards in line on the medium screen and per 2 cards on the small:

![Card-style](https://thepracticaldev.s3.amazonaws.com/i/kuk7d0xckd15rcevqhjn.png)


 Finally, we add links in Layout.cshtml:
```
<a asp-area="" asp-controller="Home" asp-action="Events">Events</a>
<a asp-area="" asp-controller="Home" asp-action="Speakers">Speakers</a>
```