(C# ASP.NET Core) Displaying Data and OnGetAsync

Pre-requisites for this Tutorial

You should already have completed the tutorial on INSERT of data - (C# ASP.NET Core) Getting Started with Database INSERT of Form data

The Concept behind Display of Data
(see the linked video for details)

Following are the three quick steps that must be done:

Step 1: Add an IList Property

Add a public get/set property IList<T> to the backing class. You will need the namespace using System.Collections.Generic.

Step 2: Set IList

Again, in the backing class make a call to "context.DbSet.ToListAsync" and obtain the collection. For example, if your context is cached as _ctx, and the DbSet is Products, then the call would be "await _ctx.Products.ToListAsync()". The namespace to be added is using Microsoft.EntityFrameworkCore;

Why "ToListAsync", and not "ToList"? The reason is that a complex query could take quite some time to return the result-set. Don't forget that the database could itself be on a remote server! All database queries should be run in asynchronous mode.

Step 3: Run a foreach loop

The IList can be accessed on the razor page through "@Model.", and a foreach can be run, and html for each record rendered.

Video Explanation with a Working Example

Please watch the following youtube video:

Example of a Index.cshtml.cs File

Following is the completed backing class that we discussed in the tutorial (C# ASP.NET Core) Getting Started with Database INSERT of Form data.

This code adds an IList and uses ToListAsyc to obtain the collection in the OnGetAsync method.

using DBaseCon;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

using Microsoft.EntityFrameworkCore;

using System.Collections.Generic;

using System.Threading.Tasks;

namespace Modular.Pages
{

  public class IndexModel : PageModel
  {

    private readonly ProductContext _ctx;

    // dependency injection of the ProductContext 
    public IndexModel(ProductContext ctx)
    {

      _ctx = ctx;

    }

    // Added for displaying the data 
    // using System.Collections.Generic; 

    public IList<Product> Products { get; set; }

    // recommended method is OnGetAsync 
    // because a complex database query can take 
    // longer to complete 
    public async void OnGetAsync()
    {

      // using Microsoft.EntityFrameworkCore; 

      Products = await _ctx.Products.ToListAsync();

    }

    // 2-way binding for INSERT 
    [BindProperty]
    public Product Prod { get; set; }

    // on post for inserting a record 
    public ActionResult OnPost()
    {

      _ctx.Products.Add(Prod);

      _ctx.SaveChanges();

      // redirect and show the 
      // form again 
      return RedirectToPage();

    }

  }

}

Example of a Index.cshtml Razor File

Following is completed backing razor markup file. This code adds a foreach loop to display the records:

@page

@model Modular.Pages.IndexModel

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<form method="post">

  Name: <input asp-for="Prod.Name" />

  <input type="submit" />

</form>

<h1>Display of Data</h1>

@foreach (var prod in Model.Products)
{
  <div>
    @prod.Name
  </div>

  <hr />
}