Currently, I am utilizing the bootstrap-table library to generate a table within my ASP.net MVC view. The requirement is that when a user double-clicks on a table row, the data from that specific row should be transferred to a modal popup model.
I have successfully managed to retrieve the column values of the row using the row[] array in JavaScript. However, I am facing difficulty transferring this data to my controller via Ajax.
Below is an excerpt of my code:
<html lang="en-AU">
<head>
<script>
$(document).ready(function () {
$('#tblID').bootstrapTable({ locale: 'en-US' }).on('click-row.bs.table', function (e, row, $element) {
var param = row[2]; //retrieving value from the 3rd column
$.ajax({
type: "GET",
url: '@Url.Action("_SampleAction", "SampleController")',
data: '{ID: "' + param + '" }',
datatype: "json",
success: function (result) {
$('#myModelContent').html(result);
$("#myModal").modal('show');
},
error: function (req, status, error) {
alert("Error occurred");
}
});
});
});
</script>
</head>
...
Upon executing the above code snippet, the parameter ID is being received as null and the Ajax call is failing.
If anyone can provide guidance on how to resolve this issue, it would be greatly appreciated. Thank you in advance.