Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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.

list razor page

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)

@model RazorPagesTutorial.Pages.Employees.IndexModel
    ViewData["Title"] = "Index";

    .btn {
        width: 75px;


<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">

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


.imageThumbnail {
    height: 200px;
    width: auto;
} core razor pages tutorial

No comments:

Post a Comment

It would be great if you can help share these free resources