您的位置：首页 > 编程语言 > ASP

[ASP.NET 控件实作 Day27] 控件依 FormView CurrentMode 自行设定状态

2008-10-28 21:29 441 查看

在GridView+FormView示范数据新增/修改/删除(进阶篇：服务器控件)一文中，示范了扩展GridView及FormView控件，让GridView可以透过属性与FormView做关连来处理数据的「新增/修改/删除」的动作。因为在该案例中，只使用FormView的EditTemplate同时处理「新增」及「修改」的动作，所以还需要自行撰写部分程序代码去判断控件在新增或修改的启用状态，例如编号字段在新增时为启用，修改时就不启用。在该文最后也提及其实有辨法让这个案例达到零程序代码的目标，那就是让控件(如TextBox)自行判断所在的FormView的CurrentMode，自行决定本身是否要「启用/不启用」、「显示/隐藏」等状态。本文以TextBox为例，说明如何修改TextBox让它可以达到上述的需求。

程序代码下载：ASP.NETServerControl-Day27.rar

Northwnd数据库下载：NORTHWND.rar

一、TBFormViewModeState类别

我们先定义EControlState(控件状态)列举，描述控件在特定模式的状态为何。

'''<summary>

[code]'''控制項狀態列舉。

'''</summary>

PublicEnumEControlState

'''<summary>

'''不設定。

'''</summary>

NotSet=0

'''<summary>

'''啟用。

'''</summary>

Enable=1

'''<summary>

'''不啟用。

'''</summary>

Disable=2

'''<summary>

'''隱藏。

'''</summary>

Hide=3

EndEnum

'''<summary>

[code]'''依FormViewMode來設定控制項狀態。

'''</summary>

<_

Serializable(),_

TypeConverter(GetType(ExpandableObjectConverter))_

>_

PublicClassTBFormViewModeState

PrivateFInsertModeAsEControlState=EControlState.NotSet

PrivateFEditModeAsEControlState=EControlState.NotSet

PrivateFBrowseModeAsEControlState=EControlState.NotSet

'''<summary>

'''在新增模式(FormViewMode=Insert)的控制項狀態。

'''</summary>

<_

NotifyParentProperty(True),_

DefaultValue(GetType(EControlState),"NotSet")_

>_

PublicPropertyInsertMode()AsEControlState

Get

ReturnFInsertMode

EndGet

Set(ByValvalueAsEControlState)

FInsertMode=value

EndSet

EndProperty

'''<summary>

'''在編輯模式(FormViewMode=Edit)的控制項狀態。

'''</summary>

<_

NotifyParentProperty(True),_

DefaultValue(GetType(EControlState),"NotSet")_

>_

PublicPropertyEditMode()AsEControlState

Get

ReturnFEditMode

EndGet

Set(ByValvalueAsEControlState)

FEditMode=value

EndSet

EndProperty

'''<summary>

'''在瀏覽模式(FormViewMode=ReadOnly)的控制項狀態。

'''</summary>

<_

NotifyParentProperty(True),_

DefaultValue(GetType(EControlState),"NotSet")_

>_

PublicPropertyBrowseMode()AsEControlState

Get

ReturnFBrowseMode

EndGet

Set(ByValvalueAsEControlState)

FBrowseMode=value

EndSet

EndProperty

EndClass

[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

定义为TBFormViewModeState型别的属性是属于复杂属性，要套用TypeConverter(GetType(ExpandableObjectConverter))，让该属性可在属性窗口(PropertyGrid)扩展以便设定属性值，如下图所示。

二、让TextBox控件可自行维护状态

接下来扩展TextBox控件，继承TextBox命名为TBTextBox。新增FormViewModeState属性(TBFormViewModeState型别)，依FormViewMode来设定控件状。并覆写PreRender方法，在此方法中呼叫DoFormViewModeStatus私有方法，依FormView的模式来处理控件状态。

'''<summary>

[code]'''文字框控制項。

'''</summary>

<_

Description("文字框控制項。"),_

ToolboxData("<{0}:TBTextBoxrunat=server></{0}:TBTextBox>")_

>_

PublicClassTBTextBox

InheritsTextBox

PrivateFFormViewModeStateAsTBFormViewModeState

'''<summary>

'''依FormViewMode來設定控制項狀態。

'''</summary>

<_

Description("依FormViewMode來設定控制項狀態。"),_

Category(WebCommon.Category.Behavior),_

NotifyParentProperty(True),_

DesignerSerializationVisibility(DesignerSerializationVisibility.Content),_

PersistenceMode(PersistenceMode.InnerProperty),_

DefaultValue("")_

>_

PublicReadOnlyPropertyFormViewModeState()AsTBFormViewModeState

Get

IfFFormViewModeStateIsNothingThen

FFormViewModeState=NewTBFormViewModeState

EndIf

ReturnFFormViewModeState

EndGet

EndProperty

'''<summary>

'''處理控制項狀態。

'''</summary>

'''<paramname="ControlStatus">控制項狀態。</param>

PrivateSubDoControlStatus(ByValControlStatusAsEControlState)

SelectCaseControlStatus

CaseEControlState.Enable

Me.Enabled=True

CaseEControlState.Disable

Me.Enabled=False

CaseEControlState.Hide

Me.Visible=False

EndSelect

EndSub

'''<summary>

'''依FormView的模式來處理控制項狀態。

'''</summary>

PrivateSubDoFormViewModeStatus()

DimoFormViewAsFormView

'若控制項置於FormView中，則依FormView的模式來處理控制項狀態

IfTypeOfMe.BindingContainerIsFormViewThen

oFormView=DirectCast(Me.BindingContainer,FormView)

SelectCaseoFormView.CurrentMode

CaseFormViewMode.Insert

DoControlStatus(Me.FormViewModeState.InsertMode)

CaseFormViewMode.Edit

DoControlStatus(Me.FormViewModeState.EditMode)

CaseFormViewMode.ReadOnly

DoControlStatus(Me.FormViewModeState.BrowseMode)

EndSelect

EndIf

EndSub

'''<summary>

'''覆寫。引發PreRender事件。

'''</summary>

ProtectedOverridesSubOnPreRender(ByValeAsEventArgs)

MyBase.OnPreRender(e)

'依FormView的模式來處理控制項狀態

DoFormViewModeStatus()

EndSub

EndClass

<bee:TBGridViewID="TBGridView1"runat="server"AutoGenerateColumns="False"DataKeyNames="ProductID"

[code]DataSourceID="SqlDataSource1"CellPadding="4"ForeColor="#333333"

GridLines="None"AllowPaging="True"FormViewID="TBFormView1">

<RowStyleBackColor="#EFF3FB"/>

<Columns>

<bee:TBCommandFieldShowDeleteButton="True"ShowEditButton="True"

ShowHeaderNewButton="True">

</bee:TBCommandField>

'省略

</Columns>

</bee:TBGridView>

<bee:TBFormViewID="TBFormView1"runat="server"DataKeyNames="ProductID"DataSourceID="SqlDataSource1"

[code]DefaultMode="Edit"SingleTemplate="EditItemTemplate"BackColor="White"BorderColor="#CCCCCC"

BorderStyle="None"BorderWidth="1px"CellPadding="3"GridLines="Both"Visible="False">

<FooterStyleBackColor="White"ForeColor="#000066"/>

<RowStyleForeColor="#000066"/>

<EditItemTemplate>

ProductID:

<bee:TBTextBoxID="TextBox1"runat="server"Text='<%#Bind("ProductID")%>'>

<FormViewModeStateEditMode="Disable"InsertMode="Enable">

</FormViewModeState>

</bee:TBTextBox>

'省略

<asp:LinkButtonID="LinkButton1"runat="server"CausesValidation="True"CommandName="Insert"

Text="新增"/>

 <asp:LinkButtonID="UpdateButton"runat="server"CausesValidation="True"CommandName="Update"

Text="更新"/>

 <asp:LinkButtonID="UpdateCancelButton"runat="server"CausesValidation="False"

CommandName="Cancel"Text="取消"/>

</EditItemTemplate>

</bee:TBFormView>

[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

2.测试新增模式

接下来执行程序，一开始为浏览模式，以TBGridView来呈现数据。

按下Header的「新增」钮，就会隐藏TBGridView，而切换到TBFormView的新增模式。其中系结ProductID字段的TBTextBox为可编辑模式，而下方的按钮只会显示「新增」及「取消」钮。

在新增模式输入完毕后，按下「新增」钮，数据录就会被写入数据库。

3.测试修改模式

接下来测试修改模式，按下「编辑」钮，就会隐藏TBGridView，而切换到TBFormView的修改模式。其中系结ProductID字段的TBTextBox为只读模式，而下方的按钮只会显示「更新」及「取消」钮。

在修改模式输入完毕后，按下「更新」钮，数据录就会被写入数据库。

4.页面程序代码

示范了上述的操作后，接下来我们回头看一下页面的程序代码。你没看错，笔者也没贴错，真的是一行程序代码都没有，因为所有相关动作都由控件处理掉了。

PartialClassDay27

[code]InheritsSystem.Web.UI.Page

EndClass

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航