User-2074858223 posted
Hi i noted that this solution on this page link below pops up data on model by ID but when the model is closed by clicking on the background and you click another button comment it still retains the first comment displayed befor, but if i click the button
close on the model then it works please why?
https://forums.asp.net/t/2131884.aspx?How+to+display+Datalist+records+on+modal+pop+by+button+click+in+another+datalist
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();
}
}
}
}
}
<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">×</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>
Data pop up by ID on modal does not display new comments except button close is clicked
