How to display Datalist records on modal pop by button click in another datalist

Question

User-2074858223 posted

Hi Please is it possible to call a record in datalist A and dispaly the result on datalist B in a modal pop up without post back?

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
  
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
  <asp:DataList ID="DataList1" runat="server">
                                            <ItemTemplate></ItemTemplate>
                                        </asp:DataList>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

if (!this.IsPostBack)
      {
          this.Populatebooks();
          string username5 = this.Page.User.Identity.Name;
          //Path.GetFileName(Request.Url.AbsolutePath);
      }
  }
  private void Populatebooks()
  {
      // string userId = Session["userName"].ToString();
      // string userId = Session["userName"].ToString();
      //    string str = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
      string Populatebooks = "GetUserPOSTS";
      using (SqlConnection con = new SqlConnection(constring4))
      {
          con.Open();
          using (SqlCommand cmd = new SqlCommand(Populatebooks, con))
          {
              cmd.CommandType = CommandType.StoredProcedure;
              // cmd.Parameters.AddWithValue("@Name", Request.QueryString["Id"].ToString());
              cmd.Parameters.AddWithValue("@UserName", Session["userName"]);
              // cmd.Parameters.AddWithValue("@Id", Id);
              //lblpost.Text = TextBixcomment.Text.Replace(Environment.NewLine, "<BR />");
              SqlDataAdapter sda = new SqlDataAdapter(cmd);
              DataTable dt = new DataTable();
              sda.Fill(dt);
              ViewState["DataTable"] = dt;
              GetMergedAll.DataSource = dt;
              GetMergedAll.DataBind();
 
          }
           
      }

Answer 1

User-707554951 posted

Hi micah2012,

Working sample as below:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {

            $("button[id*='button1']").click(function () {
                var id = $(this).parent().parent().prevAll("tr").eq(1).find("span[id*='Idlabel']").html();
                var name = $(this).parent().parent().prevAll("tr").eq(0).find("span[id*='Namelabel']").html();
                var country = $(this).parent().parent().prevAll("tr").eq(0).find("span[id*='CountryLabel']").html();
                $("#DataList1_Label1_0").html(id);
                $("#DataList1_Label2_0").html(name);
                $("#DataList1_Label3_0").html(country);             
            })
        })
    </script>

     <asp:DataList ID="DataList2" runat="server" >
                    <ItemTemplate>
                        <table class="table">
                            <tr>
                                <th colspan="2">
                                    <asp:Label ID="Idlabel" runat="server" Text=' <%# Eval("Id") %>'></asp:Label>     
                                </th>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:Label ID="Namelabel" runat="server" Text=' <%# Eval("Name") %>'></asp:Label>|
                                    <asp:Label ID="CountryLabel" runat="server" Text='<%#Eval("Country")%>'></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                     <button type="button" data-toggle="modal" 
                                   data-target="#myModal" id="button1" >Open Modal</button>
                                </td>
                              
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:DataList>
            <!-- Modal -->
            <div class="modal fade" id="myModal" 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">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <asp:DataList ID="DataList1" runat="server">
                                <ItemTemplate>
                                    <table class="table">
                                        <tr>
                                            <th colspan="2">                                    
                                                <b><asp:Label ID="Label1" runat="server" Text='<%# Eval("Id") %>'></asp:Label></b>
                                            </th>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                          <asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>'></asp:Label>|
                                          <asp:Label ID="Label3" runat="server" Text='<%# Eval("Country") %>'></asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                            </asp:DataList>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>

CodeBehind:

  protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
                dt.Rows.Add(1, "John Hammond", "United States");
                dt.Rows.Add(2, "Mudassar Khan", "India");
                dt.Rows.Add(3, "Suzanne Mathews", "France");
                dt.Rows.Add(4, "Robert Schidner", "Russia");
                DataList2.DataSource = dt;
                DataList2.DataBind();
                DataTable dt2 = new DataTable();
                dt2.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
                dt2.Rows.Add(1, "John Hammond", "United States");       
                DataList1.DataSource = dt2;
                DataList1.DataBind();
            }
        }

Output:

Best regards

Cathy

Answer 2

User-2074858223 posted

Ok i tried your example but its not showing what i really needed, here is what am looking at, i have two tables one is users posts table and the other is user comment table, usercomment table holds the comments of users of every post, so now each of the post will have a button called comments in datalist2, when i click on any of the buttons on datalist2 it will pop up the comments of that post.

below is the table of user posts and user comments

CREATE TABLE [dbo].[USERPost](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[UserName] [varchar](50) NULL,
 CONSTRAINT [PK_USERPost] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

ALTER TABLE [dbo].[USERPost] ADD  CONSTRAINT [DF_USERPost_ShareDate]  DEFAULT (getdate()) FOR [ShareTodayDate]
GO

ALTER TABLE [dbo].[USERPost] ADD  CONSTRAINT [DF_USERPost_SendDate]  DEFAULT (getdate()) FOR [SendDate]
GO
==========================


CREATE TABLE [dbo].[PostComment](
	[TableID] [int] IDENTITY(1,1) NOT NULL,
	[UserName] [varchar](50) NULL,
CONSTRAINT [PK_PostComment] PRIMARY KEY CLUSTERED 
(
	[TableID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

ALTER TABLE [dbo].[PostComment] ADD  CONSTRAINT [DF_PostComment_ShareDate]  DEFAULT (getdate()) FOR [ShareTodayDate]
GO

ALTER TABLE [dbo].[PostComment] ADD  CONSTRAINT [DF_PostComment_SendDate]  DEFAULT (getdate()) FOR [SendDate]
GO

procedure below

ALTER PROCEDURE [dbo].[GetUSERcomment]
	
	
	 @FriendUserName   NVARCHAR (200),
	  @UserName  NVARCHAR (200)
   
   
AS
BEGIN
SELECT f.ID, f.Comments AS id,fav.Name,fav.ImageName,fav.UserName FROM PostComment f INNER JOIN User3 fav On f.UserName = fav.UserName WHERE f.ID=@UserName 
    

    ORDER BY f.ID DESC

 <asp:DataList ID="DataList2" runat="server" >
                    <ItemTemplate>
                        <table class="table">
                            <tr>
                                <th colspan="2">
                                    <asp:Label ID="Idlabel" runat="server" Text=' <%# Eval("Id") %>'></asp:Label>     
                                </th>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:Label ID="Namelabel" runat="server" Text=' <%# Eval("Name") %>'></asp:Label>|
                                    <asp:Label ID="CountryLabel" runat="server" Text='<%#Eval("ContentPost")%>'></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                     <button type="button" data-toggle="modal" 
                                   data-target="#myModal" id="button1" >Open Modal</button>
                                </td>
                              
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:DataList>
            <!-- Modal -->
            <div class="modal fade" id="myModal" 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">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <asp:DataList ID="DataList1" runat="server">
                                <ItemTemplate>
                                    <table class="table">
                                        <tr>
                                            <th colspan="2">                                    
                                                <b><asp:Label ID="Label1" runat="server" Text='<%# Eval("Id") %>'></asp:Label></b>
                                            </th>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                          <asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>'></asp:Label>|
                                          <asp:Label ID="Label3" runat="server" Text='<%# Eval("Comments") %>'></asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                            </asp:DataList>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.Getpost();
        }
    }

    private void Getpost()
    {
        username = this.Page.User.Identity.Name;
        //string userId = Session["UserId"].ToString();

        string getADPOST = "GetUserPOSTS";
        using (SqlConnection con = new SqlConnection(constring))
        {
            con.Open();
            using (SqlCommand cmd = new SqlCommand(getADPOST, con))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                {
                    cmd.Parameters.AddWithValue("@UserName", Session["userName"]);
                    //  cmd.Parameters.AddWithValue("@FriendUserName", username);
                    //  cmd.Parameters.AddWithValue("@ID", getADPOST);
                    DataTable dt = new DataTable();
                    SqlDataAdapter sda = new SqlDataAdapter(cmd);
                    sda.Fill(dt);
                    DataList2.DataSource = dt;
                    DataList2.DataBind();


                }
            }
        }
        if (!IsPostBack)
        {
            this.Getpost2();
        }
    }

    private void Getpost2()
    {
        username = this.Page.User.Identity.Name;
        //string userId = Session["UserId"].ToString();

        string getADPOST = "GetUSERcomment";
        using (SqlConnection con = new SqlConnection(constring))
        {
            con.Open();
            using (SqlCommand cmd = new SqlCommand(getADPOST, con))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                {
                    cmd.Parameters.AddWithValue("@UserName", Session["userName"]);
                    cmd.Parameters.AddWithValue("@FriendUserName", username);
                    cmd.Parameters.AddWithValue("@ID", username);
                    DataTable dt = new DataTable();
                    SqlDataAdapter sda = new SqlDataAdapter(cmd);
                    sda.Fill(dt);
                    DataList1.DataSource = dt;
                    DataList1.DataBind();

                }
            }


        }
    }
}
       

Answer 3

User2103319870 posted

micah2012

cmd.Parameters.AddWithValue("@UserName", Session["userName"]);
                    cmd.Parameters.AddWithValue("@FriendUserName", username);
                    cmd.Parameters.AddWithValue("@ID", username);

not sure if its a typo, but per stored procedure has only two parameters and we have three paramters in code. Try commenting out the below line and see if that resolves the issues.

cmd.Parameters.AddWithValue("@ID", username);

Additionally add a try catch block to your code which helps in finding out the actual issue

 private void Getpost2()
        {
            try
            {
                username = this.Page.User.Identity.Name;
                //string userId = Session["UserId"].ToString();

                string getADPOST = "GetUSERcomment";
                using (SqlConnection con = new SqlConnection(constring))
                {
                    con.Open();
                    using (SqlCommand cmd = new SqlCommand(getADPOST, con))
                    {
                        cmd.CommandType = CommandType.StoredProcedure;
                        {
                            cmd.Parameters.AddWithValue("@UserName", Session["userName"]);
                            cmd.Parameters.AddWithValue("@FriendUserName", username);
                            //cmd.Parameters.AddWithValue("@ID", username);
                            DataTable dt = new DataTable();
                            SqlDataAdapter sda = new SqlDataAdapter(cmd);
                            sda.Fill(dt);
                            DataList1.DataSource = dt;
                            DataList1.DataBind();

                        }
                    }


                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

Answer 4

User-2074858223 posted

Server Error in '/' Application.
Procedure or function 'GetUSERcomment' expects parameter '@Id', which was not supplied.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Data.SqlClient.SqlException: Procedure or function 'GetUSERcomment' expects parameter '@Id', which was not supplied.

Source Error:


Line 101:        catch (Exception ex)
Line 102:        {
Line 103:            throw ex;
Line 104:        }

Answer 5

User-707554951 posted

Hi micah2012,

From your description, your datatable design has some problem.

You should have something as below:

Posts table:

CREATE TABLE [dbo].[Posts] (
    [Id]       INT           NOT NULL,
    [Name]     NVARCHAR (50) NULL,
    [Contents] NVARCHAR (50) NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

Comments table:

CREATE TABLE [dbo].[Comments] (
    [Id]       INT           NOT NULL,
    [PostId]   INT           NULL,
    [Name]     NVARCHAR (50) NULL,
    [Comments] NVARCHAR (50) NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

The you could use the following code to realize what you want(use Jquery ajax to avoid post back).

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button[id*='button1']").click(function () {
                var dat = $("table[id='DataList1'] ").clone;
             
                var id = $(this).parent().parent().prevAll("tr").eq(1).find("span[id*='Idlabel']").html();
                $.ajax({
                    type: "POST",
                    url: "/CaseTest/CS.aspx/GetComents",
                    data: '{Id: "' + id + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    }
                });
            });
          
        });
      
        function Clear() {
            $("table[id='DataList1'] ").find("table").each(function () {            
                if ($(this).find(".Id").html()!="d") {
                    $(this).remove();
                }
            });
            $("table[id='DataList1'] ").find("tr").eq(0).show();
        }
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var comments = xml.find("Table");
            var repeatColumns = parseInt("<%=DataList1.RepeatColumns == 0 ? 1 : DataList1.RepeatColumns %>");
            var rowCount = Math.ceil(comments.length / repeatColumns);
            var i = 0;
            while (i < repeatColumns * rowCount) {
                var row = $("table[id='DataList1'] ").find("tr").eq(0).clone();   
                for (var j = 0; j < repeatColumns; j++) {
                    var comment = $(comments[i]);
                    if (comment.length== 0) {
                        row.find("table:last").remove();
                    }
                    else {
                        row.find(".Id").eq(j).html(comment.find("Id").text());
                        row.find(".Name").eq(j).html(comment.find("Name").text());
                        row.find(".Con").eq(j).html(comment.find("Comments").text());
                    }
                  
                }
                i++;
            
               $("table[id='DataList1'] ").append(row);
            }
            $("table[id='DataList1'] ").find("tr").eq(0).css("display","none");

        }
    </script>

  <asp:DataList ID="DataList2" runat="server">
            <ItemTemplate>
                <table class="table">
                    <tr>
                        <th colspan="2">
                            <asp:Label ID="Idlabel" runat="server" Text=' <%# Eval("Id") %>'></asp:Label>
                        </th>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Label ID="Namelabel" runat="server" Text=' <%# Eval("Name") %>'></asp:Label>|
                                    <asp:Label ID="CountryLabel" runat="server" Text='<%#Eval("Contents")%>'></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" data-toggle="modal"
                                data-target="#myModal" id="button1">
                                Comments</button>
                        </td>

                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>
        <!-- Modal -->
        <div class="modal fade" id="myModal" 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">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>fff</p>
                        <asp:DataList ID="DataList1" runat="server" RepeatLayout="Table" RepeatColumns="1"
                            CellPadding="2" CellSpacing="2">
                            <ItemTemplate>
                                <table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px; border: dashed 2px #04AFEF; background-color: #B0E2F5">
                                    <tr>
                                        <td>
                                            <b><u><span class="Id"><%# Eval("Id") %></span></u></b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <b>Name: </b><span class="Name"><%# Eval("Name") %></span><br />
                                           <b>Comments:</b><span class="Con"><%# Eval("Comments") %></span><br />
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </asp:DataList>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="Clear()">Close</button>
                    </div>
                </div>
            </div>
        </div>

Output:

Related link:

https://www.aspsnippets.com/Articles/ASPNet-jQuery-AJAX-CRUD-Select-Insert-Edit-Update-and-Delete-in-ASPNet-GridView-using-jQuery-AJAX.aspx

Best regards

Cathy

Answer 6

User-2074858223 posted

Hi am getting only the first comments, if i click other comments it will stilll be showing same first comment, i guess its because of not selecting it 
by ID, please can you help to make it select by ID?

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.Getpost();
        }
    }

    private void Getpost()
    {
        username = this.Page.User.Identity.Name;
        //string userId = Session["UserId"].ToString();

        string getADPOST = "GetUserPOSTS";
        using (SqlConnection con = new SqlConnection(constring))
        {
            con.Open();
            using (SqlCommand cmd = new SqlCommand(getADPOST, con))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                {
                    cmd.Parameters.AddWithValue("@UserName", Session["userName"]);
                    //  cmd.Parameters.AddWithValue("@FriendUserName", username);
                    //  cmd.Parameters.AddWithValue("@ID", getADPOST);
                    DataTable dt = new DataTable();
                    SqlDataAdapter sda = new SqlDataAdapter(cmd);
                    sda.Fill(dt);
                    DataList2.DataSource = dt;
                    DataList2.DataBind();


                }
            }
        }
          if (!IsPostBack)
        {
            BindDataListComment();
        }
    }




    protected void BindDataListComment()
    {



        String strConnString = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
        SqlConnection conn = new SqlConnection(strConnString);
        //    SqlCommand cmdd55 = new SqlCommand();
        SqlCommand cmd = new SqlCommand("SELECT * FROM PostComment  ", conn);
        cmd.Parameters.AddWithValue("@UserName", Session["userName"]);
        cmd.Parameters.AddWithValue("@FriendUserName", username);
      //  cmd.Parameters.AddWithValue("@ID", username);
        cmd.Connection = conn;
        try
        {
            conn.Open();
            //Label2.Text = "No Records Found";


            DataList1.DataSource = cmd.ExecuteReader();
            DataList1.DataBind();
        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {
            conn.Close();
            conn.Dispose();


        }

    }

ALTER PROCEDURE [dbo].[GetUSERcomment]
	
	
	 @FriendUserName   NVARCHAR (200),
	  @UserName  NVARCHAR (200),
	  @Id  NVARCHAR (200)
	 
   
   
AS
BEGIN
SELECT f.ID, f.Comments AS id,fav.Name,fav.ImageName,fav.UserName FROM PostComment f INNER JOIN User3 fav On f.UserName = fav.UserName WHERE f.ID=@Id 
    

    ORDER BY f.ID DESC
END

Answer 7

User-2074858223 posted

please can i see your code behind?

Answer 8

User-707554951 posted

Hi micah2012

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button[id*='button1']").click(function () {
                var dat = $("table[id='DataList1'] ").clone;          
                var id = $(this).parent().parent().prevAll("tr").eq(1).find("span[id*='Idlabel']").html();
                $.ajax({
                    type: "POST",
                    url: "/CaseTest/CS.aspx/GetComents",
                    data: '{Id: "' + id + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    }
                });
            });
          
        });
      
        function Clear() {
            $("table[id='DataList1'] ").find("table").each(function () {            
                if ($(this).find(".Id").html()!=" ") {
                    $(this).remove();
                }
            });
            $("table[id='DataList1'] ").find("tr").eq(0).show();
        }
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var comments = xml.find("Table");
            var repeatColumns = parseInt("<%=DataList1.RepeatColumns == 0 ? 1 : DataList1.RepeatColumns %>");
            var rowCount = Math.ceil(comments.length / repeatColumns);
            var i = 0;
            while (i < repeatColumns * rowCount) {
                var row = $("table[id='DataList1'] ").find("tr").eq(0).clone();   
                for (var j = 0; j < repeatColumns; j++) {
                    var comment = $(comments[i]);
                    if (comment.length== 0) {
                        row.find("table:last").remove();
                    }
                    else {
                        row.find(".Id").eq(j).html(comment.find("Id").text());
                        row.find(".Name").eq(j).html(comment.find("Name").text());
                        row.find(".Con").eq(j).html(comment.find("Comments").text());
                    }
                  
                }
                i++;
            
               $("table[id='DataList1'] ").append(row);
            }
            $("table[id='DataList1'] ").find("tr").eq(0).css("display","none");

        }
    </script>

  <asp:DataList ID="DataList2" runat="server">
            <ItemTemplate>
                <table class="table">
                    <tr>
                        <th colspan="2">
                            <asp:Label ID="Idlabel" runat="server" Text=' <%# Eval("Id") %>'></asp:Label>
                        </th>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Label ID="Namelabel" runat="server" Text=' <%# Eval("Name") %>'></asp:Label>|
                                    <asp:Label ID="CountryLabel" runat="server" Text='<%#Eval("Contents")%>'></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" data-toggle="modal"
                                data-target="#myModal" id="button1">
                                Comments</button>
                        </td>

                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>
        <!-- Modal -->
        <div class="modal fade" id="myModal" 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">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>fff</p>
                        <asp:DataList ID="DataList1" runat="server" RepeatLayout="Table" RepeatColumns="1"
                            CellPadding="2" CellSpacing="2">
                            <ItemTemplate>
                                <table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px; border: dashed 2px #04AFEF; background-color: #B0E2F5">
                                    <tr>
                                        <td>
                                            <b><u><span class="Id"><%# Eval("Id") %></span></u></b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <b>Name: </b><span class="Name"><%# Eval("Name") %></span><br />
                                           <b>Comments:</b><span class="Con"><%# Eval("Comments") %></span><br />
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </asp:DataList>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="Clear()">Close</button>
                    </div>
                </div>
            </div>
        </div>

CodeBehind as below.

  protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this.BindDataList();
                BindDummyRow();
            }
        }

        private void BindDummyRow()
        {
            DataTable dummy = new DataTable();
            dummy.Columns.Add("Id");
            dummy.Columns.Add("Name");
            dummy.Columns.Add("Comments");
            dummy.Rows.Add(" "," "," ");
            DataList1.DataSource = dummy;
            DataList1.DataBind();
        }

        private void BindDataList()
        {
            string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("select Id, Name,Contents from Posts"))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter())
                    {
                        cmd.CommandType = CommandType.Text;
                        cmd.Connection = con;
                        sda.SelectCommand = cmd;
                        using (DataTable dt = new DataTable())
                        {
                            sda.Fill(dt);
                            DataList2.DataSource = dt;
                            DataList2.DataBind();
                        }
                    }
                }
            }
        }
        [System.Web.Services.WebMethod]
        public static string GetComents(string Id)
        {
            string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("select Id, Name,Comments from Comments where PostId=@PostId"))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter())
                    {
                        cmd.Parameters.AddWithValue("@PostId", Int16.Parse(Id));
                        cmd.CommandType = CommandType.Text;
                        cmd.Connection = con;
                        sda.SelectCommand = cmd;
                        using (DataSet ds = new DataSet())
                        {
                            sda.Fill(ds);
                            return ds.GetXml();
                        }
                    }
                }
            }
        }

Output:

Best regards

Cathy