【FineUICore】全新ASP.NET Core，比WebForms還簡單！

ASP.NET WebForms

ASP.NET WebForms 隨着微軟 2000 年的 .Net Framework 一起發布，至今也將近 20 年的時間。相信很多人和我一樣，對 WebForms 有着割舍不掉的感情， 直至今日 WebForms 仍然在管理系統快速開發領域有着不可替代的作用！

基於 ASP.NET WebForms 的 FineUI（開源版）在結束了 9 年 130 個版本的迭代后，繼任者 FineUIPro（企業版）也持續了 5 年 30 多個版本的迭代，目前已經非常成熟穩定，超過 300 家企業客戶每天都在使用 FineUIPro（企業版）構建各類管理系統。

FineUIPro（企業版）在線示例：https://pro.fineui.com/

 

為了對比 ASP.NET WebForms，MVC和Core開發頁面的差異，下面我們以簡單的登錄頁面為例：

 

這是一個相當簡單的頁面，通過如下控件的嵌套組合來顯示頁面效果：

-Window（登錄表單）

----SimpleForm

--------TextBox（用戶名）

--------TextBox（密碼）

----Toolbar

--------Button（登錄） 

--------Button（重置）

前台標簽化頁面代碼很簡單，注意每個控件都有一個 runat=server 屬性：

<f:Window Width="350" WindowPosition="GoldenSection" EnableClose="false" IsModal="false" Title="登錄表單" ID="Window1" runat="server">
    <Items>
        <f:SimpleForm ShowHeader="false" BodyPadding="10" ShowBorder="false" ID="SimpleForm1" runat="server">
            <Items>
                <f:TextBox ShowRedStar="true" Required="true" Label="用戶名" ID="tbxUserName" runat="server"></f:TextBox>
                <f:TextBox ShowRedStar="true" Required="true" TextMode="Password" Label="密碼" ID="tbxPassword" runat="server"></f:TextBox>
            </Items>
        </f:SimpleForm>
    </Items>
    <Toolbars>
        <f:Toolbar Position="Bottom" ToolbarAlign="Right" ID="Toolbar1" runat="server">
            <Items>
                <f:Button Type="Submit" ID="btnLogin" Text="登錄" ValidateTarget="Top" ValidateForms="SimpleForm1"
                          OnClick="btnLogin_Click" runat="server"></f:Button>
                <f:Button Type="Reset" Text="重置" ID="btnReset" EnablePostBack="false" runat="server"></f:Button>
            </Items>
        </f:Toolbar>
    </Toolbars>
</f:Window>

后台是經典的事件響應函數：

protected void btnLogin_Click(object sender, EventArgs e)
{
    if (tbxUserName.Text == "admin" && tbxPassword.Text == "admin")
    {
        ShowNotify("成功登錄！", MessageBoxIcon.Success);
    }
    else
    {
        ShowNotify("用戶名或密碼錯誤！", MessageBoxIcon.Error);
    }
}

 

ASP.NET WebForms實現的登錄頁面：https://pro.fineui.com/#/basic/login.aspx

 

ASP.NET MVC

也許是為了迎合當下的流行趨勢，微軟於 2010 年推出了 MVC 架構的 ASP.NET MVC 框架。

我們也在 2016 年推出了支持 ASP.NET MVC 的控件庫 FineUIMvc，在線示例：https://mvc.fineui.com/

經典的 MVC 架構，對於 WebForms 開發人員還是有很多新的概念，比如視圖，控制器，模型，路由，視圖模型，以及微軟為了方便路由配置而引入的Areas特性等等。

由此帶來的一個重要區別是目錄結構不一致：

• WebForms中，頁面（login.aspx）和后台文件（login.aspx.cs）在同一個目錄下。
• MVC中，視圖（Login/Index.cshtml）和控制器（LoginController.cs）分別在不同的目錄下。

下面兩幅圖片展示了這種差別：

可以毫不客氣的說，MVC中的這種做法雖然更加接近傳統的MVC味道，但是對開發人員卻不友好！

 

FineUIMvc中的視圖對應於 WebForms 的頁面，使用的是 Razor Html Helpers ，下面來看下登錄頁面的視圖代碼：

@(F.Window().Width(350).WindowPosition(WindowPosition.GoldenSection).EnableClose(false).IsModal(false).Title("登錄表單").ID("Window1")
    .Items(
        F.SimpleForm().ShowHeader(false).BodyPadding(10).ShowBorder(false).ID("SimpleForm1")
            .Items(
                F.TextBox().ShowRedStar(true).Required(true).Label("用戶名").ID("tbxUserName"),
                F.TextBox().ShowRedStar(true).Required(true).TextMode(TextMode.Password).Label("密碼").ID("tbxPassword")
            )
    )
    .Toolbars(
        F.Toolbar().Position(ToolbarPosition.Bottom).ToolbarAlign(ToolbarAlign.Right).ID("Toolbar1")
            .Items(
                F.Button().OnClick(Url.Action("btnLogin_Click"), "SimpleForm1").ValidateTarget(Target.Top).ValidateForms("SimpleForm1").Type(ButtonType.Submit).Text("登錄").ID("btnLogin"),
                F.Button().Type(ButtonType.Reset).Text("重置").ID("btnReset")
            )
    )
)

是的，其實這里的視圖就是 C# 的函數調用而已，雖然很靈活，但是和我們之前所認知的標簽寫法有很大的出入。

WebForms和MVC另一個重要的區別點：

• WebForms通過 ViewState 來保持前后台控件的狀態，因此在后台事件處理函數中，可以方便的拿到頁面上每個控件的屬性！
• MVC的實現更加輕量級，后台對於前台狀態一無所知，任何后台需要的狀態都需要前台顯式傳入！

這個重要的差異點體現在 OnClick 函數的第二個參數 SimpleForm1，它告訴 FineUIMvc 把 SimpleForm1 里面所有子控件的關鍵數據傳入后台。

下面看下后台代碼，對應於控制器方法：

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult btnLogin_Click(IFormCollection values)
{
    if (values["tbxUserName"] == "admin" && values["tbxPassword"] == "admin")
    {
        ShowNotify("成功登錄！", MessageBoxIcon.Success);
    }
    else
    {
        ShowNotify("用戶名或密碼錯誤！", MessageBoxIcon.Error);
    }

    return UIHelper.Result();
}

 

ASP.NET MVC實現的登錄頁面：https://mvc.fineui.com/#/Basic/Login

 

ASP.NET Core （Razor Pages & Tag Helpers）

2016年，微軟在新領袖納德拉的領導下，走上了開源之路，並推出重量級的跨平台開源框架 .Net Core!

作為 ASP.NET MVC 的繼任者，ASP.NET Core 不僅開源免費，而且可以在  Windows、macOS 和 Linux 上開發和部署，這是前幾年做夢都想不到的事情。

FineUI緊跟歷史潮流，及時於 2017 年推出了支持 ASP.NET Core 的控件庫 FineUICore，在線示例：https://core.fineui.com/

 

然而 WebForms 和 MVC 之間的鴻溝，阻止了很多 WebForms 開發人員的升級之路。

微軟應該是深刻認識到了這一點，在ASP.NET Core 2.0版本中推出了 Razor Pages，簡化了Controller-View-Model的組織結構，現在看起來更有WebForms的感覺了：

 

本着一切為了簡化開發人員的勞動，FineUICore終於在近期發布的 v5.5.0 完美支持 ASP.NET Core 的 Razor Pages 和 Tag Helper！

FineUICore with Razor Pages & Tag Helper 的在線示例：https://pages.fineui.com/

 

我們的目的是讓 ASP.NET Core 的頁面和 ASP.NET WebForms 的頁面看起來盡量一致，這樣可以大大減輕開發人員從 ASP.NET WebForms 遷移到 ASP.NET Core 的繁重勞動！

看下 FineUICore 實現的登錄頁面代碼：

<f:Window Width="350" WindowPosition="GoldenSection" EnableClose="false" IsModal="false" Title="登錄表單" ID="Window1">
    <Items>
        <f:SimpleForm ShowHeader="false" BodyPadding="10" ShowBorder="false" ID="SimpleForm1">
            <Items>
                <f:TextBox ShowRedStar="true" Required="true" Label="用戶名" ID="tbxUserName"></f:TextBox>
                <f:TextBox ShowRedStar="true" Required="true" TextMode="Password" Label="密碼" ID="tbxPassword"></f:TextBox>
            </Items>
        </f:SimpleForm>
    </Items>
    <Toolbars>
        <f:Toolbar Position="Bottom" ToolbarAlign="Right" ID="Toolbar1">
            <Items>
                <f:Button Type="Submit" ID="btnLogin" Text="登錄" ValidateTarget="Top" ValidateForms="SimpleForm1"
                          OnClick="@Url.Handler("btnLogin_Click")" OnClickFields="SimpleForm1"></f:Button>
                <f:Button Type="Reset" Text="重置" ID="btnReset"></f:Button>
            </Items>
        </f:Toolbar>
    </Toolbars>
</f:Window>

等等！這不就是前面的 WebForms 頁面代碼嗎？？？哦，不對，少了 runat=server，然后，....嗯....，沒有然后了。

為了對比登錄頁面在 ASP.NET WebForms 和 ASP.NET Core 下的差異，我們用對比工具測試了一下：

 

這里能看到的差異點只有兩個：

• ASP.NET WebForms的控件多了個runat=server屬性
• ASP.NET Core的控件事件處理有點差別，需要指定傳入后台的參數（OnClickFields）

是不是很簡單，現在不用怕從 WebForms 升級到 ASP.NET Core了吧！

 

而后台的事件處理函數（嗯，這個是WebForms的術語，MVC中叫控制器方法，ASP.NET Core with Razor Pages可稱之為頁面模型處理器）和 MVC 的保持一致：

public IActionResult OnPostBtnLogin_Click(IFormCollection values)
{
    if (values["tbxUserName"] == "admin" && values["tbxPassword"] == "admin")
    {
        ShowNotify("成功登錄！", MessageBoxIcon.Success);
    }
    else
    {
        ShowNotify("用戶名或密碼錯誤！", MessageBoxIcon.Error);
    }

    return UIHelper.Result();
}

說白了，FineUICore的一切努力都是為了簡化開發人員的勞動，讓 ASP.NET Core 有一副 WebForms 的清純外表和MVC的火熱內心！

 

ASP.NET Core實現的登錄頁面：https://pages.fineui.com/#/Basic/Login

 

再來看另一個頁面的代碼對比：

這兩個頁面分別來自：

FineUIPro：https://pro.fineui.com/#/panel/panel_group.aspx

FineUICore：https://pages.fineui.com/#/Panel/Group

 

示例源代碼下載

以上介紹的三個產品並非免費軟件，你可以加入【三石和他的朋友們】知識星球下載基礎版（基礎版下載后可永久免費商用！）：

 

 

延伸閱讀

將 ASP.NET Core 2.1 升級到最新的長期支持版本ASP.NET Core 3.1

ASP.NET Core 快速入門（FineUICore + Razor Pages + Entity Framework Core）

AppBoxCore - 細粒度權限管理框架（EFCore+RazorPages+async/await）！  

 

 

不忘初心，方得始終！