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

harishgg1 · February 17, 2025, 6:01pm

hi

hope this helps

Step 1: Add a New Razor Page for Listing Records

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:

Add Sorting:

Add sorting functionality by clicking on column headers.
Modify the OnGet method to handle sorting parameters.

Add Filtering:

Add input fields to filter records based on specific criteria.
Modify the OnGet method to include filtering logic.

Add Paging:

Add pagination to display a limited number of records per page.
Modify the OnGet method to handle paging parameters.

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: