FineUI小技巧（2）將表單內所有字段禁用、只讀、設置無效標識（另附48張專業版高清大圖）

需求描述

對錶單內的全部字段進行操做也是常見需求，這些操做有：

1. 禁用：表單字段變灰，不響應用戶動做。

2. 只讀：表單字段不變灰，但不接受用戶輸入（其實是設置DOM節點的readonly屬性），有觸發器的要隱藏起來

3. 設置無效標識：通常用在服務器端驗證失敗的提示信息

界面效果

1. 默認狀態
   

2. 禁用狀態
   

3. 只讀狀態
   

4. 設置無效標識狀態
   

前臺代碼

 前臺代碼很是直觀，只是一個Form控件外加幾個Button控件，按鈕的響應事件在後臺完成：

<f:PageManager ID="PageManager1" runat="server" />
<f:Form Width="600px" LabelWidth="100px" OffsetRight="10px" LabelSeparator="："
    BodyPadding="5px" EnableCollapse="true" ID="Form1" runat="server" Title="表單">
    <Rows>
        <f:FormRow>
            <Items>
                <f:Label ID="Label3" Label="電話" Text="0551-1234567" runat="server" />
                <f:Label ID="Label16" runat="server" Label="申請人" Text="admin">
                </f:Label>
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:Label ID="Label4" Label="編號" Text="200804170006" runat="server" />
                <f:TextBox ID="TextBox2" Required="true" ShowRedStar="true" Label="電子郵箱" RegexPattern="EMAIL"
                    RegexMessage="請輸入有效的郵箱地址！" runat="server">
                </f:TextBox>
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:DropDownList ID="DropDownList3" Label="審批人" runat="server" ForceSelection="false" Required="true" ShowRedStar="True">
                    <f:ListItem Text="老大甲" Value="0"></f:ListItem>
                    <f:ListItem Text="老大乙" Value="1"></f:ListItem>
                    <f:ListItem Text="老大丙" Value="2"></f:ListItem>
                </f:DropDownList>
                <f:NumberBox ID="NumberBox1" Label="申請數量" MaxValue="1000" Required="true" runat="server"
                    ShowRedStar="True" />
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:DatePicker runat="server" Required="true" Label="日期" EmptyText="請選擇日期"
                    ID="DatePicker1" SelectedDate="2014-07-10" ShowRedStar="True">
                </f:DatePicker>
                <f:TimePicker ID="TimePicker1" ShowRedStar="True" Label="時間" Increment="30"
                    Required="true" Text="08:30" EmptyText="請選擇時間" runat="server">
                </f:TimePicker>
            </Items>
        </f:FormRow>

        <f:FormRow>
            <Items>
                <f:FileUpload runat="server" ID="filePhoto" EmptyText="請選擇一張照片" Label="我的頭像" Required="true"
                    ShowRedStar="true">
                </f:FileUpload>
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:TextArea ID="TextArea1" runat="server" Label="描述" ShowRedStar="True" Required="True">
                </f:TextArea>
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:CheckBoxList ID="CheckBoxList1" Label="複選框列表" ColumnNumber="3" runat="server">
                    <f:CheckItem Text="可選項 1" Value="value1" />
                    <f:CheckItem Text="可選項 2" Value="value2" Selected="true" />
                    <f:CheckItem Text="可選項 3" Value="value3" Selected="true" />
                    <f:CheckItem Text="可選項 4" Value="value4" Selected="true" />
                    <f:CheckItem Text="可選項 5" Value="value5" Selected="true" />
                </f:CheckBoxList>
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:RadioButtonList ID="RadioButtonList2" Label="單選框列表" ColumnNumber="3" runat="server">
                    <f:RadioItem Text="可選項 1" Value="value1" />
                    <f:RadioItem Text="可選項 2" Value="value2" />
                    <f:RadioItem Text="可選項 3" Value="value3" Selected="true" />
                    <f:RadioItem Text="可選項 4" Value="value4" />
                    <f:RadioItem Text="可選項 5" Value="value5" />
                </f:RadioButtonList>
            </Items>
        </f:FormRow>
    </Rows>
</f:Form>
<br />
<f:Button ID="btnDisableAll" Text="所有禁用" CssClass="marginr" runat="server" OnClick="btnDisableAll_Click">
</f:Button>
<f:Button ID="btnEnableAll" Text="所有啓用" CssClass="marginr" runat="server" OnClick="btnEnableAll_Click">
</f:Button>
<f:Button ID="btnReadOnlyAll" Text="所有隻讀" CssClass="marginr" runat="server" OnClick="btnReadOnlyAll_Click">
</f:Button>
<f:Button ID="btnCancelReadOnlyAll" Text="取消只讀" CssClass="marginr" runat="server" OnClick="btnCancelReadOnlyAll_Click">
</f:Button>
<br />
<br />
<f:Button ID="btnMarkInvalid" Text="設置無效標識" CssClass="marginr" runat="server" OnClick="btnMarkInvalid_Click">
</f:Button>
<f:Button ID="btnClearInvalid" Text="取消無效標識" CssClass="marginr" runat="server" OnClick="btnClearInvalid_Click">
</f:Button>

後臺代碼

由於幾個按鈕的邏輯相似，這裏咱們定義一個代理（delegate），把相同的邏輯放在一個函數中完成，以下所示：

 private delegate void ProcessFormField(Field field);

private void ResolveFormField(ProcessFormField process)
{
    foreach (FormRow row in Form1.Rows)
    {
        foreach (Field field in row.Items)
        {
            if (field != null)
            {
                process(field);
            }
        }
    }
}

幾個按鈕的只須要調用剛剛定義的ResolveFormField函數，並傳入本身的代理實現便可：

protected void btnDisableAll_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        field.Enabled = false;
    });
}

protected void btnEnableAll_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        field.Enabled = true;
    });
}

protected void btnReadOnlyAll_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        if (!(field is Label))
        {
            field.Readonly = true;
        }
    });
}

protected void btnCancelReadOnlyAll_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        if (!(field is Label))
        {
            field.Readonly = false;
        }
    });
}

protected void btnMarkInvalid_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        if (!(field is Label))
        {
            field.MarkInvalid("這個字段出錯了！");
        }
    });
}

protected void btnClearInvalid_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        if (!(field is Label))
        {
            field.ClearInvalid();
        }
    });
}

本章小結

本篇文章介紹瞭如何對錶單內所有字段進行批量操做，要注意禁用和只讀的區別，雖然兩種狀況下表單字段都不響應用戶動做，但仍是有一些細微的差異，首先是顏色的變化不一樣，其次只讀時會隱藏TriggerBox右側的觸發按鈕。

後臺的代碼實現用到了C#代理（delegate），從JavaScript的角度看其實就是個回調函數，只不過C#的強類型限制，必須把這個回調函數抽象成一個類型而已。

專業版截圖

FineUI（專業版）是由三生石上全新打造的基於 jQuery 的專業 ASP.NET 控件庫，計劃在七月下旬正式發佈。

選擇FineUI（專業版）的四大理由：
1. 簡單：專業版和開源版兼容（v4.x），您如今就可使用開源版進行開發，等正式版發佈時只需替換 DLL 便可。
2. 極速：專業版基於 jQuery 庫重寫，使得 JS 和 CSS 體積大幅減小，頁面加載速度將是開源版的 2 倍以上。
3. 多彩：專業版內置 24 種 jQueryUI 皮膚，用戶還可使用 jQueryUI ThemeRoller 建立專屬本身的皮膚。
4. 便宜：專業版不限開發者數量和永久免費升級，使得典型受權案例的費用減小爲開源版的 1/3 左右。

聲明：

1. FineUI（專業版）受權協議是商業受權，需購買使用。

2. FineUI（開源版）受權協議是Apache License v2.0，免費下載使用，而且會繼續維護和開發，我的用戶推薦使用開源版。

源代碼與在線示例

本系列全部文章的源代碼都可自行下載：http://fineui.codeplex.com/

在線示例（暫時不可用）：http://fineui.com/demo/#/demo/form/form_disabled.aspx

這個示例會添加到下個版本的FineUI（開源版）中，所以在線示例還不可見，須要的同窗請自行下載所有源代碼，本身運行。