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
Model
public class Order
{
public int OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
}
Namespaces
using System.Configuration;
using System.Data.SqlClient;
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult GetOrder(int id)
{
return View();
}
public JsonResult GetOrders(int id)
{
List<Models.Order> orders = new List<Models.Order>();
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT TOP 3 * FROM Orders WHERE EmployeeID = @Id";
using (SqlConnection con = new SqlConnection(conString))
{
SqlCommand cmd = new SqlCommand(query);
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Id", id);
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
orders.Add(new Models.Order
{
OrderID = Convert.ToInt32(sdr["OrderID"]),
CustomerID = Convert.ToString(sdr["CustomerID"]),
ShipName = Convert.ToString(sdr["ShipName"]),
ShipCountry = Convert.ToString(sdr["ShipCountry"])
});
}
con.Close();
}
return Json(orders);
}
}
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">
<div id="dvDetails">
</div>
</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];
panelTriggers[i].addEventListener('click', function (event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "/Home/GetOrders",
data: "{id:" + $(this).attr('value') + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var row = '';
$.each(response, function () {
row += "<b><a href='/Home/GetOrder/" + this.OrderID + "'>" + this.OrderID + "</a>"
row += "<hr />"
row += "<table>"
row += " <tr>"
row += " <td>CustomerID :</td>"
row += " <td>" + this.CustomerID + "</td>"
row += " </tr>"
row += " <tr>"
row += " <td>ShipName :</td>"
row += " <td>" + this.ShipName + "</td>"
row += " </tr>"
row += " <tr>"
row += " <td>Ship Country :</td>"
row += " <td>" + this.ShipCountry + "</td>"
row += " </tr>"
row += "</table><br/ >"
});
$('#dvDetails').html(row);
},
error: function (response) {
alert(response.responseText)
}
});
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
