In this article I will explain with an example, how to bind HTML Table in ASP.Net Core (.Net Core 8) MVC.
Note: For more details on ASP.Net Core (.Net Core 8) MVC, please refer my article ASP.Net MVC Core Hello World Tutorial with Sample Program example.
 
 

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here
Download and install Northwind Database
Note: The Customers Table of the Northwind Database will be used in this project.
 
 

Downloading Entity Framework Core

You will need to install the Microsoft.EntityFrameworkCore.SqlServer package using the following command.
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 8.0.0
 
 

Model

1. Once the package is successfully installed, create a Folder named Models in your project and then a new class by right clicking the Models folder and then click on Add and then New Item option of the Context Menu.
Bind HTML Table in ASP.Net Core
 
2. Create the following properties inside the Model class as shown below.
Note: In this article, only four Columns will be displayed and hence four properties are added to the class.
 
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

1. Now you will need to add a new class to your project by right clicking the Solution Explorer and then click on Add and then New Item option of the Context Menu.
Bind HTML Table in ASP.Net Core
 
2. Inside the class, first inherit the EntityFrameworkCore namespace and then inherit the DbContext class.
Then using Dependency Injection, a Constructor is created DbContextOptions are passed as parameter and also the Constructor of base class i.e. DbContext class is inherited.
Finally, a DbSet Collection property of Customer Model class is created, which will be later used for holding the Data fetched from SQL Server Database Table.
using EF_Core_8_MVC.Models;
using Microsoft.EntityFrameworkCore;
 
namespace EF_Core_8_MVC
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
 
        }
        public DbSet<Customer> Customers { get; set; }
    }
}
 
 

Adding the Connection String inside AppSettings.json

The following Connection String setting has been added in the AppSettings.json file.
{
  "ConnectionStrings": {
    "MyConn": "Data Source=.\\SQL2019;Initial Catalog=Northwind;Trust Server Certificate=True"
  }
}
 
 

Enabling MVC and Configuring the Routes

The last important part is to enable MVC and configure the Routes in the Program.cs file.
1. Open the Program.cs file from the Solution Explorer window.
2. Inside the Program.cs, there are two configurations.

Configure MVC Services

Call the following function AddControllersWithViews which will instruct the program to add MVC Services.
Then, fetching the connection string from AppSettings.json file after that injecting connection string Db Context class using Dependency injection.

Configure Routes

Then, the Route is set and the names of the Controller and the Action method are specified.
var builder = WebApplication.CreateBuilder(args);
 
//Enabling MVC
builder.Services.AddControllersWithViews();
string constr = builder.Configuration.GetSection("ConnectionStrings")["MyConn"];
builder.Services.AddDbContext<DBCtx>(options => options.UseSqlServer(constr));
var app = builder.Build();
 
//Configuring Routes
app.MapControllerRoute(
     name: "default",
     pattern: "{controller= Home}/{action= Index}/{id?}");
 
app.Run();
 
 

Controller

The Controller consists of following Action method.

Inside the Index Action method, the Top 10 records are fetched from the Customers Table of the Northwind Database and returned to the View.
public class HomeController : Controller
{
    private DBCtx Context { get; }
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }
    public IActionResult Index()
    {
        List<Customer> customers = (from customer in this.Context.Customers.Take(10)
                                    select customer).ToList();
        return View(customers);
    }
}
 
 

View

HTML Markup

Here for displaying the records, an HTML Table is used. A loop will be executed over the Model which will generate the HTML Table rows with the Customer records.
@using EF_Core_8_MVC.Models
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h4>Customers</h4>
    <hr />
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>CustomerID</th>
            <th>ContactName</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        @foreach (Customer customer in Model)
        {
            <tr>
                <td>@customer.CustomerID</td>
                <td>@customer.ContactName</td>
                <td>@customer.City</td>
                <td>@customer.Country</td>
            </tr>
        }
    </table>
</body>
</html>
 
 

Screenshot

Bind HTML Table in ASP.Net Core
 
 

Downloads

Download Code