Display jQuery DataTable Row details inside Bootstrap Modal using jQuery AJAX in ASP.Net

Last Reply 5 months ago By dharmendr

Posted 5 months ago

I  want to show more details on bootstrap modal from other table if user click on the row of the jquery datatable.

Posted 5 months ago Modified on 5 months ago

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">
                        &times;</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