Here's the modified example, I have added a new column named as "Image"
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.BindDummyItem();
}
}
private void BindDummyItem()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("CustomerID");
dummy.Columns.Add("ContactName");
dummy.Columns.Add("Country");
dummy.Columns.Add("City");
dummy.Columns.Add("PostalCode");
dummy.Columns.Add("Phone");
dummy.Columns.Add("Fax");
dummy.Columns.Add("Image");
int count = dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns;
for (int i = 0; i < count; i++)
{
dummy.Rows.Add();
}
dlCustomers.DataSource = dummy;
dlCustomers.DataBind();
}
[WebMethod]
public static string GetCustomers()
{
string query = "SELECT top 10 *, 'http://www.aspforums.net/Avatars/Mudassar.jpg' [Image] FROM Customers";
SqlCommand cmd = new SqlCommand(query);
return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=dlCustomers]").hide();
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table");
var repeatColumns = parseInt("<%=dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns %>");
var rowCount = Math.ceil(customers.length / repeatColumns);
var i = 0;
while (i < repeatColumns * rowCount) {
var row = $("[id*=dlCustomers] tr").eq(0).clone(true);
for (var j = 0; j < repeatColumns; j++) {
var customer = $(customers[i]);
if (customer.length == 0) {
$("table:last", row).remove();
} else {
$(".name", row).eq(j).html(customer.find("ContactName").text());
$(".city", row).eq(j).html(customer.find("City").text());
$(".postal", row).eq(j).html(customer.find("PostalCode").text());
$(".country", row).eq(j).html(customer.find("Country").text());
$(".phone", row).eq(j).html(customer.find("Phone").text());
$(".fax", row).eq(j).html(customer.find("Fax").text());
$(".image", row).eq(j).attr("src", customer.find("Image").text());
}
i++;
}
$("[id*=dlCustomers]").append(row);
}
$("[id*=dlCustomers] tr").eq(0).remove();
$("[id*=dlCustomers]").show();
}
</script>
</head>
<body style="font-family: Arial; font-size: 10pt">
<form id="form1" runat="server">
<asp:DataList ID="dlCustomers" runat="server" RepeatLayout="Table" RepeatColumns="3"
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="name">
<%# Eval("ContactName") %></span></u></b>
</td>
<td><img class = "image" src = '<%# Eval("Image") %>' alt = "" /></td>
</tr>
<tr>
<td colspan = "2">
<b>City: </b><span class="city"><%# Eval("City") %></span><br />
<b>Postal Code: </b><span class="postal"><%# Eval("PostalCode") %></span><br />
<b>Country: </b><span class="country"><%# Eval("Country")%></span><br />
<b>Phone: </b><span class="phone"><%# Eval("Phone")%></span><br />
<b>Fax: </b><span class="fax"><%# Eval("Fax")%></span><br />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<br />
</form>
</body>
</html>
