Hi pvermacs,
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
jsonArray.txt
{
"data":
[
["AAFKM","Mudassar Khan"],
["ALFKI","Maria"],
["ANATR","Ana Trujillo"],
["ANTON","Antonio Moreno"],
["AROUT","Thomas Hardy"],
["BERGS","Christina Berglund"],
["BLAUS","Hanna Moos"],
["BLONP","Frédérique Citeaux"],
["BOLID","Martín Sommer"],
["BONAP","Laurence Lebihan"],
["BOTTM","Elizabeth Lincoln"],
["BSBEV","Victoria Ashworth"],
["CACTU","Patricio Simpson"],
["CENTC","Francisco Chang"]
]
}
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
var table = $('#example').DataTable({
"ajax": { "url": "jsonArray.txt" },
"responsive": true,
"pageLength": 4,
"sPaginationType": "full_numbers",
"columnDefs": [{ "targets": -1, "data": null, "defaultContent": "<input type='button' id='btnView' class='btn btn-primary' width='5px' value='View' />"}]
});
$('#example tbody').on('click', 'tr', function () {
var data = table.row(this).data();
var customerId = data[0];
var name = data[1];
GetPopupData(customerId,name);
});
$('#example tbody').on('click', '[id*=btnView]', function () {
var data = table.row($(this).parents('tr')).data();
var customerId = data[0];
var name = data[1];
GetPopupData(customerId, name);
});
});
function GetPopupData(customerId, name) {
$.ajax({
type: "POST",
url: "Default.aspx/GetDetails",
data: '{customerId: "' + customerId + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$("#MyPopup .modal-title").html(name + " details");
if (response.d.length > 0) {
$('#tblDetails').show();
$("#noDetails").hide();
$('.address').html(response.d[0]);
$('.city').html(response.d[1]);
$('.country').html(response.d[2]);
}
else {
$('#tblDetails').hide();
$("#noDetails").show();
}
$("#MyPopup").modal("show");
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="example">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Details</th>
</tr>
</thead>
<tfoot>
</tfoot>
</table>
</div>
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title text-center">
</h4>
</div>
<div class="modal-body">
<span id="noDetails">No details found.</span>
<table id="tblDetails" class="table">
<tr>
<td>Address</td>
<td><span class="address"></span></td>
</tr>
<tr>
<td>City</td>
<td><span class="city"></span></td>
</tr>
<tr>
<td>Country</td>
<td><span class="country"></span></td>
</tr>
</table>
</div>
<div class="modal-footer">
<input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" data-dismiss="modal" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;
VB.Net
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services
Code
C#
[WebMethod]
public static List<string> GetDetails(string customerId)
{
List<string> details = new List<string>();
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.Connection = con;
con.Open();
cmd.CommandText = "SELECT Address,City,Country FROM Customers WHERE CustomerID = @Id";
cmd.Parameters.AddWithValue("@Id", customerId);
SqlDataReader rdr = cmd.ExecuteReader();
if (rdr.Read())
{
details.Add(rdr["Address"].ToString());
details.Add(rdr["City"].ToString());
details.Add(rdr["Country"].ToString());
}
con.Close();
}
}
return details;
}
VB.Net
<WebMethod()>
Public Shared Function GetDetails(ByVal customerId As String) As List(Of String)
Dim details As List(Of String) = New List(Of String)()
Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
Using cmd As SqlCommand = New SqlCommand()
cmd.Connection = con
con.Open()
cmd.CommandText = "SELECT Address,City,Country FROM Customers WHERE CustomerID = @Id"
cmd.Parameters.AddWithValue("@Id", customerId)
Dim rdr As SqlDataReader = cmd.ExecuteReader()
If rdr.Read() Then
details.Add(rdr("Address").ToString())
details.Add(rdr("City").ToString())
details.Add(rdr("Country").ToString())
End If
con.Close()
End Using
End Using
Return details
End Function
Screenshot
