Sunny Sandeep Sunny Sandeep - 5 months ago 46x
Javascript Question

How to Bind ul tag using jquery in C#

I am working on an application where i have to bind the ul tag using the jquery. Inside the ul tag i want to bind images coming from the database. Here is my ul tag in the application

<ul class="qv_carousel d_inline_middle" id="ulProductImages">

Here is my code in jquery to bind the ul tag

function BindImage(id) {

type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Default.aspx/SelectProductImages",
data: "{'UID':'" + id + "'}",
dataType: "json",
async: true,
success: OnImageSuccess,
error: OnImageError,
failure: function (response) {
function OnImageSuccess(response) {

var ulimage = document.getElementById("ulProductImages");

$.each(response.d, function (key, value) {
ulimage.append("<li></li>").append("<img src=" + value.ProductImage + " style=width:50px height:50px >");

function OnImageError(response) {

this is the webmethod i have used call the data from the database

[System.Web.Services.WebMethod(enableSession: true)]
public static ProductImages[] SelectProductImages(string UID)
DataTable dt = new DataTable();
List<ProductImages> details = new List<ProductImages>();

//HtmlAnchor a = new HtmlAnchor();

dt = new ProductImages().SelectByProduct(Convert.ToInt64(UID));

foreach (DataRow dtrow in dt.Rows)
ProductImages objProductImage = new ProductImages();
objProductImage.ProductImage = dtrow["ProductImage"].ToString();
return details.ToArray();

When i have placed a debugger around the above webmethod then the controller goes there and fetch data from data from data from successfully. And then it goes to OnImageSuccess method inside jquery but the ulProductImages tag is getting bind. Plese help me someone here.


First of all jQuery append method works on jQuery object but you are returning a raw Javascript object by document.getElementById("ulProductImages").

So first you should fetch that with jQuery instead:

var ulimage = $("#ulProductImages");

Next, you should have your image between the li tags:

ulimage.append("<li><img src=" + value.ProductImage + " style=width:50px height:50px ></li>");