【推薦】全新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

 

 

示例源代碼下載

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

 

 

不忘初心，方得始終！