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

Last Reply one year ago By dharmendr

Posted one year ago

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

You are viewing reply posted by: dharmendr one year ago.
Posted one year ago Modified on one year 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