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方法，当您说img时，会将#ulProductImages内容附加到.append('<li></li>').append('..')。还尝试将从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"
}));

如何在asp.net C＃中使用jquery绑定ul标签

3 个答案: