How to fetch image from database using jquery

Question

 Default.aspx

-----------------------

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/excite-bike/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
var min = 0;
var max = 0;
$(function () {
//Get records for all prices.
GetRecords(0, 0);
});
function SetSlider() {
//Intialize the slider
$("#price_slider").slider({
min: min,
max: max,
step: 5,
values: [min, max],
stop: function (event, ui) {
var start = parseInt(ui.values[0]);
var end = parseInt(ui.values[1]);
$("#price_slider_value").html("Rs." + ui.values[0] + " - Rs." + ui.values[1]);

//When slider is stopped then get records for range.
GetRecords(start, end);
},
slide: function (event, ui) {
if ((ui.values[0] + 5) >= ui.values[1]) {
return false;
}
}
});
//Display the minimum and maximum values.
$("#price_slider_value").html("Rs." + min + " - Rs." + max);
}
function GetRecords(start, end) {
$(".modal").show();
$.ajax({
type: "POST",
url: "CS.aspx/GetProducts",
data: '{start: ' + start + ', end: ' + end + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
if (min == 0 && max == 0) {
//Only for the first time set the minimum and maximum values.
min = parseInt(xml.find("Range").eq(0).find("Min").text());
max = parseInt(xml.find("Range").eq(0).find("Max").text());
SetSlider();
}
var products = xml.find("To_Let_Table");
var repeatColumns = parseInt("<%=RepeatColumns %>");
$("#dvProducts").html("<div id = 'empty'>There are no products available for the selected price range.</div>");
if (products.length > 0) {
//Copy the DataList HTML into the DIV.
$("#dvProducts").html($("[id*=dlProducts]").parent().html());
}
$("#dvProducts > table").removeAttr("id");
var rowCount = Math.ceil(products.length / repeatColumns);
var j = 0;
products.each(function () {
var product = $(this);
var row = $("#dvProducts > table .item:last").closest("tr");
if ($(".is_used[value='1']", row).length == repeatColumns) {
row = $("#dvProducts > table tr").eq(0).clone();
$(".is_used", row).val("0");
$("#dvProducts > table").append(row);
j = 0;
} else {
row = $("#dvProducts > table .item:last").closest("tr");
}
var cell = $(".item", row).eq(j);
$(".name", cell).html(product.find("Title").text());
var productId = product.find("Id").text();
$(".product_id", cell).val(productId);
// $(".button", cell).text(product.find("Price").text());
$(".desc", cell).text(product.find("Description").text());
$(".city", cell).text(product.find("City").text());
$(".is_used", cell).attr("value", "1");
var img = $(".image", cell);//Here what to write to fetch image
img.attr("src", "images/.jpg");
j++;
});
$("#dvProducts > table .is_used[value='0']").closest(".item").remove();
$(".modal").hide();
}

</script>

 

<div id="price_slider_value" style="width: 400px">
</div>
<div id="price_slider">
</div>
<hr />
<div id="dvProducts" >

</div>
<div style="display:none;">
<asp:DataList ID="dlProducts" runat="server" RepeatLayout="Table" RepeatColumns="1"
CellPadding="2" CellSpacing="20">
<ItemTemplate>
<div style="height: 140px; width: 810px; background-color: #F5F5F5; border: 1px solid #E6E6E6;
box-shadow: 2px 2px 2px #E6E6E6; margin-bottom: 0px; margin-left: 300px;">
<table class="item" cellpadding="0" cellspacing="0" border="0">
<tr>
<td rowspan="3" align="center" class="body">

<img class="image" src="<%#FormatImage(Eval("Image")) %>" alt="" />
</td>
<td align="center" class="header">
<span class="name">
<%# Eval("Title")%></span>
</td>
<td>
&nbsp;</td>
</tr>
<tr>
<td>
<span class="desc">
<%# Eval("Description")%></span></td>
<td>
<img src="BUTTN.png" /></td>
</tr>
<tr>
<td>
<span class="city">
<%# Eval("City")%></span></td>
<td>
<input type="hidden" class="is_used" value="0" />
<input type="hidden" class="product_id" value='<%# Eval("Id")%>' /></td>
</tr>


</table></div>
</ItemTemplate>
</asp:DataList>
</div>

here is my default.aspx.cs page

private void BindDummyItem()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("Id");
dummy.Columns.Add("Title");
dummy.Columns.Add("Price");
dummy.Columns.Add("Description");
dummy.Columns.Add("Image");
dummy.Columns.Add("City");
dummy.Columns.Add("Location");
int count = dlProducts.RepeatColumns == 0 ? 1 : dlProducts.RepeatColumns;
for (int i = 0; i < count; i++)
{
dummy.Rows.Add();
}
dlProducts.DataSource = dummy;
dlProducts.DataBind();
this.RepeatColumns = dlProducts.RepeatColumns == 0 ? 1 : dlProducts.RepeatColumns;
}
[WebMethod]
public static string GetProducts(int start, int end)
{
//System.Threading.Thread.Sleep(2000);
string strConnString = ConfigurationManager.ConnectionStrings["Constr"].ConnectionString;
DataSet ds = new DataSet();
using (SqlConnection con = new SqlConnection(strConnString))
{
string query = "select Id,C_id,S_id,Title,Description,Image,Contact,Price,Name,Email,City,Location,IsActive from [findeasy].[To_Let_Table] where (Price BETWEEN @Start AND @End) OR (@Start = 0 AND @End = 0)";
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Start", start);
cmd.Parameters.AddWithValue("@End", end);
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
sda.Fill(ds, "To_Let_Table");
}
}
}
DataTable dt = new DataTable();
dt.TableName = "Range";
using (SqlConnection con = new SqlConnection(strConnString))
{
string query = "SELECT MIN(Price) [Min], MAX(Price) [Max] FROM [findeasy].[To_Let_Table]";
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.Connection = con;
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
sda.Fill(dt);
}
}
}
ds.Tables.Add(dt);
return ds.GetXml();
}
public string FormatImage(object img)// for image showing in grid view ../ before image
{
string path = "";
if (img != null && !String.IsNullOrEmpty(img.ToString()))
{
path = "../" + img.ToString();
}
return path;
}