Display total number of records in Bootstrap cards in ASP MVC

AbushNasi
 
on Jul 14, 2022 09:36 AM
Sample_222955.zip
510 Views

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
dharmendr
 
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.

Model

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

Controller

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);
    }
}

View

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

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
    <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>
                    <strong>@table.TotalRecords</strong>
                </div>
            </div>
        }
    </div>
</body>
</html>

Screenshot