4
Answers

Ajax bind images from folder to image controls of datalist?

Ask a question
How to bind images from application's folder  (which name come from databse) to image controls of datalist item template?
 
I tried like below
 
/*asp.net */
 
<asp:DataList ID="dlImages" runat="server" RepeatColumns="6">
<ItemTemplate>
<a id="imageLink" href='<%# Eval("ImageName","~/images/fabrics/{0}") %>' title='<%#Eval("Descript") %>' rel="lightbox[Brussels]" runat="server" >
<asp:Image ID="Image1" ImageUrl='<%# Bind("ImageName", "~/images/fabrics/{0}") %>' runat="server" Width="100px" Height="60px" hspace="20px"/><br />
<asp:Label ID="lbl1" runat="server" Text='<%#Eval("ImageAssignedName") %>' Height="30px"></asp:Label>
</a>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Bottom"/>
</asp:DataList>
 
/*Jquery Ajax call */ 
 
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebForm2.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function (data) {
alert('Hello 1');
for (var i = 0; i < data.d.length; i++) {
alert(data.d[i].ImageAssignedName);
$("#dlImages").append(data.d[i].ImageName + data.d[i].Descript + data.d[i].ImageAssignedName);
}
},
error: function (result) {
alert("Error");
}
});
});
</script>
 
 
/*c# code behind*/
 
[WebMethod]
public static UserDetails[] BindDatatable()
{
DataTable dt = new DataTable();
List<UserDetails> details = new List<UserDetails>();
using (SqlConnection connnection = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString.ToString()))
{
using (SqlCommand cmd = new SqlCommand("SELECT Fabrics.ImageName,Fabrics.Descript,ImageAssignedName from Fabrics", connnection))
{
connnection.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dtrow in dt.Rows)
{
UserDetails user = new UserDetails();
user.ImageName = dtrow["ImageName"].ToString();
user.Descript = dtrow["Descript"].ToString();
user.ImageAssignedName = dtrow["ImageAssignedName"].ToString();
details.Add(user);
}
}
}
return details.ToArray();
}
public class UserDetails
{
public string ImageName { get; set; }
public string Descript { get; set; }
public string ImageAssignedName { get; set; }
}
 
 
 

Answers (4)