Intead of Microsoft.AspNet.DynamicData.EFProvider
you can use AJAX and ASP.NET MVC without needing to download a separate NuGet package other than I think EntityFramework:
First create an employee table in a database with EmployeeId, EmployeeName, Email, Phone and Experience.
Then create an ASP.NET Web Application, choosing MVC, in Visual Studio. Now add this to your HomeController:
public class HomeController : Controller
{
MyEntities db = new MyEntities ();
public ActionResult Index()
{
return View(db.EmployeeInfos.ToList());
}
public ActionResult EmployeeInfo(int id)
{
List<EmployeeInfo> EmpInfo = db.EmployeeInfos.Where(x => x.EmployeeId == id).ToList();
return View(EmpInfo);
}
}
Next in your HomeController View open Index.cshml, and put in this code:
@model IEnumerable<DynamicallyLoadingContant.Models.EmployeeInfo>
<br /><br />
<div class="container">
<h3 style="text-align:center">-----Employee List-----</h3><br />
<table class="table table-bordered">
<tr>
<th style="width:20%">ID</th>
<th style="width:80%">Name</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>@item.EmployeeId</td>
<td><a href="#" data-toggle="popover" data-trigger="hover" id="@item.EmployeeId">@item.EmployeeName</a></td>
</tr>
}
</table>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
$('[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/EmployeeInfo?id" + id,
method: "post",
async: false,
data: { id: id },
success: function (data) {
set_data = data;
}
});
return set_data;
}
});
</script>
Next add another EmployeeInfo.cshtml view:
@model IEnumerable<DynamicallyLoadingContant.Models.EmployeeInfo>
@{
ViewBag.Title = "EmployeeInfo";
}
<div class="container">
<h4 style=" text-align:center;border-bottom:1px solid #808080">EmployeeInfo</h4>
@foreach (var item in Model)
{
<p><label>Name : </label> @item.EmployeeName</p>
<p><label>Email : </label> @item.Email</p>
<p><label>Phone : </label> @item.Phone</p>
<p><label>Experience : </label> @item.Experience</p>
}
</div>
For more details, please see http://abctutorial.com/Post/29/dynamically-loading-content-with-jquery-ajax-%7C-aspnet-mvc