webform 最後的黃昏之力

時間 2020-05-01

標籤 webform 最後黃昏简体版

原文原文鏈接

前言

如今有人談起webform 通常都會說這種技術已通過時了，毫無用處。javascript

由於咱們在平常開發中已經不會去開發哪一種幾個簡單的網頁的程序，咱們的業務更加複雜，這種拖動式的過於死板。css

可是是否毫無用處呢？其餘的我不知道，可是若是作一個簡單的工具類網頁仍是感受很是清晰的，而後平常寫一些東西的時候咱們須要一個界面去展現咱們測試的數據，那麼我仍是以爲這東西挺方便的。html

之前學習webform的時候是在上學期間，作項目用了一個學期(好吧，很是古老了)，後來都是mvc了。下面我闡述一些本身作工具和平常在控制檯很差顯示的時候使用webform的一個好處。java

正文

更新頁面不刷新

我以爲不管做爲工具，仍是測試，如今頁面我但願頁面更新的時候，是不但願刷新頁面的。web

那麼webfrom是如何實現的。mvc

有兩種方式:函數

第一種:工具

<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代碼(傷眼睛)，注重的更多的是邏輯,咱們能夠把咱們的關注點轉移到功能實現上去。

上面只是我的觀點，若有不一樣的觀點，請包容指正。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。