如何在ASP.NET C＃中使用jquery绑定ul标签

Question

I am working on an asp.net 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">
</ul>

Here is my code in jquery to bind the ul tag

function BindImage(id) {

    $.ajax({
        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) {
            alert('Fail');
        }
    });
    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) {
        alert(response.d);
    }
}

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

[System.Web.Script.Services.ScriptMethod()]
    [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();
        //a.InnerHtml

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

        foreach (DataRow dtrow in dt.Rows)
        {
            ProductImages objProductImage = new ProductImages();
            objProductImage.ProductImage = dtrow["ProductImage"].ToString();
            details.Add(objProductImage);
        }
        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.

Answer 1

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>");

Answer 2

The problem is with your .append method which appends img contents to #ulProductImages when you say .append('<li></li>').append('..') . Also try to convert element you got from document.getElementById to jquery object. So as an alternative you can do it as below:

function OnImageSuccess(response) {
   var ulimage = document.getElementById("ulProductImages");
   $.each(response.d, function (key, value) {                
       var li=$("<li/>").append("<img src=" + value.ProductImage + " style=width:50px height:50px >"); 
       //assign it to li variable
       $(ulimage).append(li); //Convert to jquery object and append
   });
}

Answer 3

In this line you are assigning a plain javascript object to a variable -

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

However in this line you are trying to use that variable as if it were a jQuery object -

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

Change your variable declaration to the following to correct that -

var ulimage = $("#ulProductImages")

However as Rahul Singh points out your list is still malformed. I personally would change the second line to -

ulimage.append($("<li>").append("<img>", {
   src : value.ProductImage,
   style : "width:50px height:50px"
}));