In this article I will explain with an example, how to load multiple Partial Views inside Loop using Model in ASP.Net Core MVC.
The data will be fetched from database using Entity Framework and then multiple Partial Views will be rendered inside For Loop using the @Html.Partial function in ASP.Net Core MVC.
Note: For beginners in ASP.Net MVC Core, please refer my article ASP.Net MVC Core Hello World Tutorial with Sample Program example.
 
 
Database
This article makes use of the Microsoft’s Northwind Database. The download and install instructions are provided in the link below.
Download and install Northwind Database
 
 
Model
Following class is used as the Model class.
public class Customer
{
    public string CustomerID { get; set; }
    public string ContactName { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string PostalCode { get; set; }
} 
 
 
Entity Data Model
Following is the Database Context class which is used to connect to the Database.
Note : For more information on creating Database Context class using Entity Framework, please refer my article ASP.Net Core: Simple Entity Framework Tutorial with example.
 
using PartialView_EF_Core_MVC.Models;
using Microsoft.EntityFrameworkCore;
namespace PartialView_EF_Core_MVC
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }
 
        public DbSet<Customer> Customers { get; set; }
    }
}
 
 
Controller
The Database Context class is injected into the Controller class using Dependency Injection method.
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, the Top 10 Customer records are fetched 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
Inside the View, in the very first line the Customer Entity is declared as IEnumerable which specifies that it will be available as a Collection.
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.
The last column of the HTML Table consists of the @Html.Partial function which renders the Partial View. The name of the View and the object of the CustomerModel class are passed to the @Html.Partial function.
@using PartialView_EF_Core_MVC.Models;
@model IEnumerable<Customer>
 
@{
    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>Contact Name</th>
            <th>Address</th>
        </tr>
        @foreach (Customer customer in Model)
        {
            <tr>
                <td>@customer.CustomerID</td>
                <td>@customer.ContactName</td>
                <td>@Html.Partial("Details", customer)</td>
            </tr>
        }
    </table>
</body>
</html>
 
 
Partial View
In order to add Partial View, you will need to Right Click inside the Controller class and click on the Add View option in order to create a View for the Controller.
Inside the Add New Item dialog, the Razor View – Empty options needs to be selected as shown below.
Load Partial Views inside Loop in ASP.Net Core MVC
 
Inside the Partial View, in the very first line the Customer Entity is declared as Model for the Partial View. The details of the Customer are displayed using the Html.DisplayFor helper method.
@model Partial_View_Entity_MVC.Customer
 
@Html.DisplayFor(model => model.Address)
<br/>
@Html.DisplayFor(model => model.City),
@Html.DisplayFor(model => model.PostalCode)
<br/>
@Html.DisplayFor(model => model.Country)
 
 
Screenshot
Load Partial Views inside Loop in ASP.Net Core MVC
 
 
Downloads
Download Code