In the previous part, 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:
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&sty=r&lvl=12&FORM=MBEDLD">View Larger Map</a> |
<a id="dirMapLink" target="_blank" href="https://www.bing.com/maps/directions?cp=51.478418000000005~-0.18626199999999482&sty=r&lvl=12&rtp=~pos.51.478418000000005_-0.18626199999999482____&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:
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:
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>
Top comments (0)