Hi tanws8,
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
Namespaces
using System.Configuration;
using System.Data.SqlClient;
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployee(int id)
{
string name = "";
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT FirstName + ' ' + LastName FROM Employees WHERE EmployeeID = @Id";
using (SqlConnection con = new SqlConnection(conString))
{
SqlCommand cmd = new SqlCommand(query);
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Id", id);
con.Open();
name = Convert.ToString(cmd.ExecuteScalar());
con.Close();
}
return Json(name);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/style.css" rel="stylesheet" />
</head>
<body>
<div>
<input value="1" type="image" src="..." alt="img1" class="js-cd-panel-trigger" data-panel="main" />
<input value="2" type="image" src="..." alt="img2" class="js-cd-panel-trigger" data-panel="main" />
<input value="3" type="image" src="..." alt="img3" class="js-cd-panel-trigger" data-panel="main" />
</div>
<div class="cd-panel cd-panel--from-right js-cd-panel-main">
<div class="sta-panel_container">
@* Generate data from database here *@
<div class="cd-panel__content">
<table>
<tr>
<th>Name :</th>
<td><span id="lblName"></span></td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
(function () {
var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
if (panelTriggers.length > 0) {
for (var i = 0; i < panelTriggers.length; i++) {
(function (i) {
var panelClass = 'js-cd-panel-' + panelTriggers[i].getAttribute('data-panel'),
panel = document.getElementsByClassName(panelClass)[0];
// open panel when clicking on trigger btn
panelTriggers[i].addEventListener('click', function (event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "/Home/GetEmployee",
data: "{id:" + $(this).attr('value') + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('#lblName').html(response);
}
});
addClass(panel, 'cd-panel--is-visible');
});
//close panel when clicking on 'x' or outside the panel
panel.addEventListener('click', function (event) {
if (hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) {
event.preventDefault();
removeClass(panel, 'cd-panel--is-visible');
}
});
})(i);
}
}
function hasClass(el, className) {
if (el.classList) return el.classList.contains(className);
else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
function addClass(el, className) {
if (el.classList) el.classList.add(className);
else if (!hasClass(el, className)) el.className += " " + className;
}
function removeClass(el, className) {
if (el.classList) el.classList.remove(className);
else if (hasClass(el, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
el.className = el.className.replace(reg, ' ');
}
}
})();
</script>
</body>
</html>
Screenshot
