List razor page

Suggested Videos
Part 4 - Razor Pages - Creating Reusable Models Project | Text | Slides
Part 5 - Razor Pages - Creating Reusable Data Access Project | Text | Slides
Part 6 - Registering services in razor pages project | Text | Slides

In this video we will implement the razor code to display the list of employees. We want the list razor page to look like the following.





Index.cshtml.cs (PageModel)

using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPagesTutorial.Models;
using RazorPagesTutorial.Services;
using System.Collections.Generic;

namespace RazorPagesTutorial.Pages.Employees
{
    public class IndexModel : PageModel
    {
        private readonly IEmployeeRepository employeeRepository;
        public IEnumerable<Employee> Employees { get; set; }

        public IndexModel(IEmployeeRepository employeeRepository)
        {
            this.employeeRepository = employeeRepository;
        }

        public void OnGet()
        {
            Employees = employeeRepository.GetAllEmployees();
        }
    }
}

Index.cshtml (Display Template)

@page

@model RazorPagesTutorial.Pages.Employees.IndexModel

@{

    ViewData["Title"] = "Index";

}

<style>

    .btn {

        width: 75px;

    }

</style>

<h1>Employees</h1>

<div class="card-deck">

    @foreach (var employee in Model.Employees)

    {

        var photoPath = "~/images/" + (employee.PhotoPath ?? "noimage.jpg");

        <div class="card m-3" style="min-width: 18rem; max-width:30.5%;">

            <div class="card-header">

                <h3>@employee.Name</h3>

            </div>

            <img class="card-img-top imageThumbnail" src="@photoPath"

                 asp-append-version="true" />

            <div class="card-footer text-center">

                <a href="#" class="btn btn-primary m-1">View</a>

                <a href="#" class="btn btn-primary m-1">Edit</a>

                <a href="#" class="btn btn-danger m-1">Delete</a>

            </div>

        </div>

    }

</div>

site.css

.imageThumbnail {
    height: 200px;
    width: auto;
}