Hi AliYilmaz,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string DOB { get; set; }
}
Namespaces
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult GetEmployeeDetails(int employeeId)
{
Employee employee = GetEmployeesData().Where(x => x.ID == employeeId).FirstOrDefault();
return PartialView("Details", employee);
}
public JsonResult GetEmployees()
{
List<Employee> employees = GetEmployeesData();
return Json(employees, JsonRequestBehavior.AllowGet);
}
private static List<Employee> GetEmployeesData()
{
List<Employee> employees = new List<Employee>();
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
SqlCommand cmd = new SqlCommand("SELECT TOP 3 * FROM Employees");
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
employees.Add(new Employee
{
ID = Convert.ToInt32(sdr["EmployeeID"]),
Name = sdr["FirstName"] + " " + sdr["LastName"],
Address = sdr["Address"] + "," + sdr["City"] + "," + sdr["Country"],
DOB = Convert.ToDateTime(sdr["BirthDate"]).ToString("MM/dd/yyyy")
});
}
}
con.Close();
}
return employees;
}
}
View
Index
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$("#tblEmployees").kendoGrid({
dataSource: {
transport: { read: "/Home/GetEmployees/" },
pageSize: 5
},
height: 200,
pageable: { refresh: true, pageSizes: [2, 25, 50] },
groupable: false,
sortable: true,
columns: [
{ field: "ID", title: "ID", width: 30 },
{ field: "Name", title: "Name", width: 90 },
{ field: "Address", title: "Address", width: 120 },
{ field: "DOB", title: "Birth Date", width: 60 },
{
title: "View",
template: '<a href="GetEmployeeDetails?employeeId=#=ID#" id="btnView">View</a>',
headerTemplate: '',
filterable: false,
sortable: false,
width: 50
}
]
});
$(document).on("click", "#btnView", function (e) {
e.preventDefault();
$("#myModal").remove();
var url = $(this).attr("href");
$.get(url, function (data) {
$(data).modal();
});
});
});
</script>
</head>
<body>
<div id="tblEmployees"></div>
</body>
</html>
Details Partial View
@model KendoGrid_Link_Popup_MVC.Models.Employee
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align: center;">Employee Details</h4>
</div>
<div class="modal-body">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><b>@Html.DisplayNameFor(model => model.Name):</b></td>
<td>
@Html.DisplayFor(model => model.Name)
</td>
</tr>
<tr>
<td><b>@Html.DisplayNameFor(model => model.Address):</b></td>
<td>
@Html.DisplayFor(model => model.Address)
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Screenshot
