[英]Transfer list from code behind to aspx page
我想動態填充列表並在將鼠標懸停在按鈕上時顯示列表
<div class="invite">
<asp:Button ID="Button1" runat="server" Text="Invite" CssClass="invite-link"/>
<div class="invite-drop">
<div class="holder">
<ul runat="server">
<li>
<a href="#">
<img src="images/img3.png" width="22" height="22" alt="image description" />
<span>Chris Robin</span>
</a>
</li>
<li>
<a href="#">
<img src="images/img3.png" width="22" height="22" alt="image description" />
<span>Danny Defoee</span>
</a>
</li>
<li>
<a href="#">
<img src="images/img3.png" width="22" height="22" alt="image description" />
<span>Gustav Lee</span>
</a>
</li>
<li>
<a href="#">
<img src="images/img3.png" width="22" height="22" alt="image description" />
<span>Eric Rees</span>
</a>
</li>
</ul>
<a class="select" href="#">Or select friend</a>
</div>
</div>
</div>
我的清單如下,我正在嘗試動態構建它:
HtmlGenericControl list = new HtmlGenericControl("ul");
for (int i = 0; i < 3; i++)
{
HtmlGenericControl listItem = new HtmlGenericControl("li");
HtmlGenericControl anchor = new HtmlGenericControl("a");
Image im = new Image();
//im.ImageUrl = ds.Tables[0].Rows[1].ItemArray.ToString();
anchor.Attributes.Add("href", "");
anchor.Controls.Add(im);
anchor.InnerText = "TabX";
}
編輯:
我已經成功地從代碼背后傳輸了列表,但是格式不正確,想要在另一個下面顯示圖像
我的問題是如何將其轉移到aspx設計頁面? 並將其顯示在懸停事件上
請幫忙
從服務器端將動態創建的ul
添加到Page
控件集合中或頁面上的任何位置,並默認通過CSS或內聯樣式display:none
將其隱藏。 給ul
一個id
或class
,這將有助於在客戶端上查找元素。
在客戶端上,您可以使用$('ul.classname')
或$('#listId)
找到它,然后在懸停事件上使用show()
顯示它,並根據需要定位它。
根據您的代碼。
為ul
一個ID
<ul ID="list" runat="server">
請注意,在for
循環中,應將錨添加到列表控件中。
for (int i = 0; i < 3; i++)
{
HtmlGenericControl listItem = new HtmlGenericControl("li");
HtmlGenericControl anchor = new HtmlGenericControl("a");
Image im = new Image();
//im.ImageUrl = ds.Tables[0].Rows[1].ItemArray.ToString();
anchor.Attributes.Add("href", "");
anchor.Controls.Add(im);
anchor.InnerText = "TabX";
list.Controls.Add(anchor);
}
s
$('.invite-link').hover(function(){
$('#list').show();
}, function(){
$('#list').hide();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.