Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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)

@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;
}

asp.net core razor pages tutorial

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.