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) MVC.
 
 

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 Model will look as shown below.
Note: For beginners in ASP.Net Core (.Net Core 8) MVC and Entity Framework, please refer my article ASP.Net Core: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core (.Net Core 8) MVC.
 
using WebGrid_Row_Highlight_Core_MVC.Models;
using Microsoft.EntityFrameworkCore;
 
namespace WebGrid_Row_Highlight_Core_MVC
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
 
        }
        public DbSet<Customer> Customers { get; set; }
    }
}
 
 

Controller

The Controller consists of the following Action method.

Action method for handling GET operation

Inside this Action method, the Top 10 records are fetched from the Customers table using Entity Framework and returned to the View.
public class HomeController : Controller
{
    private DBCtx  Context{ get; }
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }
    public IActionResult Index()
    {
        return View(this.Context.Customers.Take(10).ToList());
    }
}
 
 

View

HTML Markup

Inside the View, 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 View.
 

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, please refer WebGrid Step By Step Tutorial with example in ASP.Net Core MVC.
 
@model IEnumerable<WebGrid_Row_Highlight_Core_MVC.Models.Customer>
@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">
    @(Html.Grid(Model).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: Highlight row of WebGrid on Mouseover (Mouse Hover) using CSS
 
 

Downloads

Download Code