如何在ASP.NET C＃中使用jquery綁定ul標簽

Question

我正在一個asp.net應用程序上，我必須使用jquery綁定ul標簽。 在ul標簽內，我想綁定來自數據庫的圖像。 這是我在應用程序中的ul標簽

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

這是我在jquery中綁定ul標簽的代碼

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

這是我用來從數據庫調用數據的網絡方法

[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();
    }

當我在上面的web方法周圍放置了調試器后，控制器將轉到那里並從成功的數據中獲取數據。 然后轉到jquery內的OnImageSuccess方法，但ulProductImages標記已綁定。 請在這里幫助我。

Answer 1

首先，jQuery append方法適用於jQuery對象，但是您將通過document.getElementById("ulProductImages")返回原始Javascript對象。

因此，首先您應該使用jQuery來獲取它：

var ulimage = $("#ulProductImages");

接下來，您應該將圖像放在li標簽之間：

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

Answer 2

問題在於您的.append方法，當您說.append('<li></li>').append('..')時，該方法會將img內容附加到#ulProductImages 。 還嘗試將您從document.getElementById獲得的元素轉換為jquery對象。 因此，您也可以按照以下步驟進行操作：

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

在這一行中，您將普通的javascript對象分配給變量-

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

但是，在這一行中，您嘗試使用該變量，就像它是jQuery對象一樣-

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

將變量聲明更改為以下內容以更正該錯誤-

var ulimage = $("#ulProductImages")

但是，正如Rahul Singh指出的那樣，您的列表仍然格式錯誤。 我個人將第二行更改為-

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