Display total number of records in Bootstrap cards in ASP MVC

on Jul 14, 2022 09:36 AM

Hi there I want to display the number of records of multiple tables in multiple bootstrap cards

for example if a table contains 1,000 records I want to display the number 1000 on bootstrap cards.

Still, I have no idea how to count the records and displays on the cards.

Any help would be appreciated

thank you

Download FREE API for Word, Excel and PDF in ASP.Net: Download
on Jul 15, 2022 01:36 AM
on Jul 16, 2022 04:24 AM

Hi AbushNasi,

To display total record you need to use the Count method.

For configuring Entity Framework refer below article.

ASP.Net MVC: Simple Entity Framework Tutorial with example

Refer below example. Here i have used Employees table of Northwind Database.


public class TableModel
    public string TableName { get; set; }
    public int TotalRecords { get; set; }


public class HomeController : Controller
    // GET: Home
    public ActionResult Index()
        List<TableModel> records = new List<TableModel>();
        NorthwindEntities entities = new NorthwindEntities();
        records.Add(new TableModel { TableName = "Employees", TotalRecords = entities.Employees.Count() });
        records.Add(new TableModel { TableName = "Orders", TotalRecords = entities.Orders.Count() });
        records.Add(new TableModel { TableName = "Customers", TotalRecords = entities.Customers.Count() });
        records.Add(new TableModel { TableName = "Categories", TotalRecords = entities.Categories.Count() });
        records.Add(new TableModel { TableName = "Products", TotalRecords = entities.Products.Count() });
        return View(records);


@model List<TableModel>
@using Bootstrap_Card_Total_MVC.Models
    Layout = null;

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <div class="container">
        <br />
        @foreach (TableModel table in Model)
            <div class="card bg-light panel panel-default" style="width:300px">
                <div class="card-body text-center">
                    <h4 class="card-title">@table.TableName <strong>Count</strong></h4>