How To Dynamically Load Employee Details In jQuery Popover Using MVC 5

Introduction

In this article, I will demonstrate how to dynamically load employee details using MVC 5 and Entity Framework. I will also load employee details in bootstrap popover based on their Id and will also use jQuery data table for searching, sorting, and paging.

Step 1

Open SQL server 2014 and create a database table.

CREATE TABLE [dbo].[Employee](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NULL,
[Position] [nvarchar](50) NULL,
[Office] [nvarchar](50) NULL,
[Age] [int] NULL,
[Satrt_Date] [date] NULL,
[Salary] [nvarchar](50) NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Step 2

Open Visual Studio 2015, click on New Project and create an empty web application project.

Screenshot for creating new project 1

After clicking on New Project, one window will appear. Select Web from the left panel, choose ASP.NET Web Application, give a meaningful name to your project, and then click on OK as shown in below screenshot.

Screenshot for creating new project 2

After clicking on OK one more window will appear; choose empty, check on MVC checkbox and click on OK as shown below screenshot.

Screenshot for creating new project 3

After clicking OK, the project will be created with the name of MvcDynamicallyLoadContent_Demo.

Step 3

Add Entity Framework now. For that, right click on Models folder, select Add, then select New Item, then click on it.

Screenshot for adding entity framework 1

After clicking on the New item, you will get a window; from there, select Data from the left panel and choose ADO.NET Entity Data Model, give it the name DBModels (this name is not mandatory you can give any name) and click on Add.

Screenshot for adding entity framework 2

After you click on "Add a window", the wizard will open, choose EF Designer from the database and click Next.

Screenshot for adding entity framework 3

After clicking on Next a window will appear. Choose New Connection. Another window will appear, add your server name if it is local then enter a dot (.). Choose your database and click on OK.

Screenshot for adding entity framework 4

The connection will be added. If you wish to save connect as you want you can change the name of your connection below. It will save connection in web config then click on Next.

Screenshot for adding entity framework 5

After clicking on NEXT another window will appear to choose database table name as shown in the below screenshot then click on Finish.

Screenshot for adding Entity Framework 6

Screenshot for adding Entity Framework-7

Entity Framework will be added and respective class gets generated under Models folder.

Screenshot for adding entity framework 8

namespace MvcDynamicallyLoadContent_Demo.Models
{
using System;
using System.Collections.Generic;
public partial class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Position { get; set; }
public string Office { get; set; }
public Nullable<int> Age { get; set; }
public Nullable<System.DateTime> Satrt_Date { get; set; }
public string Salary { get; set; }
}
}

Step 4

Right click on Controllers folder, select Add, then choose Controller as shown in below screenshot.

After clicking on the controller a window will appear to choose MVC5 Controller-Empty click on Add.

After clicking on Add another window will appear with DefaultController. Change the name to HomeController then click on Add. HomeController will be added under Controllers folder. Remember don’t change the Controller suffix for all controllers, change only highlight, and instead of Default just change Home as shown in the below screenshot.

Complete code for controller

using MvcDynamicallyLoadContent_Demo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcDynamicallyLoadContent_Demo.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<Employee> employeeList = new List<Employee>();
using (DBModel db=new DBModel ())
{
employeeList= db.Employees.ToList();
}
return View(employeeList);
}
public ActionResult EmployeeDetails(int id)
{
using (DBModel db=new DBModel())
{
List<Employee> employee = db.Employees.Where(x => x.ID == id).ToList();
return View(employee);
}
}
}
}

Step 5

Right-click on index action method in the controller. Add view window will appear with default index name unchecked (use a Layout page) and click on Add as shown in the below screenshot. View will be added in views folder under Home folder with name index.

Screenshot for adding view

Step 6

Design view with HTML, cshtml and bootstrap 4 classes,

Complete index view code

@model IEnumerable<MvcDynamicallyLoadContent_Demo.Models.Employee>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/scripts/jquery-3.3.1.min.js"></script>
<script src="~/scripts/popper.min.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
<link href="~/Content/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="~/scripts/jquery.dataTables.min.js"></script>
<script src="~/scripts/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#DataTable').DataTable();
$('[data-toggle="popover"]').popover({
title: setData,
html: true,
placement: 'right'
});
function setData(id) {
var set_data = '';
var element = $(this);
var id = element.attr("id");
$.ajax({
url: "/Home/EmployeeDetails?id" + id,
method: "post",
async: false,
data: { id: id },
success: function (data) {
set_data = data;
}
});
return set_data;
}
});
</script>
</head>
<body>
<div class="container py-4">
<h4 class="text-center text-uppercase">How Dynamically load employee details in jquery popover in mvc 5</h4>
<table id="DataTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
@foreach (var employee in Model)
{
<tr>
<td>@employee.ID</td>
<td><a href="#" data-toggle="popover" data-trigger="hover" id="@employee.ID">@employee.Name</a></td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>

Step 7

Create another view right-click on EmployeeDetails action method

@model IEnumerable<MvcDynamicallyLoadContent_Demo.Models.Employee>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EmployeeDetails</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/scripts/jquery-3.3.1.min.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="list-group">
@foreach (var employee in Model)
{
<li class="list-group-item">@employee.ID</li>
<li class="list-group-item">@employee.Name</li>
<li class="list-group-item">@employee.Position</li>
<li class="list-group-item">@employee.Office</li>
<li class="list-group-item">@employee.Age</li>
<li class="list-group-item">@employee.Satrt_Date</li>
<li class="list-group-item">@employee.Salary</li>
}
</ul>
</div>
</body>
</html>

Step 8

Run Project ctrl+F5,

Screenshot 1

Screenshot 2

10 Comments

Join the conversation! Your thoughts help the community grow.

maria segura7y ago
Hi! Really nice code, I'm having a similar problem but with lists, I have an mvc table with multiple items and a column just for the trigger button, and when I click the button a list fot this item should appear with 4 options, the issue is when I click one option It always returns the ID of the first item. Thank you
Vikas Srivastava8y ago
Nice one....
- Farhan Ahmed8y ago
  Thank you......
First Last8y ago
This does not work for me. When I hover, noting happens. How does it know to execute the setData(id) method? What points to it? I am also getting an error when I look a the Console tab in the Browser. It has an error on the popper.min.js and another one stating that Bootstrap tooltips require Popper.js. I used Nuget to bring in all the appropriate libraries including popper.
- First Last8y ago
  To get the popover to appear and also no longer see the errors in the Console tab, I had to replace: <script src="~/Scripts/popper.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> with <script src="~/Scripts/bootstrap.bundle.js"></script> <-- already comes with the Popper included.
- Farhan Ahmed8y ago
  Everything working perfectly for me no error. Review your code properly.
Hadshana Kamalanathan8y ago
Nice one..
- Farhan Ahmed8y ago
  Thank you....
Viknaraj Manogararajah8y ago
thank you for sharing
- Farhan Ahmed8y ago
  Thank you....