[英]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.