[自定义服务器控件] 第二步:下拉列表框。

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 前面发了一个文本框的,这回发一个下拉列表框。 一般在写自定义控件之前都要考虑一下原来的控件(系统代的)有什么优缺点,有哪些功能是我想要的,但是自带的控件没有提供,或者提供的不是太理想。 那么对于 下拉列表框 我个人感觉有几个地方用着不是太方便。
前面发了一个文本框的,这回发一个下拉列表框。

一般在写自定义控件之前都要考虑一下原来的控件(系统代的)有什么优缺点,有哪些功能是我想要的,但是自带的控件没有提供,或者提供的不是太理想。

那么对于 下拉列表框 我个人感觉有几个地方用着不是太方便。

1、绑定数据库。
当下拉列表框里的数据需要从数据库里提取的时候,就需要设置 DataValueFieldDataTextField 的属性,每次用的时候都要设置一下,这个比较烦。
(不好意思,我比较懒)
我的方法是在自定义控件的 OnInit 时间里面加上

Me.CssClass = "lst"
Me.DataValueField = "ID"
Me.DataTextField = "txt"
Me.Font.Size = FontUnit.Point(9)

这就方便多了,只是在写SQL语句的时候需要使用别名的方式,修改字段的名称,以便适应 ID和txt。

如果您不喜欢这种方式的话,可以略过。:)

2、设置选定的选项。

在修改数据的时候,往往需要根据已经保存的数据来设置下拉列表框的第几个选项是被选中的,以便于修改。(不知道我有没有说清楚,表达能力还有待提高。)

当然系统的下拉列表框提供了这个功能,

Me.Items.FindByText("125").Selected = True
Me. SelectedValue = "125";
其他方法略。

可以用这种几方法来设置,但是这里有一个共同小问题,就是当下拉列表框的item里面没有“125” 的时候会抛出异常。

对于框架来说这么做没有什么问题,但是对于客户就不好了。

当然这个是可以避免的,一是检查是否出现异常,要不就是确保数据是完整的,绝对不会出现这种在item里面找不到值的情况。

但是我比较懒,不像写太多的代码来预防这些事情。

我写了一个 SetSelectedByValue (ByVal listValue As String) 的方法来设置,这样就方便多了。


3、添加月份、日期等信息。

如果需要写一个下拉列表框,这个框里面要放置12个月份,还要写个循环或者在.aspx里面设置。我设了一个偷懒的方法。

4、其他的常用的填充方法。

您可以把您常用的填充的数据放在自定义控件里面,调用的时候就会方便很多。

5、验证。

这个和 文本框是一样的,也是使用正则的方式来验证。这里主要验证是否选择了一个选项。
比如:第一个item是“请选择”,而这个下拉列表框又必须有一个选项(当然不能选第一个了),这个时候就需要验证一下。

6、实现接口

和文本框一样实现了下面的几个接口
属性(接口):
ControlKind  返回控件的类型。

函数(接口):
GetValue() 获取文本框的值,默认返回   TextTrim
GetValue(ByVal kind As String) 根据 kind 获取对应的文本框的值。

SetValue(ByVal value As String) 给文本框赋值
SetValue(ByVal value As String, ByVal kind As String)给文本框赋值


好像有点乱,感兴趣的话看看下面的代码吧。

< DefaultProperty( " Text " ), ToolboxData( " <{0}:HBSDropDownList runat=server></{0}:HBSDropDownList> " ) >  _
 
Public   Class HBSDropDownList Class HBSDropDownList
    
Inherits System.Web.UI.WebControls.DropDownList
    
Implements IGetControlValue

    
Dim _dataType As String = "101"  '数据类型

实现接口#Region "实现接口"
    
<Bindable(True), Category("默认值"), DefaultValue("205"), Description("获取控件类别")> _
      
ReadOnly Property ControlKind()Property ControlKind() As String Implements IGetControlValue.ControlKind
        
Get
            
Return "205"
        
End Get
    
End Property


    
Public Function GetValue()Function GetValue() As String Implements IGetControlValue.GetControlValue
        
Return Me.SelectedValue

    
End Function


    
Public Function GetValue()Function GetValue(ByVal kind As StringAs String Implements IGetControlValue.GetControlValue
        
Return ""

    
End Function


    
Public Sub SetValue()Sub SetValue(ByVal value As StringImplements IGetControlValue.SetControlValue
        
Me.SetSelectedByValue(value)

    
End Sub


    
Public Sub SetValue()Sub SetValue(ByVal value As StringByVal kind As StringImplements IGetControlValue.SetControlValue

    
End Sub


#End Region



初始化 OnInit。设置CssClass、DataValueField、DataTextField、#Region "初始化 OnInit。设置CssClass、DataValueField、DataTextField、"
    
Protected Overrides Sub OnInit()Sub OnInit(ByVal e As EventArgs)
        
Me.CssClass = "lst"
        
Me.DataValueField = "ID"
        
Me.DataTextField = "txt"
        
Me.Font.Size = FontUnit.Point(9)

        
'Me.Style.Add("ime-mode", "disabled;")

        
Me.Items.FindByValue("125").Selected = True

    
End Sub

#End Region



验证类型#Region "验证类型"
    
<Category("数据验证"), Description("验证输入的内容,需要js脚本配合。"), DefaultValue("101")> _
    
Property CheckDataType()Property CheckDataType() As String
        
Set(ByVal Value As String)
            _dataType 
= Value
            
'101        b不验证
            '102        z自然数
            '103        z整数
            '104        x小数
            '105        r日期
            '106        b必填
            Select Case Value
                
Case "101" '不验证
                    'this.Attributes.Add("DataType","");
                Case "106" '必填项 == 必须选择
                    Me.Attributes.Add("check""[1-9]{1}[0-9]*")
            
End Select


        
End Set
        
Get
            
If _dataType Is Nothing Then
                
Return ""
            
End If
            
Return _dataType
        
End Get
    
End Property


    
<Category("数据验证"), Description("验证输入的内容,传入正则表达式。"), DefaultValue("0")> _
   
Property CheckDataReg()Property CheckDataReg() As String
        
Set(ByVal Value As String)
            
Me.Attributes.Add("check", Value)
        
End Set
        
Get
            
If Me.Attributes.Item("check"Is Nothing Then
                
Return ""
            
End If
            
Return Me.Attributes.Item("check").ToString()
        
End Get
    
End Property



#End Region


验证错误的提示信息#Region "验证错误的提示信息"
    
<Description("验证错误提示信息")> _
      
Property CheckErrorMessage()Property CheckErrorMessage() As String

        
'添加提示信息
        Set(ByVal Value As String)
            ViewState(
"msg"= Value
            
Me.Attributes.Add("warning", Value)
        
End Set
        
Get
            
If (ViewState("msg"Is NothingThen
                
Return ""
            
Else
                
Return ViewState("msg").ToString()
            
End If
        
End Get

    
End Property

#End Region



    
'根据传入的ID设置下拉列表框的默认选项,如果没有找到,选第一项,不抛出异常。
    '<param name="listValue">ID值</param>
函数实现  setSelectedByValue#Region "函数实现  setSelectedByValue"
    
Public Sub SetSelectedByValue()Sub SetSelectedByValue(ByVal listValue As String)

        
Me.SelectedIndex = -1
        
If (listValue = "True"Then
            listValue 
= "1"
        
End If
        
If (listValue = "False"Then
            listValue 
= "0"
        
End If
        
Dim item As ListItem
        
Dim i As Int32 = 0
        
For Each item In Me.Items
            
If (item.Value.Equals(listValue)) Then
                
' item.Selected = True
                Me.SelectedIndex = i
                
Return
            
End If
            i 
= i + 1
        
Next
        
'Me.SelectedIndex = 0
    End Sub

#End Region


    
' 根据传入的文本内容设置下拉列表框的默认选项,如果没有找到,选第一项,不抛出异常。
    ' <param name="listValue">文本内容</param>
函数实现  SetSelectedByText#Region "函数实现  SetSelectedByText"
    
Public Sub SetSelectedByText()Sub SetSelectedByText(ByVal listText As String)
        
Me.SelectedIndex = -1
        
Dim item As ListItem
        
For Each item In Me.Items
            
If item.Text.Equals(listText) Then
                item.Selected 
= True
                
Return
            
End If
        
Next
        
'Me.SelectedIndex = 0
    End Sub

#End Region


    
' 传入查询语句,绑定下拉列表框。正确执行返回空字符串,不正确返回错误信息
    ' <param name="sqlString">查询语句</param>
    ' <returns>正确执行返回空字符串,不正确返回错误信息</returns>
函数实现  bindList#Region "函数实现  bindList"
    
Public Function BindListBySQL()Function BindListBySQL(ByVal sqlString As StringByVal isAddItem As BooleanAs String

        
Dim dal = New DataAccessLayer
        
'Me.DataSource = PublicClass.GetDataTableBySQL(sqlString)
        Me.DataSource = dal.RunSqlDataTable(sqlString)
        
Me.DataBind()
        
If isAddItem Then
            
'Me.Items.Insert(0, New ListItem("请选择", "-2"))
        End If
        
Return ""

    
End Function

#End Region



    
' 传入查询语句,绑定下拉列表框。正确执行返回空字符串,不正确返回错误信息
    ' <param name="sqlString">查询语句</param>
    ' <returns>正确执行返回空字符串,不正确返回错误信息</returns>
函数实现  bindList#Region "函数实现  bindList"
    
Public Function BindListByStore()Function BindListByStore(ByVal store As StringAs String

        
Dim dal As New DataAccessLayer
        
Me.DataSource = dal.RunStoreDataTable(store)
        
Me.DataBind()
        
Dim Err As String = dal.ErrorMsg
        dal.Dispose()
        
If (Err.Length < 2Then
            
Return ""
        
Else
            
Return Err
        
End If
    
End Function

#End Region



    
' 添加日期。给下拉列表框填充从 1 到 lastDay 的数据。value 和 text 值一致。
    ' <param name="lastDay">最后一天</param>
    ' <param name="isAddDefaultItem">是否添加 “请选择”</param>
函数实现  ItemAddDate#Region "函数实现  ItemAddDate"
    
Public Sub ItemAddDate()Sub ItemAddDate(ByVal lastDay As Int32)
        
Dim i As Int32
        
For i = 1 To lastDay
            
Me.Items.Add(New ListItem(i.ToString(), i.ToString()))
        
Next
    
End Sub

#End Region


    
' 添加月份。给下拉列表框填充从 1 到 12 的数据。value 和 text 值一致。
    ' <returns></returns>
函数实现  ItemAddMonth#Region "函数实现  ItemAddMonth"
    
Public Sub ItemAddMonth()Sub ItemAddMonth()
        
Dim i As Int32
        
For i = 1 To 12
            
Me.Items.Add(New ListItem(i.ToString(), i.ToString()))
        
Next
    
End Sub


#End Region


    
' 用两个字符串来添加选项。
    ' <param name="texts">显示的内容,用的字符串,用“~”分开。</param>
    ' <param name="values">value值,用的字符串,用“~”分开。</param>
函数实现  AddItemByString#Region "函数实现  AddItemByString"
    
Public Sub AddItemByString()Sub AddItemByString(ByVal values As StringByVal texts As String)

        
Dim strText As String() = texts.Split("~")
        
Dim strValue As String() = values.Split("~")
        
Dim i As Int32
        
For i = 1 To strText.Length
            
Me.Items.Add(New ListItem(strText(i), strValue(i)))
        
Next
    
End Sub


#End Region


    
' 用一个字符串来添加选项。value在前,Text在后
    ' <param name="texts">显示的内容,用的字符串,用“~”分开。</param>
函数实现  AddItemByString#Region "函数实现  AddItemByString"
    
Public Sub AddItemByString()Sub AddItemByString(ByVal TextsAndValues As String)

        
Dim str As String() = TextsAndValues.Split("~")
        
Dim Len As Int32 = str.Length \ 2
        
Dim i As Int32
        
For i = 0 To Len - 1
            
Me.Items.Add(New ListItem(str(Len + i), str(i)))
        
Next
    
End Sub


#End Region


    
' 用两个数组来添加选项。
    ' <param name="texts">显示的内容。</param>
    ' <param name="values">value值。</param>
函数实现  AddItemByArray#Region "函数实现  AddItemByArray"
    
Public Sub AddItemByArray()Sub AddItemByArray(ByVal values As String(), ByVal texts As String())
        
Dim i As Int32

        
For i = 0 To texts.Length
            
Me.Items.Add(New ListItem(texts(i), values(i)))
        
Next
    
End Sub


#End Region


    
' 用一个数组来添加选项。values在前,Text在后
    ' <param name="texts">显示的内容,用的字符串,用“~”分开。</param>
    ' <returns></returns>
函数实现  AddItemByArray#Region "函数实现  AddItemByArray"
    
Public Sub AddItemByArray()Sub AddItemByArray(ByVal ValuesAndTexts As String())

        
Dim len As Int32 = ValuesAndTexts.Length / 2
        
Dim i As Int32
        
For i = 0 To len
            
Me.Items.Add(New ListItem(ValuesAndTexts(len + i), ValuesAndTexts(i)))
        
Next
    
End Sub


#End Region


    
' 用一个二维数组来添加选项。values在前,Text在后
    ' <param name="texts">显示的内容,用的字符串,用“~”分开。</param>
函数实现  AddItemByArrayTwo#Region "函数实现  AddItemByArrayTwo"
    
Public Sub AddItemByArrayTwo()Sub AddItemByArrayTwo(ByVal ValuesAndTexts As String(,))

        
Dim len As Int32 = ValuesAndTexts.Length / 2 - 1
        
Dim i As Int32
        
For i = 0 To len
            
Me.Items.Add(New ListItem(ValuesAndTexts(i, 1), ValuesAndTexts(i, 0)))
        
Next
    
End Sub


#End Region


设置设计时的显示页面#Region " 设置设计时的显示页面"

    
' 将此控件呈现给指定的输出参数。
    ' <param name="output"> 要写出到的 HTML 编写器 </param>
    Protected Overrides Sub Render()Sub Render(ByVal output As HtmlTextWriter)
        
If ((Not MyBase.Site Is NothingAndAlso MyBase.Site.DesignMode) Then
            
MyBase.Render(output)
        
Else
            output.Write(
"<span class=""lst"">")
            
MyBase.Render(output)
            output.Write(
"</span>")
        
End If
    
End Sub

#End Region


End Class


相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
6月前
|
弹性计算 监控 数据可视化
ecs自定义监控
ecs自定义监控
69 1
|
开发框架 前端开发 .NET
Ajax之三 Ajax服务器端控件(下)
Ajax之三 Ajax服务器端控件(下)
63 0
|
开发框架 前端开发 JavaScript
Ajax之三 Ajax服务器端控件(上)
Ajax之三 Ajax服务器端控件
66 0
|
3月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
48 8
|
2月前
|
开发框架 JavaScript 前端开发
|
4月前
|
弹性计算 资源调度 API
云服务器 ECS产品使用问题之如何实现自定义页面适配移动端
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
云服务器 ECS产品使用问题之如何实现自定义页面适配移动端
|
5月前
|
弹性计算 网络协议 安全
阿里云服务器ECS自定义购买方式各选项参数选择与注意事项参考
在我们通过自定义购买的方式购买阿里云服务器器ECS时,会有多个选项,有的新手用户可能并不是很清楚这些选项是什么,选择或设置时需要注意什么,本文将从付费类型、地域与可用区、网络及实例、镜像、存储、带宽和安全组、管理设置以及高级选项等多个方面,为您详细介绍如何选择与配置阿里云ECS实例,以供参考。
阿里云服务器ECS自定义购买方式各选项参数选择与注意事项参考
|
3月前
|
网络协议 Ubuntu Linux
如何在 DigitalOcean 云服务器上创建自定义品牌名称服务器
如何在 DigitalOcean 云服务器上创建自定义品牌名称服务器
58 0
|
6月前
|
资源调度
在 Next.js 中使用自定义服务器框架进行服务器端渲染
在 Next.js 中使用自定义服务器框架进行服务器端渲染
在自定义服务器框架中处理 GET 请求
在自定义服务器框架中处理 GET 请求
下一篇
无影云桌面