Displaying all records of a SQL Server table in a Razor Page

1

I have an ASP.Net Core project with Razor pages and SQL Server, and I need to add a page that displays a list of the existing records.
I already have added pages to (1)add a new record and (2)edit an existing record. I used Scaffolding to create pages to perform those two functions, and I included a button to select each of those functions.

Any help would be appreciated.

2

hi

hope this helps

Step 1: Add a New Razor Page for Listing Records

  1. Add a New Razor Page:
  • Right-click on your project in Visual Studio.
  • Navigate to Add > New Scaffolded Item...
  • Select Razor Page - Scaffolded (under the Web section).
  • Choose the "List" template.
  • Select your model and data context.
  • Name your page appropriately (e.g., List).
  • Click Add.

This will create a new Razor Page with a List.cshtml and List.cshtml.cs file.

Step 2: Review the Generated Code

The scaffolding template will generate a basic list page that includes:

  • A table displaying the records.
  • A link to add a new record.
  • Edit and delete links for each record.

Example of List.cshtml:

html

@page  
@model YourProject.Pages.ListModel  
@{  
    ViewData["Title"] = "List";  
}  

<h1>List</h1>  

<p>  
    <a asp-page="Create">Create New</a>  
</p>  
<table class="table">  
    <thead>  
        <tr>  
            @* Add table headers based on your model properties *@  
            <th>  
                @Html.DisplayNameFor(model => model.YourModel[0].YourProperty)  
            </th>  
            <th></th>  
        </tr>  
    </thead>  
    <tbody>  
        @foreach (var item in Model.YourModel)  
        {  
            <tr>  
                @* Add table data based on your model properties *@  
                <td>  
                    @Html.DisplayFor(modelItem => item.YourProperty)  
                </td>  
                <td>  
                    <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |  
                    <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |  
                    <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>  
                </td>  
            </tr>  
        }  
    </tbody>  
</table>

Example of List.cshtml.cs:

csharp

using Microsoft.AspNetCore.Mvc;  
using Microsoft.AspNetCore.Mvc.RazorPages;  
using YourProject.Data;  
using YourProject.Models;  

namespace YourProject.Pages  
{  
    public class ListModel : PageModel  
    {  
        private readonly YourProjectContext _context;  

        public ListModel(YourProjectContext context)  
        {  
            _context = context;  
        }  

        public IList<YourModel> YourModel { get; set; }  

        public void OnGet()  
        {  
            YourModel = _context.YourTable.ToList();  
        }  
    }  
}

Step 3: Customize the List Page

You can customize the list page to:

  1. Add Sorting:
  • Add sorting functionality by clicking on column headers.
  • Modify the OnGet method to handle sorting parameters.
  1. Add Filtering:
  • Add input fields to filter records based on specific criteria.
  • Modify the OnGet method to include filtering logic.
  1. Add Paging:
  • Add pagination to display a limited number of records per page.
  • Modify the OnGet method to handle paging parameters.
  1. Add Additional Columns:
  • Add or remove columns based on the properties of your model.

Step 4: Link to the List Page

To navigate to the List page from other pages, you can add a link:

html

<a asp-page="./List">Back to List</a>

Step 5: Test the List Page

  • Run the application.
  • Navigate to the List page to ensure it displays all records correctly.
  • Test the links to ensure they navigate to the appropriate pages (Edit, Details, Delete).
3

The auto-generated files include:
index.cshtml
create.cshtml
details.cshtml
delete.cshtml
edit.cshtml

"list.cshtml" is not automatically included.

When I run what I have, it automatically displays headings for every field, but no records are shown in the columns...

4

hope this helps :stuck_out_tongue_winking_eye:

@page  
@model YourNamespace.IndexModel  
@{  
    ViewData["Title"] = "Index";  
}  

<h1>Records</h1>  

<p>  
    <a asp-page="Create">Create New</a>  
</p>  
<table class="table">  
    <thead>  
        <tr>  
            @* Table headers will be generated based on your model *@  
            <th></th>  
        </tr>  
    </thead>  
    <tbody>  
        @foreach (var item in Model.YourModelName)  
        {  
            <tr>  
                @* Table rows will be generated based on your model *@  
                <td>  
                    <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |  
                    <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |  
                    <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>  
                </td>  
            </tr>  
        }  
    </tbody>  
</table>

public class IndexModel : PageModel  
{  
    private readonly YourDbContext _context;  

    public IndexModel(YourDbContext context)  
    {  
        _context = context;  
    }  

    public IList<YourModel> YourModelName { get; set; }  

    public async Task OnGetAsync()  
    {  
        YourModelName = await _context.YourModelName.ToListAsync();  
    }  
}

Troubleshooting Steps:

  1. Check your database to ensure there are records to display
  2. Verify the connection string in appsettings.json is correct
  3. Ensure your model matches the database table structure
  4. Check for any exceptions in the Output window while debugging