Improving scaffolded Razor Pages with EF Core, Bootstrap icons and a delete dialog

Karen Payne shows how to improve the Razor Pages that Visual Studio generates for an EF Core model reverse-engineered from SQL Server. The main change is replacing table-based lists with Bootstrap div layouts, swapping text links for icon buttons, and using a Bootstrap modal instead of a separate delete page. It is a practical starting point for ASP.NET Core developers who want more responsive and WCAG AA friendlier list pages.

Key points

• When adding the Razor Page in Visual Studio, pick the index template and select the model and DbContext
• Replace the text Edit, Details and Delete links with Bootstrap icon buttons such as bi-pencil, bi-eye and bi-trash
• Install the Bootstrap Icons client library and reference bootstrap-icons.min.css in _Layout.cshtml
• Use a Bootstrap modal instead of a separate delete page, passing the record ID through a hidden input
• The delete handler finds the entity with FindAsync, calls Remove and then SaveChangesAsync
• Use div layouts with Bootstrap classes instead of tables for better responsiveness and WCAG AA compliance

The article looks at how to improve the Razor Page scaffolding that Visual Studio generates when you add a page backed by an EF Core DbContext. The author replaces the text Edit, Details and Delete links on the list page with Bootstrap icon buttons, and swaps the standard delete confirmation page for a Bootstrap modal. The modal stores the record ID in a hidden form field, and an OnPostDeleteAsync handler removes the entity through EF Core.

The list markup moves from an HTML table to Bootstrap div classes, which the author argues responds better to different screen sizes and suits WCAG AA goals. Create and edit pages use FluentValidation rules, with a sample validator for the Customers model. The ideas are easy to adopt, but the code is tied to the author's sample project, so you will need to adapt the model and validation rules to your own data.

Real-world use

• Making a scaffolded ASP.NET Core admin area work better on phones and tablets
• Handling delete confirmations with a modal instead of a separate page in a CRUD back office
• Building an accessibility-conscious internal CRUD app that must meet WCAG AA

Why it matters

Customizing the generated markup gives you responsive, accessible list pages without leaving the scaffolding workflow, and removes the extra delete confirmation page.

Related stories

• Sending leads to Odoo without losing one: a transactional outbox in ASP.NET CoreDVDEV Community: #aspnetcore2 d ago
• Vertical Slice vs Clean Architecture in .NET 10: the hybrid layoutCWMukesh Murugan (codewithmukesh)4 d ago
• Designing out double charges and overselling in an ASP.NET Core POSDVDEV Community: #aspnetcore6 d ago