asp.net控制元件庫FineUI使用入門圖解
阿新 • • 發佈：2019-02-18
FineUI是一個基於 jQuery / ExtJS 的 ASP.NET 控制元件庫，其宣傳語是：
建立 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的網站應用程式
官網首頁和空專案模板地址：
http://www.fineui.com/
http://fineui.com/bbs/forum.php?mod=viewthread&tid=2123
下載其空專案模板，執行，效果如下；
下面看下其程式碼；
可以看到<f:xxxxxx這些就是fineui的控制元件；<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="EmptyProjectNet20._default" %> <!DOCTYPE html> <html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FineUI（開源版）空專案</title> <style> .header .title a, .header .pro a { font-weight: bold; font-size: 24px; text-decoration: none; line-height: 50px; margin-left: 10px; } .header .pro { position: absolute; top: 0; right: 10px; } .bottomtable { width: 100%; font-size: 12px; } /* 主題相關樣式 - neptune */ .f-theme-neptune .header, .f-theme-neptune .bottomtable, .f-theme-neptune .x-splitter { background-color: #1475BB; color: #fff; } .f-theme-neptune .header a, .f-theme-neptune .bottomtable a { color: #fff; } .f-theme-neptune .header .x-panel-body { background-color: transparent; } </style> </head> <body> <form id="form1" runat="server"> <f:PageManager ID="PageManager1" AutoSizePanelID="RegionPanel1" runat="server"></f:PageManager> <f:RegionPanel ID="RegionPanel1" ShowBorder="false" runat="server"> <Regions> <f:Region ID="Region1" ShowBorder="false" Height="50px" ShowHeader="false" Position="Top" Layout="Fit" runat="server"> <Items> <f:ContentPanel ShowBorder="false" ShowHeader="false" ID="ContentPanel1" CssClass="header" runat="server"> <div class="title"> <a href="./default.aspx" style="color: #fff;">FineUI（開源版）空專案</a> </div> <div class="pro"> <a href="http://fineui.com/demo_pro/" target="_blank" style="color: #fff;">專業版示例</a> </div> </f:ContentPanel> </Items> </f:Region> <f:Region ID="Region2" Split="true" Width="200px" ShowHeader="true" Title="選單" EnableCollapse="true" Layout="Fit" Position="Left" runat="server"> <Items> <f:Tree runat="server" ShowBorder="false" ShowHeader="false" EnableArrows="true" EnableLines="true" ID="leftMenuTree"> <Nodes> <f:TreeNode Text="預設分類" Expanded="true"> <f:TreeNode Text="開始頁面" NavigateUrl="~/hello.aspx"></f:TreeNode> <f:TreeNode Text="登入頁面" NavigateUrl="~/login.aspx"></f:TreeNode> </f:TreeNode> </Nodes> </f:Tree> </Items> </f:Region> <f:Region ID="mainRegion" ShowHeader="false" Layout="Fit" Position="Center" runat="server"> <Items> <f:TabStrip ID="mainTabStrip" EnableTabCloseMenu="true" ShowBorder="false" runat="server"> <Tabs> <f:Tab ID="Tab1" Title="首頁" Layout="Fit" Icon="House" runat="server"> <Items> <f:ContentPanel ID="ContentPanel2" ShowBorder="false" BodyPadding="10px" ShowHeader="false" AutoScroll="true" runat="server"> <h2>FineUI（開源版）</h2> 基於 ExtJS 的開源 ASP.NET 控制元件庫 <br /> <h2>FineUI的使命</h2> 建立 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的網站應用程式 <br /> <h2>支援的瀏覽器</h2> Chrome、Firefox、Safari、IE 8.0+ <br /> <h2>授權協議</h2> Apache License v2.0（ExtJS 庫在 <a target="_blank" href="http://www.sencha.com/license">GPL v3</a> 協議下發布） <br /> <h2>相關連結</h2> 首頁：<a target="_blank" href="http://fineui.com/">http://fineui.com/</a> <br /> 論壇：<a target="_blank" href="http://fineui.com/bbs/">http://fineui.com/bbs/</a> <br /> 示例：<a target="_blank" href="http://fineui.com/demo/">http://fineui.com/demo/</a> <br /> 文件：<a target="_blank" href="http://fineui.com/doc/">http://fineui.com/doc/</a> <br /> <br /> <br /> <br /> <hr /> <br /> <a target="_blank" href="http://fineui.com/pro/">企業使用者推薦使用FineUI（專業版） - 更快、更強、更實惠！</a> </f:ContentPanel> </Items> </f:Tab> </Tabs> </f:TabStrip> </Items> </f:Region> <f:Region ID="bottomPanel" RegionPosition="Bottom" ShowBorder="false" ShowHeader="false" EnableCollapse="false" runat="server" Layout="Fit"> <Items> <f:ContentPanel ID="ContentPanel3" runat="server" ShowBorder="false" ShowHeader="false"> <table class="bottomtable"> <tr> <td style="width: 300px;"> 版本：<a target="_blank" href="http://fineui.com/version">v<asp:Literal runat="server" ID="litVersion"></asp:Literal></a> <a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=5a98eb42b742a1edaf22826648d5f61bc16ed08e0253976bc8d30f97508c09c7">QQ公開群</a></td> <td style="text-align: center;">Copyright © 2008-2015 合肥三生石上軟體有限公司</td> <td style="width: 300px; text-align: right;"> </td> </tr> </table> </f:ContentPanel> </Items> </f:Region> </Regions> </f:RegionPanel> </form> <script> var menuClientID = '<%= leftMenuTree.ClientID %>'; var tabStripClientID = '<%= mainTabStrip.ClientID %>'; // 頁面控制元件初始化完畢後，會呼叫使用者自定義的onReady函式 F.ready(function () { // 初始化主框架中的樹(或者Accordion+Tree)和選項卡互動，以及位址列的更新 // treeMenu： 主框架中的樹控制元件例項，或者內嵌樹控制元件的手風琴控制元件例項 // mainTabStrip： 選項卡例項 // createToolbar： 建立選項卡前的回撥函式（接受tabConfig引數） // updateLocationHash: 切換Tab時，是否更新位址列Hash值 // refreshWhenExist： 新增選項卡時，如果選項卡已經存在，是否重新整理內部IFrame // refreshWhenTabChange: 切換選項卡時，是否重新整理內部IFrame F.util.initTreeTabStrip(F(menuClientID), F(tabStripClientID), null, true, false, false); }); </script> </body> </html>
看前面的圖；要新增FineUI的引用；
彈出對話方塊：
using FineUI;
......
Alert.Show("你好 FineUI！", MessageBoxIcon.Warning);
<f:Tree 定義樹檢視；
<Nodes>定義節點；
<f:TreeNode 定義具體節點；