【asp.net小札记】Repeater自定义添加排序按钮+显示图片

最新推荐文章于 2020-05-29 12:50:57 发布

ZAIJIANLUOYE110

最新推荐文章于 2020-05-29 12:50:57 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Asp.net 文章标签： asp.net Repeater 排序按钮显示图片

本文链接：https://blog.youkuaiyun.com/ZAIJIANLUOYE110/article/details/21341533

Asp.net 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用ASP.NET中的Repeater控件实现数据排序功能，并通过代码演示了如何在点击按钮时触发排序，同时保持排序图标状态一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Repeater源码：

<asp:Repeater ID="Repeater1" runat="server" 
                onitemcommand="Repeater1_ItemCommand" 
                onitemdatabound="Repeater1_ItemDataBound">                             
            <HeaderTemplate>
                <table class="T_repeater">
                    <thead>                       
                            <td>图片编号<asp:Button ID="btnPicno" CommandName="btnPicno" runat="server" Text="" CssClass="arrow asc"/></td> 
                            <td>图片</td>                          
                            <td>发音</td>
                            <td>解释</td>
                            <td>笔画</td>
                            <td>考释日期</td>
                            <td>资料编号</td>
                            <td>考释用户</td>
                            <td>备注</td>                        
                    </thead>                
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td><%#Eval("pictureid") %></td>
                    <td><%#"<img id='img01' runat='server' width='20px' height='20px' src='" + AncientCharPlatform.BLL.PictureInfoManager.GetPictureInfoByPicId(Eval("pictureid").ToString()).Path + "' />" %></td>                    
                    <td><%#Eval("pronunciation") %></td>
                    <td><%#Eval("meaning") %></td>
                    <td><%#Eval("strokes") %></td>
                    <td><%#Eval("condate") %></td>
                    <td><%#Eval("materialid") %></td>
                    <td><%#AncientCharPlatform.BLL.UserInfoManager.GetUserInfoByUserid((int?)Eval("userid")).Username %></td>                    
                    <td><%#Eval("remark") %></td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>

2、点击Repeater中的排序按钮时，触发的事件：

protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        if (e.CommandName == "btnPicno")
        {
            Button btn = e.Item.FindControl("btnPicno") as Button;
            List<ConclusionInfo> list = GetFuzzyQueryResult();           

            if (btn.CssClass.Contains("desc"))
            {
                hfBtnPicno.Value = "arrow asc";
                var v = from l in list
                        orderby l.PictureID ascending
                        select l;
                list = v.ToList<ConclusionInfo>();                    
            }
            else
            {                
                hfBtnPicno.Value = "arrow desc";
                var v = from l in list
                        orderby l.PictureID descending
                        select l;
                list = v.ToList<ConclusionInfo>();                           
            }
            this.Repeater1.DataSource = list;
            this.Repeater1.DataBind();           
        }
    }

3、纠正排序按钮（黑三角）显示问题：

//
    //  repeater重新绑定数据时
    //  header里的button的样式就恢复默认了
    //  所以在这里纠正一下样式
    //
    protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Header)
        {
            Button btn = e.Item.FindControl("btnPicno") as Button;
            btn.CssClass = hfBtnPicno.Value;
        }
    }