RadListView中Panel动态添加超链接：每3个后新列顶格显示问题

DevOps 小满

2026-7-29

问题描述

我在RadListView的ItemTemplate中的Panel里，通过后台代码动态添加PDF图片超链接，需求是每添加3个超链接后，下一个超链接从新列顶部开始，但目前第3个之后的超链接无法顶格显示，恳请帮助，谢谢。

现有CSS代码

.column {
    width: 5px;
    float: left;
    margin-right: 5%;
    padding: 5px;
    box-sizing: border-box;
}

.column:nth-child(2n+1) {
    clear: right;
}

后台C#代码

protected void RadListView1_OnItemDataBound(object sender, RadListViewItemEventArgs e)
{
    if (e.Item is RadListViewDataItem)
    {
        var dataItem = ((RadListViewDataItem)e.Item).DataItem;
        // 获取当前项的数据
        //DataRowView dataItem = e.Item.DataItem as DataRowView;

        // 查找ItemTemplate中的Panel控件
        Panel panel1 = e.Item.FindControl("Panel1") as Panel;
        
        if (panel1 != null)
        {
            // 根据数据项设置Panel属性
            
            ProjectDetailsBLL projectDetailsBll = new ProjectDetailsBLL();
            List<string> emailAttachments= projectDetailsBll.GetCrmEmailLogsAttachment(Request.QueryString["proposalBuiltID"], Request.QueryString["changeOrderId"]);

            List<HyperLink> links = new List<HyperLink>();
            foreach (var attachment in emailAttachments)
            {
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment),Target = "_blank", ImageUrl = SelectImage(attachment),ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
            }

            int count = 0;
            Panel panel2 = null;
            // 将HyperLink控件添加到Panel中
            foreach (HyperLink link in links)
            {
                panel1.Controls.Add(link);
                panel1.Controls.Add(new LiteralControl("<br /><br />"));

                // 每3个链接后创建新列
                if (count % 3 == 0)
                {
                    panel2 = new Panel();
                    panel2.CssClass = "column";
                    panel1.Controls.Add(panel2);
                    panel1.Controls.Add(new LiteralControl("<br /><br />"));
                }

                //Panel panel2 = panel1.Controls[panel1.Controls.Count - 1] as Panel;
                if (panel2 != null)
                {
                    panel2.Controls.Add(link);
                    panel2.Controls.Add(new LiteralControl("<br /><br />"));
                }

                count++;
            }
        }
    }
}

当前效果截图

超链接列显示异常

生成的HTML代码

<tr height="20">
    <td class="Heading">
        Attachment: 
       
    </td>
 
    <td class="row">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div >
        <div id="ctl00_MainContent_RadListView1_ctrl0_Panel1">
<br /><br /><div class="column">
    <a title="Proposal.pdf" href="\\hggd.com\EmailAttachments\638133556853615096_61507_0_0\Proposal.pdf" target="_blank"><img title="Proposal.pdf" src="images/acrobat.gif" alt="" style="border-width:0px;" /></a><br /><br /><a title="Proposal.pdf" href="\\hggd.com\EmailAttachments\638133556853615096_61507_0_0\Proposal.pdf" target="_blank"><img title="Proposal.pdf" src="images/acrobat.gif" alt="" style="border-width:0px;" /></a><br /><br /><a title="Proposal.pdf" href="\\hggd.com\EmailAttachments\638133556853615096_61507_0_0\Proposal.pdf" target="_blank"><img title="Proposal.pdf" src="images/acrobat.gif" alt="" style="border-width:0px;" /></a><br /><br />
</div><br /><br /><br /><br /><br /><br /><br /><br /><div class="column">
    <a title="Proposal.pdf" href="\\hggd.com\EmailAttachments\638133556853615096_61507_0_0\Proposal.pdf" target="_blank"><img title="Proposal.pdf" src="images/acrobat.gif" alt="" style="border-width:0px;" /></a><br /><br /><a title="Proposal.pdf" href="\\hggd.com\EmailAttachments\638133556853615096_61507_0_0\Proposal.pdf" target="_blank"><img title="Proposal.pdf" src="images/acrobat.gif" alt="" style="border-width:0px;" /></a><br /><br /><a title="Proposal.pdf" href="\\hggd.com\EmailAttachments\638133556853615096_61507_0_0\Proposal.pdf" target="_blank"><img title="Proposal.pdf" src="images/acrobat.gif" alt="" style="border-width:0px;" /></a><br /><br />
</div><br /><br /><br /><br /><br /><br /><br /><br /><div class="column">
    <a title="Proposal.pdf" href="\\hggd.com\EmailAttachments\638133556853615096_61507_0_0\Proposal.pdf" target="_blank"><img title="Proposal.pdf" src="images/acrobat.gif" alt="" style="border-width:0px;" /></a><br /><br />
</div><br/><br/></div></div></td><td class="row"></td></tr>

解决方案

问题根源

后台逻辑重复渲染：循环中同时把链接添加到panel1和列面板panel2，导致重复生成元素，且多余的<br />标签造成列间距混乱。
CSS宽度设置错误：.column的width:5px远小于内容宽度，导致内容溢出，破坏布局。
清除浮动规则不符：column:nth-child(2n+1)的清除逻辑和每3个换列的需求不匹配。

修改步骤

修正后台代码逻辑
只在需要时创建列面板，直接将链接添加到对应列中，避免重复渲染：

protected void RadListView1_OnItemDataBound(object sender, RadListViewItemEventArgs e)
{
    if (e.Item is RadListViewDataItem)
    {
        var dataItem = ((RadListViewDataItem)e.Item).DataItem;
        Panel panel1 = e.Item.FindControl("Panel1") as Panel;
        
        if (panel1 != null)
        {
            ProjectDetailsBLL projectDetailsBll = new ProjectDetailsBLL();
            List<string> emailAttachments= projectDetailsBll.GetCrmEmailLogsAttachment(Request.QueryString["proposalBuiltID"], Request.QueryString["changeOrderId"]);

            List<HyperLink> links = new List<HyperLink>();
            foreach (var attachment in emailAttachments)
            {
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment),Target = "_blank", ImageUrl = SelectImage(attachment),ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
                links.Add(new HyperLink { NavigateUrl = ResolveUrl(attachment), Target = "_blank", ImageUrl = SelectImage(attachment), ToolTip = Path.GetFileName(attachment) });
            }

            int count = 0;
            Panel currentColumnPanel = null;
            foreach (HyperLink link in links)
            {
                // 每3个链接创建新列，第一个链接初始化第一列
                if (count % 3 == 0)
                {
                    currentColumnPanel = new Panel();
                    currentColumnPanel.CssClass = "column";
                    panel1.Controls.Add(currentColumnPanel);
                }

                if (currentColumnPanel != null)
                {
                    currentColumnPanel.Controls.Add(link);
                    currentColumnPanel.Controls.Add(new LiteralControl("<br /><br />"));
                }

                count++;
            }
        }
    }
}

调整CSS样式
设置合适的列宽，修正清除浮动规则，确保列顶部对齐：

.column {
    width: 30%;
    float: left;
    margin-right: 3%;
    padding: 5px;
    box-sizing: border-box;
    vertical-align: top;
}

/* 每一行的第一列清除浮动 */
.column:nth-child(3n+1) {
    clear: left;
}

清理多余空白
移除生成HTML中多余的<br />标签，避免列间出现不必要的间距。

修改后，每3个超链接会自动生成新列，所有列均从顶部对齐，布局整齐。

内容的提问来源于stack exchange，提问作者Sam S

RadListView中Panel动态添加超链接：每3个后新列顶格显示问题

现有CSS代码 #

后台C#代码 #

当前效果截图 #

生成的HTML代码 #

问题根源 #