• 自己写的web自定义控件


      经过几天的努力,此次共完成了四个控件的开发:分页控件、验证码控件、日期选择控件和折叠面板控件。下面分别介绍每种控件的使用方法。也希望大家给出宝贵的修改意见。



    一、分页控件(PagingPanel)
    <fsc:PagingPanel runat="server" id="PagingPanel1" PageNumberCount="7"></fsc:PagingPanel>


      分页控件可支持的数据控件有DataGrid、DataList、Repeater,同时可支持DataList的多列显示功能。可支持的数据源有Array、ArrayList、DataTable、DataView。
            private void Bind()
            
    {
                Pagingpanel1.PageSize 
    = 20//每页可显示的行
                Pagingpanel1.RepeatColumns = 4//多列
                DataList1.DataSource = Pagingpanel1.SetDataSource(DataTable1);//转换数据源
                DataList1.DataBind();
            }


      使用激活事件PageIndexChange来进行分页
            private void Pagingpanel1_PageIndexChanged(object sender, FaibClass.WebControls.PageIndexChangedEventArgs e)
            
    {
                Pagingpanel1.CurrentPageIndex 
    = e.NewPageIndex;
                Bind();
            }


      部份属性说明
      AutoPostBack
      如果设为false则不需要使用事件PageIndexChanged即可实现数据分页,即此时是通过Request.QueryString来传递页码的。

      RepeatColumns
      此属性用于与DataList的关联,与DataList的RepeatColumns属性一致。

      ShowFirstLast
      是否显示“首页”与“尾页”按钮。

      ShowPageBox、ShowPageList
      分别是:是否显示页码输入框、页码列表框。

      PageNumberCount
      显示快捷的页码跳转串,首尾用...延续。

    二、验证控件(ValidateBox)
    <fsc:ValidateBox runat="server" id="ValidateBox1" ImageUrl="vercode.jpg"></fsc:ValidateBox>

      在使用验证之前,需在Web.Config中加入:
      <system.web>
            
    <httpHandlers>
                
    <add verb="GET" path="*.fbs.ashx" type="FaibClass.WebControls.AshxHandler,FaibClass.WebControls"/>
            
    </httpHandlers>
      
    </system.web>
      这个控件的使用很简单,只需给定一个ImageUrl即可,客服端可使用属性value来获得验证码。

      部份属性说明
      Length
      验证码的位数。

      TextAngle
      字体的旋转角度。

    三、日期选择控件(CalendarBox)
    <fsc:CalendarBox runat="server" id="CalendarBox1" ShowStyle="OnContextMenu"></fsc:CalendarBox>

      此控件与ValiedateBox一样需在Web.Config里加入httpHandler。
      此控件可以自由地定义日期格式,及相应的css样式。

      部份属性说明
      DataFormat
      设置日期格式,ymd -- 年月日 mdy -- 月日年 dmy -- 日月年

      DataSeparator
      日期中年月日的分隔符

      ShowStyle
      定制选择面板的弹出方式 OnClick -- 单击时 OnDblClick -- 双击时 OnFocus -- 获得焦点时 OnContextMenu -- 右键菜单时

    四、折叠面板控件(CollapablePanel)
    <fsc:collapablepanel id="CollapablePanel1" runat="server" PanelColor="Yellow" PanelCssClass="panel" CssClass="tt"
        BorderWidth
    ="1px" BorderStyle="Solid" BorderColor="#404000" BackColor="#FFE0C0" Width="175px" ExpandSolePanel="True">
        
    <fsc:CollPanel Text="系统菜单" BackColor="">
            
    <fsc:CollItem ImageUrl="save.gif" Text="我的资料" CommandName="MyInfo"></fsc:CollItem>
            
    <fsc:CollItem ImageUrl="save.gif" Text="修改密码" CommandName="ModifyPwd"></fsc:CollItem>
            
    <fsc:CollItem ImageUrl="save.gif" Text="退出登录" CommandName="Logout"></fsc:CollItem>
        
    </fsc:CollPanel>
        
    <fsc:CollPanel Text="会员管理" BackColor="">
            
    <fsc:CollItem ImageUrl="save.gif" Text="新增会员" CommandName="AddMember"></fsc:CollItem>
            
    <fsc:CollItem ImageUrl="save.gif" Text="会员管理" CommandName="Member"></fsc:CollItem>
            
    <fsc:CollItem ImageUrl="save.gif" Text="会员续费" CommandName="Safe"></fsc:CollItem>
        
    </fsc:CollPanel>
        
    <fsc:CollPanel Text="其他管理" BackColor="">
            
    <fsc:CollItem ImageUrl="save.gif" Text="档案录入" CommandName="Safe"></fsc:CollItem>
        
    </fsc:CollPanel>
    </fsc:collapablepanel>


      部份属性说明
      AutoPostBack
      此属性如果设为true,则可使用控件CollItemCommand事件来进行操作,每一个CollItem应指定CommandName;如果为false,使用Url链接到其他页面。

      ExpandSolePanel
      设置为true时,只允许一项处于展开状态。

    =================================================================

      此控件尚在测试阶段,下载地址:https://files.cnblogs.com/faib/FaibClass.WebControls.rar。 (现在已关闭下载,需要的可以与我联系)
  • 相关阅读:
    无法为数据库 'tempdb' 中的对象分配空间,因为 'PRIMARY' 文件组已满
    数据库通用分页存储过程
    ef linq 中判断实体中是否包含某集合
    linq 动态判断
    bootstrap切换按钮点击后显示的颜色
    abp vue vscode 配置
    abp ef codefirst Value cannot be null. Parameter name: connectionString
    git diff 分支1 分支2 --stat命令没有将所有的不同显示出来
    区块链相关介绍
    需求分析工作流程
  • 原文地址:https://www.cnblogs.com/faib/p/700008.html
Copyright © 2020-2023  润新知