如何在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"
}));