In this article I will explain with an example, how to highlight row of WebGrid on MouseOver (Mouse Hover) using CSS in ASP.Net Core (.Net Core 8) Razor Pages.
 
 

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.
 
 

Model

The Model class consists of following properties.
public class Customer
{
    public string CustomerID { get; set; }
    public string ContactName { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}
 
 

Database Context

Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
Note: For beginners in ASP.Net Core (.Net Core 8) Razor Pages and Entity Framework, please refer my article .Net Core 8: Entity Framework Tutorial in ASP.Net Core Razor Pages. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core (.Net Core 8) Razor Pages.
 
using Microsoft.EntityFrameworkCore;
using WebGrid_Row_Highlight_Core_Razor.Models;
 
namespace WebGrid_Row_Highlight_Core_Razor
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }
 
        public DbSet<Customer> Customers { get; set; }
    }
}
 
 

Razor PageModel (Code-Behind)

The PageModel consists of following Handler method.

Handler method for handling GET operation

Inside this Handler method, the Top 10 records are fetched from the Customers table using Entity Framework and assigned to the public property Customers and returned to the Razor Page.
public class IndexModel : PageModel
{
    private DBCtx Context { get; }
 
    public IndexModel(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public List<Customer> Customers { get; set; }
 
    public void OnGet()
    {
        this.Customers = this.Context.Customers.Take(10).ToList();
    }
}
 
 

Razor Page (HTML)

HTML Markup

Inside the Razor Page, in the very first line the Customer Model is declared as IEnumerable which specifies that the Model will be available as a Collection.
Then, the NonFactors.Mvc.Grid namespace is inherited inside the Page.
 

Styling the WebGrid

The WebGrid has been enclosed inside an HTML DIV which has been assigned with a CSS class i.e. Grid.
The WebGrid is rendered as an HTML Table and hence the CSS classes are applied to the HTML Table, its row TR, its Header Cell, TH and the normal Cell TD.
 

Highlighting the WebGrid Row on MouseOver

All the TR elements of the WebGrid except the first TR is assigned with hover CSS which highlights the WebGrid row on MouseOver.
When the mouse enters a TR element, all the background color of all the TD elements belonging to the TR element are changed.
Note: For more information on usage of WebGrid in ASP.Net Core (.Net Core 8) Razor Pages, please refer Using MVC6 Grid in ASP.Net Core Razor Pages.
 
@page
@model WebGrid_Row_Highlight_Core_Razor.Pages.IndexModel
@addTagHelper*,Microsoft.AspNetCore.Mvc.TagHelpers
@using NonFactors.Mvc.Grid;
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        .Grid table { border: 1px solid #ccc; border-collapse: collapse; }
        .Grid th { background-color: #F7F7F7; font-weight: bold; }
        .Grid th, .Grid td { padding: 5px; border: 1px solid #ccc; }
        .Grid th a, .Grid th a:visited { color: #333; }
        .Grid tr:not(first-child):hover td { background-color: gold; cursor: pointer; }
    </style>
    <link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet" />
</head>
<body>
    <div class="Grid" style="width: 550px">
        @(Html.Grid(Model.Customers).Build(columns =>
                {
                    columns.Add(model => model.CustomerID).Titled("Customer ID");
                    columns.Add(model => model.ContactName).Titled("Customer Name");
                    columns.Add(model => model.City).Titled("City");
                    columns.Add(model => model.Country).Titled("Country");
                })
                )
    </div>
</body>
</html>
 
 

Screenshot

ASP.Net Core Razor Pages: Highlight row of WebGrid on Mouseover (Mouse Hover) using CSS
 
 

Downloads

Download Code