[原創]FineUI秘密花園（五） — 按鈕控件

曾經最普普通通的按鈕，在FineUI中搖身一變，法力無邊，下面就來看看你曾經最熟悉的按鈕？

 

按鈕的狀態與大小

按鈕有啟用/禁用，按下/正常幾種狀態，對應的屬性分別為Enabled、EnablePress、Pressed三個屬性。顯示效果如圖所示：

 

按鈕有大中小三個尺寸，對應的屬性為Size，顯示效果如下所示：

 

按鈕上的圖標

按鈕上的圖標可以通過Icon（枚舉類型，FineUI內置了很多圖標）或者IconUrl兩個屬性來指定，圖標的位置可以位於文本的上下左右四個位置，通過IconAlign屬性來指定。

 

對於不顯示文字的按鈕，只需要指定Icon或者IconUrl屬性，而不用指定Text屬性即可。

 

 

按鈕的點擊事件

默認按鈕的點擊會觸發一次AJAX的回發，典型的代碼示例如下：

<ext:Button ID="btnServerClick" Text="服務器端事件" OnClick="btnServerClick_Click" runat="server">
</ext:Button>

protected void btnServerClick_Click(object sender, EventArgs e)
{
    // 事件處理
}

 

如果希望在客戶端通過JavaScript代碼來處理按鈕的點擊事件，需要設置EnablePostBack和OnClientClick兩個屬性，典型的代碼如下所示：

<ext:Button ID="btnClientClick" Text="客戶端事件" OnClientClick="alert('這是客戶端事件');" EnablePostBack="false" runat="server">
</ext:Button>

有時，我們希望在服務器端通過C#代碼注冊客戶端的事件腳本，典型代碼如下所示：

<ext:Button ID="btnClientClick2" Text="服務器端生成的客戶端事件" EnablePostBack="false" runat="server">
</ext:Button>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        btnClientClick2.OnClientClick = Alert.GetShowInTopReference("這是在服務器端生成的客戶端事件");
    }
}

按鈕點擊事件的一個隱藏特性

在使用ASP.NET的按鈕編程時，我們經常需要額外處理一個情況：防止按鈕的重復提交！

而這個特性已經內置在FineUI的按鈕中，並且公開了一個屬性DisableControlBeforePostBack（默認已經啟用這個功能），是不是很方便，FineUI的細膩之處很多都體現在這些非常實用的功能上，后面你會在Grid、DropDownList、Window等很多控件上看到類似的手筆。

 

FineUI是怎么做到這一點的呢？

道理也非常簡單，在Web.config中打開DebugMode參數，然后查看頁面的HTML源代碼，你會發現如下的腳本：

在AJAX的響應正文，會再次啟用這個按鈕：

 

 

客戶端驗證表單

按鈕的一個主要用途是提交表單，以前我們或許要寫一堆JavaScript代碼了驗證每個表單控件，然后在點擊按鈕回發之前彈出錯誤提示框。在FineUI的應用場景中，我們只需要為每個控件設置驗證規則，然后設置按鈕需要驗證哪個表單或者哪些表單，這是通過ValidateForms屬性來實現的。

 

如果需要驗證多個表單，只需要將這些表單的ID以逗號分隔的形式設置到ValidateForms屬性即可。可以查看這個示例頁面。

<ext:Button ID="btnSubmitAll" Text="驗證兩個表單並提交" runat="server" OnClick="btnSubmitAll_Click" ValidateForms="extForm1,extForm2" />

在客戶端驗證失敗時，會顯示如下的提示框，並阻止本次表單提交：

 

如果你采用類似示例站點的IFrame框架結構，一定不要錯過另一個屬性ValidateTarget，它指定了錯誤提示框顯示的位置，可以是本頁面也可以是父頁面。

 

帶有菜單的按鈕

按鈕也可以擁有自己的菜單，這個示例的效果圖如下所示：

ASPX頁面的標簽也非常干凈利落:

<ext:Button ID="btnMenu" Text="中國科學技術大學" EnablePostBack="false" runat="server">
    <Menu>
        <ext:MenuHyperLink runat="server" Icon="TagGreen" Target="_blank" NavigateUrl="http://scms.ustc.edu.cn/"
            Text="化學與材料科學學院">
        </ext:MenuHyperLink>
        <ext:MenuHyperLink runat="server" Icon="TagBlue" Target="_blank" NavigateUrl="http://business.ustc.edu.cn/zh_CN/"
            Text="管理學院">
            <Menu>
                <ext:MenuHyperLink runat="server" Icon="TagPink" Target="_blank" NavigateUrl="http://is.ustc.edu.cn/"
                    Text="工商管理系">
                </ext:MenuHyperLink>
                <ext:MenuHyperLink runat="server" Icon="TagPurple" Target="_blank" NavigateUrl="http://stat.ustc.edu.cn/"
                    Text="統計與金融系">
                </ext:MenuHyperLink>
            </Menu>
        </ext:MenuHyperLink>
    </Menu>
</ext:Button>

 

工具欄中的按鈕

按鈕不僅可以單獨使用，在表單中作為提交按鈕，當放在工具欄中時，它搖身一變成了一個工具欄項。這樣我們不僅可以設置按鈕工具欄項的狀態、添加點擊事件、驗證表單，而且還可以添加菜單，如下所示：

 

ASPX頁面標簽如下：

<ext:Panel ShowBorder="true" BodyPadding="5px" Height="300px" Width="450px" ShowHeader="false"
    runat="server">
    <Toolbars>
        <ext:Toolbar runat="server">
            <Items>
                <ext:ToolbarText runat="server" Text="內聯項：">
                </ext:ToolbarText>
                <ext:ToolbarSeparator runat="server">
                </ext:ToolbarSeparator>
                <ext:Button EnablePostBack="false" Text="中國科學技術大學" runat="server">
                    <Menu>
                        <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://scms.ustc.edu.cn/"
                            Text="化學與材料科學學院">
                        </ext:MenuHyperLink>
                        <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://business.ustc.edu.cn/zh_CN/"
                            Text="管理學院">
                            <Menu>
                                <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://is.ustc.edu.cn/"
                                    Text="工商管理系">
                                </ext:MenuHyperLink>
                                <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://stat.ustc.edu.cn/"
                                    Text="統計與金融系">
                                </ext:MenuHyperLink>
                            </Menu>
                        </ext:MenuHyperLink>
                    </Menu>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </Toolbars>
</ext:Panel>

 

點擊按鈕前的確認對話框

如果我們希望在點擊按鈕的時候首先彈出確認對話框（類似於JavaScript的window.confirm），在征得用戶的同意后再觸發按鈕的默認行為，該怎么辦？

FineUI也考慮到了這種需求，特意提供了如下幾個屬性：ConfirmText/ConfirmTitle/ConfirmIcon/ConfirmTarget

 

一個典型的應用是在數據展示表格的工具欄中，放置一個寫着“刪除選中項”的按鈕，用來刪除表格中選中的項。為了防止用戶誤操作，我們一般需要首先提醒用戶這個操作是不可恢復的操作，是否確認刪除。此時按鈕的這些屬性就派上用場了，請看這個示例。

 

 

 

小結

這一篇文章沒有涉及很多應用技巧，不過介紹的知識都很實用，如果你打算或者正在使用FineUI，一定不要錯過按鈕的這些功能。

下一篇文章我們會對FineUI中基本的表單控件進行簡單的學習。

 

 

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