[原創]FineUI秘密花園（六） — 表單控件

FineUI中有哪些常用的表單控件，它們有什么共同點和不同點，這一篇文章我們會詳細解說。

 

表單控件的公共屬性

所有的表單都具有如下屬性：

1. ShowLabel：是否顯示標簽（默認值：true）。
2. ShowEmptyLabel：是否顯示空白的標簽（默認值：false）。
3. Label：標簽文本（默認值：""）。
4. LabelSeparator：表單中字段與標簽的分隔符，可以通過Web.config、PageManager、Form三個級別進行控制，一般不需要設置此屬性（默認值：PageManager中的設置參數）。
5. ShowRedStar：在標簽后面顯示紅色的星號（用來標識必填項），一般與Required等表單驗證屬性配合使用。
6. Readonly：表單控件的只讀狀態（默認值：false）。
7. TabIndex：Tab按鍵的跳轉順序，一般不需要設置此屬性，頁面會根據控件的出現順序自動決定Tab按鍵的跳轉順序（默認值：null）。
8. OffsetRight：距離右側邊界的寬度，可以通過Web.config、PageManager、Form三個級別進行控制，一般不需要設置此屬性（默認值：PageManager中的設置參數）。
9. ToolTip：提示文本（默認值：""）。
10. ToolTipTitle：提示文本的標題（默認值：""）。
11. ToolTipAutoHide：是否自動隱藏提示信息（默認值：true）。

注意：很多屬性只有在表單內才有意義，比如ShowLabel、Label、OffsetRight等屬性。在表單外放置的表單控件是不顯示標簽的。

 

 

還有一些屬性是特定表單控件才具有的，如下所示：

1. Text：顯示文本。
2. EmptyText：文本框為空時顯示的文本（只對文本輸入框、日期選擇器等少數幾個控件有效）。
3. AutoPostBack：是否自動回發（只對下拉列表、日期選擇器、文本輸入框等少數幾個控件有效）。
4. EncodeText：是否對文本進行編碼（只對文本標簽、超鏈接、鏈接按鈕等少數幾個控件有效）。

 

除此之外，有些表單控件公共分享了很多表單驗證屬性。下一篇文章我們會詳細介紹表單驗證相關的屬性。

 

下面我們會把部分表單控件所特有的一些屬性通過示例進行集中展示。

 

自動編碼文本

默認情況下，Label的EncodeText屬性為true，會對文本中的HTML進行編碼。當然我們也可以設置EncodeText=false，從而將HTML片段賦值給Text屬性，請看這個示例：

<ext:Label Text="普通的 Label 標簽，會自動編碼字符串（比如：<strong></strong>）" runat="server">
</ext:Label>
<br />
<ext:Label EncodeText="false" Text="<a href='http://www.ustc.edu.cn/' target='_blank'>中國科學技術大學</a>"
    runat="server">
</ext:Label>
<br />
<ext:Label EncodeText="false" Text="<span style='color:red;font-weight:bold;'>修改文本的樣式</span>"
    runat="server">
</ext:Label>

頁面顯示效果如下所示：

 

 

自動回發的文本輸入框

如何在文本輸入框失去焦點時自動回發頁面呢，下面的幾行代碼可以簡單地實現這個功能？

<ext:TextBox runat="server" ID="TextBox1" EmptyText="文本框值改變則自動回發" Width="200" AutoPostBack="true"
        OnTextChanged="TextBox1_TextChanged">
</ext:TextBox>

 

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
    labResult.Text = "文本框的值：" + TextBox1.Text;
}

 

富文本編輯器

FineUI內置了一個富文本編輯器，對於HTML編輯要求不高的情況下，完全可以使用內置的HtmlEditor，這樣不僅樣式風格統一，而且編碼非常方便。

 

有很多屬性來控制HtmlEditor的顯示，幾乎覆蓋了工具欄的每一項，如下所示：

1. EnableAlignments：啟用左右定位。
2. EnableColors：啟用顏色。
3. EnableFont：啟用字體。
4. EnableFontSize：啟用調整字體大小。
5. EnableFormat：啟用格式化。
6. EnableLinks：啟用創建鏈接。
7. EnableLists：啟用創建列表。
8. EnableSourceEdit：啟用源碼視圖。
9. FontFamilies：字體列表。
10. EnableChineseFont：啟用中文字體。

上面所有屬性的默認值都是true，其中特別需要提到的是EnableChineseFont，因為默認的字體都是英文的，而在國內環境中中文字體是必不可少了，所以FineUI就把一些常見的中文字體配置到了富文本編輯器中。

 

 

有兩個觸發按鈕的搜索框

這也是Web開發中的一個常見需求，一個用來搜索的文本輸入框，當用戶輸入關鍵字並點擊搜索按鈕時，顯示一個清空關鍵詞的按鈕。這個需求也被內置到了FineUI中，這就是TwinTriggerBox，請看下面這個示例：

<ext:TwinTriggerBox ID="ttbxMyBox2" OnTrigger1Click="ttbxMyBox2_Trigger1Click" OnTrigger2Click="ttbxMyBox2_Trigger2Click"
        Trigger1Icon="Clear" ShowTrigger1="False" EmptyText="搜索用戶名" Trigger2Icon="Search"
        runat="server">
</ext:TwinTriggerBox>

protected void ttbxMyBox2_Trigger2Click(object sender, EventArgs e)
{
    if (!String.IsNullOrEmpty(ttbxMyBox2.Text))
    {
        // 執行搜索動作
        Alert.ShowInTop(String.Format("在關鍵詞“{0}”中搜索", ttbxMyBox2.Text));

        ttbxMyBox2.ShowTrigger1 = true;
    }
    else
    {
        Alert.ShowInTop("請輸入你要搜索的關鍵詞！");
    }
}

// 點擊 TwinTriggerBox 的取消按鈕
protected void ttbxMyBox2_Trigger1Click(object sender, EventArgs e)
{
    // 執行清空動作
    Alert.ShowInTop("取消搜索！");

    ttbxMyBox2.Text = "";
    ttbxMyBox2.ShowTrigger1 = false;
}

TwinTriggerBox有很多用來控制顯示隱藏觸發按鈕的屬性，不過僅從它們的名字就能猜出功能，這也是FineUI簡單的原因之一。

 

顯示效果如下圖所示：

 

 

日期選擇器

DatePicker也是Web開發中必不可少的一個控件，先來看下顯示效果：

 

它的一些屬性值得我們關注：

1. SelectedDate：選擇的日期。
2. DateFormatString：日期格式字符串（默認值："yyyy-MM-dd"）。
3. MaxDate：最大日期，大於此日期的以灰色顯示，不可選擇。
4. MinDate：最小日期，小於此日期的以灰色顯示，不可選擇

注意：DateFormatString遵守DotNet默認的規則，簡單概括如下：

    d 月中的某一天。一位數的日期沒有前導零。
    dd 月中的某一天。一位數的日期有一個前導零。
    ddd 周中某天的縮寫名稱，在 AbbreviatedDayNames 中定義。
    dddd 周中某天的完整名稱，在 DayNames 中定義。
    M 月份數字。一位數的月份沒有前導零。
    MM 月份數字。一位數的月份有一個前導零。
    MMM 月份的縮寫名稱，在 AbbreviatedMonthNames 中定義。
    MMMM 月份的完整名稱，在 MonthNames 中定義。
    y 不包含紀元的年份。如果不包含紀元的年份小於 10，則顯示不具有前導零的年份。
    yy 不包含紀元的年份。如果不包含紀元的年份小於 10，則顯示具有前導零的年份。
    yyyy 包括紀元的四位數的年份。

 

單選框列表與復選框列表

首先來看看各自的顯示效果：

這兩個控件不僅支持標簽聲明式的創建方式，如下所示：

<ext:RadioButtonList ID="RadioButtonList1" Label="列表一" runat="server">
    <ext:RadioItem Text="可選項 1" Value="value1" />
    <ext:RadioItem Text="可選項 2" Value="value2" />
    <ext:RadioItem Text="可選項 3" Value="value3" Selected="true" />
</ext:RadioButtonList>

而且支持數據綁定的創建方式，如下所示：

<ext:RadioButtonList ID="RadioButtonList2" Label="列表二（一列）" ColumnNumber="1" runat="server">
</ext:RadioButtonList>

private void BindRadioButtonList()
{
    List<TestClass> myList = new List<TestClass>();
    myList.Add(new TestClass("1", "數據綁定值 1"));
    myList.Add(new TestClass("2", "數據綁定值 2"));
    myList.Add(new TestClass("3", "數據綁定值 3"));
    myList.Add(new TestClass("4", "數據綁定值 4"));

    RadioButtonList2.DataTextField = "Name";
    RadioButtonList2.DataValueField = "Id";
    RadioButtonList2.DataSource = myList;
    RadioButtonList2.DataBind();

    RadioButtonList2.SelectedValue = "3";
}

 

除此之外，它們還支持必選項驗證、自動回發、多列顯示、豎排顯示等特性，因此下面這些屬性也需要我們關注：

1. Required：是否必填項。
2. RequiredMessage：為空時提示信息。
3. AutoPostBack：是否自動回發。
4. ColumnNumber：渲染成幾列。
5. ColumnVertical：是否按照縱向順序渲染。
6. DataTextField：是否按照縱向順序渲染。
7. DataTextFormatString：顯示文本的格式化字符串。
8. DataValueField：顯示值的數據字段。
9. DataSource：數據源。
10. SelectedIndex/SelectedValue/SelectedItem：選中項（適用於RadioButtonList）。
11. SelectedIndexArray/SelectedValueArray/SelectedItemArray：選中項列表（適用於CheckBoxList）。

 

小結

除了上文提到的這些表單控件，還有一些其他表單控件，比如單選框、復選框、超鏈接、圖片、鏈接按鈕、隱藏字段、多行文本輸入框、單觸發器輸入框，它們相對比較簡單而無需過多的描述。

還有兩個比較比較重要的表單控件——文件上傳和下拉列表，我們會在接下來的兩篇文章中詳細描述。

 

注：《FineUI秘密花園》系列文章由三生石上原創，博客園首發，轉載請注明出處。文章目錄 官方論壇