webform 最後的黃昏之力

石馬聖手(兵人)發表於2020-04-30
WebORM

前言

現在有人談起webform 一般都會說這種技術已經過時了，毫無用處。

因為我們在日常開發中已經不會去開發哪種幾個簡單的網頁的程式，我們的業務更加複雜，這種拖動式的過於死板。

但是是否毫無用處呢？其他的我不知道，但是如果做一個簡單的工具類網頁還是感覺非常清晰的，然後日常寫一些東西的時候我們需要一個介面去展示我們測試的資料，那麼我還是覺得這東西挺方便的。

以前學習webform的時候是在上學期間，做專案用了一個學期(好吧，非常古老了)，後來都是mvc了。下面我闡述一些自己做工具和日常在控制檯不好顯示的時候使用webform的一個好處。

正文

更新頁面不重新整理

我覺得無論作為工具，還是測試，現在頁面我希望頁面更新的時候，是不希望重新整理頁面的。

那麼webfrom是如何實現的。

有兩種方式:

第一種:

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:Label ID="Time1" runat="server" Text="Timel"></asp:Label>
                <asp:Button runat="server" Text="按鈕1" OnClick="OnClick" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Time2" runat="server" Text="Time2"></asp:Label>
                <asp:Button runat="server" Text="按鈕2" OnClick="OnClick" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>

顯示介面如下：

你需要引入:ScriptManager 元件，ScriptManager 一定要在form中，一般form會包裹整個網站的html。

然後你僅僅需要在UpdatePanel中寫入你需要更新的元素。

比如第一個按鈕一，有一個事件onclick。那麼這個事件會對應後臺的:

protected void OnClick(object sender, EventArgs e)
{
	this.Time1.Text = System.DateTime.Now.ToString();
	this.Time2.Text = System.DateTime.Now.AddDays(1).ToString();
}

我僅僅需要設定this.Time1和this.Time2的值，那麼他們就會重新整理，也不會重新整理整個頁面。

看一下原理:

它會去做一個請求:

然後獲得到我們需要重新整理的部分:

我覺得不需要過多的去關注著如何重新整理，因為已經非常成熟，加上其現在用了做工具。

這時候有人問了，做工具或者測試的時候也需要自定義一些複雜的回撥啊。那麼這時候pageMethods可以幫你實現，你不需要去引入任何庫，因為webfrom自帶。

第二種:

<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
            </asp:ScriptManager>
            <script type="text/javascript">
                PageMethods.set_path("About.aspx");
                function tips() {
                    var txt = document.getElementById("TextBox1").value;
                    PageMethods.callmethod(txt, funRight);

                }
                function funRight(val, value2)       //回撥函式，用val接受後臺程式碼aa的執行結果    
                {
                    alert(val);
                }
            </script>
            <asp:Label ID="Label1" runat="server" Text="請輸入資訊："></asp:Label>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <input type="button" value="轉發我輸入的內容" onclick='tips()' id="btnGetServerTime" />
        </div>
    </form>
</body>

效果:

其實重點看tips就好，PageMethods.callmethod(txt, funRight);

這個PageMethods是渲染引擎引入的，後面我會介紹。

那麼這個會執行後臺的callmethod方法，txt是傳入的引數，funRight是成功回撥。

看下後臺:

[WebMethod]
//[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string callmethod(string str)
{
	return "您輸入的是:"+ str;
}

拿到資料後，加上“您輸入的是:”，然後返回。

效果:

介紹一下原理:

它會去後臺呼叫callmethod方法，

然後會返回:

那麼看下PageMethods.callmethod為什麼會去呼叫到我們後臺的方法：

上圖我們看到這個會幫我們生成callmethod方法，然後呼叫對應的介面，這讓我們的程式碼看起來清爽。

資料繫結

後臺加上有一個類:

/// <summary>
/// Users 的摘要說明
/// </summary>
public class Users
{
	private string Nickame;

	private string Sex;
	public Users(string nickName,string sex)
	{
		this.Nickame = nickName;
		this.Sex = sex;
	}

	public string Sex1 { get => Sex; set => Sex = value; }
	public string Nickame1 { get => Nickame; set => Nickame = value; }
}

然後前臺：

<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <%--建立一個表格--%>
                <thead>
                    <%--表格的表頭--%>
                    <tr>
                        <%--每一列的列名--%>
                        <td>使用者</td>
                        <td>性別</td>
                        < /tr> </thead> <tbody>
                            <%--表格的主體--%>
                            <asp:Repeater ID="Repeater1" runat="server">
                                <%--迴圈資料--%>
                                <ItemTemplate>
                    <tr>
                        <%--括號內為屬性名--%>
                        <td><%#Eval("Nickame1") %></td>
                        <td><%#Eval("Sex1") %></td>
                    </tr>
                    </ItemTemplate>
                    </asp:Repeater>
                    </tbody>
            </table>
        </div>
    </form>
</body>

那麼如何繫結:

List<Users> users = new List<Users> {
	new Users("張三","男"),new Users("李四","女")
};
Repeater1.DataSource = users;//指定資料來源
Repeater1.DataBind();//繫結資料來源

效果:

這樣就可以直接繫結我們的資料了。

關於ui

ui的話，直接找個庫，最好找一個純的css庫。

總結

webform的確不適合我們的一些中大型和一些複雜的頁面了。

但是webform用來做測試或者日常的控制檯替代品還是比較好的，可以看到其實webform做一些小的東西，還是非常清爽的，做小型工具的話，上面這些完全夠用。

我們可以不用過多的js程式碼(傷眼睛)，注重的更多的是邏輯,我們可以把我們的關注點轉移到功能實現上去。

上面只是個人觀點，如有不同的觀點，請包容指正。

相關文章