Hi, sorry guys I have posted this question yesterday but it seems like it is closed due to my mistake of posting unformatted unreadable code dump.
I ma really sorry!
so please try to help me,
This is my code from an html markup file:
<body>
<form id="form1" runat="server">
Link: http://jimfrenette.com/2011/02/jquery-mssql-pagination-and-data-templates/
<h2>Artists</h2>
<div id="artists">
<div id="pageSize">
<label>Page size</label><br />
<select>
<option>10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
<table id="artistTable">
<thead>
<tr>
<th width="100">ArtistId</th>
<th width="200">Name</th>
<th width="400">ArtistImage</th>
</tr>
</thead>
<tbody id="artistList"></tbody>
</table>
<div id="loading"></div>
<div id="pager">
<ul class="pages">
<li class="pgEmpty">first</li>
<li class="pgEmpty">prev</li>
</ul>
</div>
</div>
<div>
</div>
<script src="Scripts/jquery-1.9.0.min.js"></script>
<script src="Scripts/jquery.pager.js"></script>
<script src="Scripts/jquery.tmpl.js"></script>
<script id="artistTmpl" type="text/x-jquery-tmpl">
<tr>
<td align="right" valign="top">${artistId}</td>
<td>${artistName}</td>
<td>${artistImage}</td>
</tr>
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#loading").hide();
var pageIndex = 1, pageSize = 10, pageCount = 0;
getArtists(pageIndex);
$("#pageSize select").change(function () {
pageIndex = 1
pageSize = $(this).val();
getArtists(pageIndex);
});
function getArtists(index) {
var query = "Handlers/Json.ashx?page_number=" + index + "&page_size=" + pageSize;
pageIndex = index;
$("#artistList")
.fadeOut("medium", function () {
$("#loading").show()
$.ajax({
dataType: "json",
url: query,
jsonp: "$callback",
success: showArtists
});
});
}
function showArtists(data) {
pageCount = Math.ceil(data.total_count / pageSize),
artists = data.items;
$("#pager").pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getArtists });
$("#artistList").empty()
$("#artistTmpl").tmpl(artists).appendTo("#artistList")
$("#loading").hide().find("div").fadeIn(4000).end()
$("#artistList").fadeIn("medium")
$("#artistList tr").hover(
function () {
$(this).addClass("highlight");
},
function () {
$(this).removeClass("highlight");
});
}
});
</script>
</form>
</body>
and this the code from an .ashx file :
public class Json : IHttpHandler
{
private string ChinookConnection = WebConfigurationManager.ConnectionStrings["ChinookConnection"].ConnectionString;
private string data = "";
private int page_number = 1;
private int page_size = 25;
private int total_count = 0;
public void ProcessRequest(HttpContext context)
{
page_size = Convert.ToInt32(context.Request.QueryString["page_size"]);
page_number = Convert.ToInt32(context.Request.QueryString["page_number"]);
StringBuilder json = new StringBuilder();
string artistId = "";
string name = "";
string ThumbnailImage = "";
int Count = 0;
DataSet artist = GetArtistsByPage(page_size, page_number);
foreach (DataRow dr in artist.Tables[0].Rows)
{
if (Count == 0)
artistId = dr["ArtistId"].ToString();
name = JavaScriptStringEncode(dr["Name"].ToString());
ThumbnailImage = string.Format("../Image/{0}", dr["ThumbnailImage"].ToString());
json.Append("{");
json.Append("\"artistId\":\"" + artistId + "\",");
json.Append("\"artistName\":\"" + name + "\",");
json.Append("\"artistImage\":\"<img src='" + ThumbnailImage + "'>\"");
json.Append("},");
total_count = Convert.ToInt32(dr["TotalCount"]);
}
data = "{\"items\":[";
if (json.Length != 0)
{
data += json.ToString(0, json.Length - 1);
}
data += "],\"page_number\":" + page_number + ",\"page_size\":" + page_size + ",\"total_count\":" + total_count + "}";
context.Response.Clear();
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.ContentType = "application/json;charset=utf-8";
context.Response.Flush();
context.Response.Write(data);
}
public bool IsReusable
{
get
{
return false;
}
}
public DataSet GetArtistsByPage(int pageSize, int pageNumber)
{
SqlConnection con = new SqlConnection(ChinookConnection);
SqlCommand cmd = new SqlCommand("[ch_ArtistsByPage]", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@pageSize", pageSize);
cmd.Parameters.AddWithValue("@pageNumber", pageNumber);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds, "Artists");
return ds;
}
public string JavaScriptStringEncode(string message)
{
if (String.IsNullOrEmpty(message))
{
return message;
}
StringBuilder builder = new StringBuilder();
JavaScriptSerializer serializer = new JavaScriptSerializer();
serializer.Serialize(message, builder);
return builder.ToString(1, builder.Length - 2);
}
}
And this my sp ch_ArtistsByPage :
ALTER PROCEDURE [dbo].[ch_ArtistsByPage]
(
@pageSize INT,
@pageNumber INT
)
AS
DECLARE
@firstRow INT,
@lastRow INT
SELECT @firstRow = (@pageNumber - 1) * @pageSize + 1,
@lastRow = (@pageNumber - 1) * @pageSize + @pageSize ;
with Artists
as
(
select ROW_NUMBER() OVER (ORDER BY Ar.[ArtistId] asc) AS SN, Ar.ArtistId,
Ar.[Name], AI.[ThumbnailImage], COUNT(*) OVER () AS TotalCount from Artist Ar
inner join ArtistImage AI on AI.ArtistId = Ar.ArtistId
)
select * from Artists
WHERE SN BETWEEN @firstRow AND @lastRow
but the thing is the data are coming(displayed) but the images are not displayed as image,
I think the problem is on this line of code:
weather this line :
ThumbnailImage = string.Format("../Image/{0}", dr["ThumbnailImage"].ToString());
or this one:
json.Append("\"artistName\":\"<img src='" + ThumbnailImage + "'>\"");
so this the full code and hope it is clear and readable, so please help fixing this issue
Submit an article or tip