Hi micah,
Refer the below sample code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<!-- Bootstrap -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
// Button 1 click
$('[id*=Button1]').on('click', function () {
var id = $(this).closest('tr').find($('[id*=ProdID]')).text();
$.ajax({
type: "POST",
url: "CS.aspx/GetNameUserName",
data: '{id:"' + id + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
// clear old value
$(".id").html('');
$(".imageuser").attr('src', '');
$(".username").html('');
$(".name").html('');
//$(".senddate").html('');
$(".contentpost").html('');
// Assign new value
if (response.d.length > 0) {
$(".id").html(response.d[0].Id);
$(".imageuser").attr('src', 'PROFILEPHOTOS/' + response.d[0].Imageuser);
$(".username").html(response.d[0].UserName);
$(".name").html(response.d[0].Name);
//$(".senddate").html(response.d[0].SendDate);
$(".contentpost").html(response.d[0].ContentPost);
}
$('#myModal').modal('show');
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
return false;
});
//Save Modal details
$("#btnSave").on("click", function () {
var id = $('.id').html().trim();
var name = $('.name').html().trim();
var username = $('.username').html().trim();
var contentPost = $('.contentpost').html().trim();
// If you ant to insert "PROFILEPHOTOS/Test.jpg" format then use the below line
var imageuser = $('.imageuser').attr('src').trim();
//If you ant to insert "Test.jpg" format then use the below line
var imageuser = $('.imageuser').attr('src').slice(($('.imageuser').attr('src').lastIndexOf('/') + 1), $('.imageuser').attr('src').length);
var comments = $("#comments2").val();
$.ajax({
type: "POST",
url: "CS.aspx/InsertCommenttype",
data: '{id:"' + id + '",name:"' + name + '",username:"' + username + '",contentpost:"' + contentPost + '",comments:"' + comments + '",imageuser:"' + imageuser + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response.d);
$('#myModal').modal('hide');
// clear value
$(".id").html('');
$(".imageuser").attr('src', '');
$(".username").html('');
$(".name").html('');
//$(".senddate").html('');
$(".contentpost").html('');
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DataList ID="dlstProducts" runat="server" RepeatColumns="3" CellSpacing="10"
RepeatDirection="Horizontal" RepeatLayout="Table">
<ItemTemplate>
<table class="table table-bordered">
<tr>
<td>
<b>ID : </b>
<asp:Label ID="ProdID" runat="server" Text='<%#Eval("Id") %>' /><br />
<b>Name : </b>
<asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>' /><br />
<b>UserName : </b>
<asp:Label ID="lblUserName" runat="server" Text='<%#Eval("UserName") %>' />
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Show" class="btn btn-primary btn-sm" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="container">
<div class="row">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
<%--Modal 1 Start--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="H2">
Pass To Followers</h4>
</div>
<div class="modal-header" style="background-color: #E8F5FD">
<textarea name="comments2" rows="1" cols="20" id="comments2" class=" form-control"
placeholder="Comment"></textarea>
</div>
<div id="modalbody" align="center" class="modal-body">
<div class="tblCustomer">
<div>
<span class="pull-left " style="margin-right: 8px">
<asp:Image ID="Imageuser" runat="server" ImageUrl='<%# String.Format("PROFILEPHOTOS/{0}",Eval("ImageName").ToString()) %>'
class="imageuser media-object img-rounded animated fadeInDown" Style="width: 45px;
height: 45px;" />
<div class="clearfix">
</div>
</span>
<div class="pull-left " style="">
<div class="clearfix">
</div>
</div>
<div class="pull-left " style="">
<span class="name" style="font-family: Arial, Helvetica, sans-serif; font-weight: bold">
<%# Eval("Name") %></span> // <span class="username">
<%# Eval("UserName") %></span></div>
<div class=" " style="">
</div>
<div class="clearfix">
</div>
<div class="" style="margin-bottom: 4px">
</div>
<span class="contentpost" style="font-family: Arial, Helvetica, sans-serif; font-weight: normal">
<%# Eval("ContentPost").ToString().Substring(0,180)+"...(Read More)"%></span><br />
<div class="clearfix">
</div>
<span></span><span class="id">
<%# Eval("ID") %></span>
</div>
</div>
<div class="modal-footer">
<span>
<asp:LinkButton ID="btnSave" runat="server" CssClass="btn btn-info " BorderStyle="Solid"
BorderWidth="1" BorderColor="#007ACC">
<div class="">
<span class="" style="">
<asp:Label ID="Label28" runat="server" Text="" CssClass="glyphicon glyphicon-share-alt"
Font-Bold="True" Font-Size="Large"></asp:Label>
</span><span>
<asp:Label ID="Label29" runat="server" Text="Pass Now" Font-Bold="True" Font-Size="Large"></asp:Label>
</span>
</div>
</asp:LinkButton>
</span>
</div>
</div>
</div>
</div>
</div>
<%--Modal 1 End--%>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("UserName"), new DataColumn("Country") });
dt.Rows.Add(1, "Thomas Hardy", "Mic22", "Ireland");
dt.Rows.Add(2, "Mudassar Khan", "brown44", "India");
dt.Rows.Add(3, "Ana Trujillo", "ana123", "France");
dt.Rows.Add(5, "Antonio Moreno", "antonio", "Brazil");
dlstProducts.DataSource = dt;
dlstProducts.DataBind();
}
}
[WebMethod]
public static List<Customer> GetNameUserName(string id)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT ID,Name,UserName,ImageName,SendDate,ContentPost FROM USERPost WHERE ID = @ID"))
{
cmd.Connection = con;
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@ID", id);
List<Customer> customers = new List<Customer>();
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
customers.Add(new Customer
{
Id = Convert.ToInt32(sdr["ID"]),
SendDate = Convert.ToDateTime(sdr["SendDate"]),
Name = sdr["Name"].ToString(),
Imageuser = sdr["ImageName"].ToString(),
UserName = sdr["UserName"].ToString(),
ContentPost = sdr["ContentPost"].ToString()
});
}
con.Close();
return customers;
}
}
}
[WebMethod]
public static string InsertCommenttype(string id, string name, string username, string contentpost, string comments, string imageuser)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO [USERPost](ShareId,fName,UserName,FriendUserName,ShareContent,Comments,ImageName) VALUES(@ShareId,@fName,@UserName,@FriendUserName,@ShareContent,@Comments,@ImageName)"))
{
cmd.Connection = con;
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@ShareId", id);
cmd.Parameters.AddWithValue("@fName", name);
cmd.Parameters.AddWithValue("@UserName", username);
cmd.Parameters.AddWithValue("@FriendUserName", username);
cmd.Parameters.AddWithValue("@ShareContent", contentpost);
cmd.Parameters.AddWithValue("@Comments", comments);
cmd.Parameters.AddWithValue("@ImageName", imageuser);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
return "Saved";
}
public class Customer
{
public int Id { get; set; }
public string Name { get; set; }
public string UserName { get; set; }
public string Imageuser { get; set; }
public string ContentPost { get; set; }
public DateTime SendDate { get; set; }
}
