zoukankan      html  css  js  c++  java
  • Dynamic Setting ImageUrl In DataPager

    本文目的:动态设置DataPager控件中页码的图片。

    使用ListView+DataPager进行绑定数据时,遇到的一个问题?

          当使用DataPager时,NextPreviousPagerField有三个ButtonType 类型(Button\Image\Link),当使用ButtonType=Image时,会涉及做切换图片的问题?

            ps. 为什么要切换图片显示呢?是因为翻页时,如果翻到最后一页时,切换一张无效的图片,让用户感觉到已经不能再点击了。

    那在程序中如何动态切换图片呢?

             早先,我一直以为使用DataPager自身的事件就可以搞定,玩了半天DataPager----OnDataBinding、OnInit、OnPreRender都是不可以了;

    虽然其中OnInit、OnPreRender是可以动态改变图片的,但是在这个事件中无法取当数据的页码值,(就是不知道用户翻到几页了,是最后一页还是第一页)。

             其实,实现这个需求也蛮简单的,直接使用ListView中OnDataBinding事件就可以实现动态加载不同状态的图片了。

                (说白了DataPager还是围绕着ListView工作的,毕竟DataPager中PageControlID=ListViewID的

      最后

    附上代码

    Page:

    代码
    <form id="form1" runat="server">
    <asp:ListView ID="ProductList" runat="server" OnDataBinding="ProductList_DataBinding"
    OnPagePropertiesChanging
    ="ProductList_PagePropertiesChanging">
    <ItemTemplate>
    <%#Eval ( "Test" )%>
    </ItemTemplate>
    </asp:ListView>
    <br />
    <asp:DataPager ID="dpHotelInfoList" runat="server" PagedControlID="ProductList" PageSize="5">
    <Fields>
    <asp:NextPreviousPagerField ButtonType="Image" ShowFirstPageButton="true" ShowLastPageButton="true" />
    </Fields>
    </asp:DataPager>
    </form>

    CodeFile:

    /// <summary>
       
    ///
    Page_Load
       
    /// </summary>

       
    /// <param name="sender"></param>

       
    /// <param name="e"></param>

        protected void Page_Load ( object sender , EventArgs e ) {
           
    if ( !
    IsPostBack ) {
               
    //创建数据源

                var dataSource = new List<TestList> ();
               
    for ( int i = 0 ; i < 71 ; i++
    ) {
                    dataSource.Add (
    new TestList () { Test=
    i } );
                }
                ViewState.Add (
    "db"
    , dataSource );
                DBList
    = ViewState ["db"] as List<TestList>
    ;

               
    //绑定数据到ListView

                ProductList.DataSource = DBList;
                ProductList.DataBind ();
            }
        }
       
    /// <summary>

       
    ///
    PagePropertiesChanging
       
    /// </summary>

       
    /// <param name="sender"></param>

       
    /// <param name="e"></param>

        protected void ProductList_PagePropertiesChanging ( object sender , PagePropertiesChangingEventArgs e ) {
           
    //设置页码

            dpHotelInfoList.SetPageProperties ( e.StartRowIndex , e.MaximumRows , false );

           
    //绑定数据到ListView

            ProductList.DataSource = DBList;
            ProductList.DataBind ();
        }

       
    /// <summary>

       
    ///
    动态切换页码图片
       
    /// </summary>

       
    /// <param name="sender"></param>

       
    /// <param name="e"></param>

        protected void ProductList_DataBinding ( object sender , EventArgs e ) {
           
    //获取当前PageSize

            var curPageSize = ( dpHotelInfoList.StartRowIndex / dpHotelInfoList.PageSize ) + 1;

            var np
    = dpHotelInfoList.Fields [0] as
    NextPreviousPagerField;

           
    //如果是最后一页

            if ( curPageSize == 15 ) {
               
    //设置末页、下一页按钮为失效状态图片

                np.FirstPageImageUrl = "~/Enabled.gif";
                np.PreviousPageImageUrl
    = "~/Enabled.gif"
    ;
                np.NextPageImageUrl
    = "~/disabled.gif"
    ;
                np.LastPageImageUrl
    = "~/disabled.gif"
    ;
            }
           
    else if ( curPageSize == 1
    ) {
               
    //设置首页、上一页按钮为失效状态图片

                np.FirstPageImageUrl = "~/disabled.gif";
                np.PreviousPageImageUrl
    = "~/disabled.gif"
    ;
                np.NextPageImageUrl
    = "~/Enabled.gif"
    ;
                np.LastPageImageUrl
    =  "~/Enabled.gif"
    ;
            }
           
    else
    {
               
    //设置所有按钮都为有效状态图片

                np.FirstPageImageUrl = "~/Enabled.gif";
                np.PreviousPageImageUrl
    = "~/Enabled.gif"
    ;
                np.NextPageImageUrl
    = "~/Enabled.gif"
    ;
                np.LastPageImageUrl
    = "~/Enabled.gif"
    ;
            }
        }

       
    private List<TestList>
    dbList;
       
    public List<TestList>
    DBList {
           
    get { return ViewState ["db"] as List<TestList>
    ; }
           
    set
    {
                dbList
    =
    value;
            }
        }
    }

    /// <summary>

    ///
    创建数据序列
    /// </summary>

    [Serializable]
    public class
    TestList {
       
    public int Test { get; set
    ; }
    }

    代码下载DynamicSettingImageUrlInDataPager

  • 相关阅读:
    [BZOJ]2132: 圈地计划 最小割
    从最近MySQL的优化工作想到的
    Linux基本操作 9----- 认识与学习bash
    多路径配置vlome group共享存储,VG的更新。
    两位数乘法的速算方法(一)
    请对他有足够的重视——设计!
    ASP.NET中配置应用程序
    flex开发小技巧集锦
    刚制作完的SAP Sybase ASE15.7 [Sybase Central] 客户端
    Static 关键字的 5 种用法,你会几种?
  • 原文地址:https://www.cnblogs.com/RuiLei/p/1750378.html
Copyright © 2011-2022 走看看