如何在asp.net中使用jquery綁定ul標籤C＃

我正在研究一個asp.net應用程序，我必須使用jquery綁定ul標籤。在ul標籤裏我想綁定來自數據庫的圖像。這是我在應用如何在asp.net中使用jquery綁定ul標籤C＃

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

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

這是我使用的WebMethod從數據庫中調用數據綁定

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

當我在上面的webmethod上放置了一個調試器時，控制器會去那裏從成功的數據中獲取數據。然後它進入jQuery中的OnImageSuccess方法，但ulProductImages標籤正在綁定。請在這裏幫助我一個人。

來源

2015-10-14 Sunny Sandeep

你是否從'服務器'獲得任何'響應'？只有'console.log'成功函數中的'response'，看看你得到了什麼？ –

'append（）'返回元素容器，而不是附加的元素容器，導致您的代碼無效的HTML標記 –

是的，我正在從數據庫中獲得所需的結果。 –

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

所以首先你應該獲取該用jQuery代替：

var ulimage = $("#ulProductImages");

接下來，你應該有li標籤之間你的形象：

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

來源

2015-10-14 07:41:49

它對我有好處。 –

在這一行要指定一個普通的JavaScript對象到一個變量 -

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

但是，在這一行中，你是tryi NG使用該變量，就像它是一個jQuery對象 -

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

您的變量聲明更改爲以下糾正 -

var ulimage = $("#ulProductImages")

然而，由於拉胡爾·辛格指出您的列表仍然是畸形的。我個人會改變第二行 -

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

來源

2015-10-14 07:42:00

問題是與你的.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 
    }); 
}

來源

2015-10-14 07:46:14

它很好的解決方案。 –

如何在asp.net中使用jquery綁定ul標籤C＃

回答

相關問題