?2016-2026 Matools All rights reserved,
粵ICP備17059708號
前言
現(xiàn)在有人談起webform 一般都會說這種技術(shù)已經(jīng)過時(shí)了，毫無用處。
因?yàn)槲覀冊谌粘ｉ_發(fā)中已經(jīng)不會去開發(fā)哪種幾個簡單的網(wǎng)頁的程序，我們的業(yè)務(wù)更加復(fù)雜，這種拖動式的過于死板。
但是是否毫無用處呢？其他的我不知道，但是如果做一個簡單的工具類網(wǎng)頁還是感覺非常清晰的，然后日常寫一些東西的時(shí)候我們需要一個界面去展示我們測試的數(shù)據(jù)，那么我還是覺得這東西挺方便的。
以前學(xué)習(xí)webform的時(shí)候是在上學(xué)期間，做項(xiàng)目用了一個學(xué)期(好吧，非常古老了)，后來都是mvc了。下面我闡述一些自己做工具和日常在控制臺不好顯示的時(shí)候使用webform的一個好處。
正文
更新頁面不刷新
我覺得無論作為工具，還是測試，現(xiàn)在頁面我希望頁面更新的時(shí)候，是不希望刷新頁面的。
那么webfrom是如何實(shí)現(xiàn)的。
有兩種方式:
第一種:
<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會包裹整個網(wǎng)站的html。
然后你僅僅需要在UpdatePanel中寫入你需要更新的元素。
比如第一個按鈕一，有一個事件onclick。那么這個事件會對應(yīng)后臺的:
protected void OnClick(object sender, EventArgs e) { this.Time1.Text =
System.DateTime.Now.ToString(); this.Time2.Text =
System.DateTime.Now.AddDays(1).ToString(); }
我僅僅需要設(shè)置this.Time1和this.Time2的值，那么他們就會刷新，也不會刷新整個頁面。
看一下原理:
它會去做一個請求:
然后獲得到我們需要刷新的部分:
我覺得不需要過多的去關(guān)注著如何刷新，因?yàn)橐呀?jīng)非常成熟，加上其現(xiàn)在用了做工具。
這時(shí)候有人問了，做工具或者測試的時(shí)候也需要自定義一些復(fù)雜的回調(diào)啊。那么這時(shí)候pageMethods可以幫你實(shí)現(xiàn)，你不需要去引入任何庫，因?yàn)閣ebfrom自帶。
第二種:
<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) //回調(diào)函數(shù)，用val接受后臺代碼aa的執(zhí)行結(jié)果 {
alert(val); } </script> <asp:Label ID="Label1" runat="server"
Text="請輸入信息："></asp:Label> <asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox> <input type="button" value="轉(zhuǎn)發(fā)我輸入的內(nèi)容"
onclick='tips()' id="btnGetServerTime" /> </div> </form> </body>
效果:
其實(shí)重點(diǎn)看tips就好，PageMethods.callmethod(txt, funRight);
這個PageMethods是渲染引擎引入的，后面我會介紹。
那么這個會執(zhí)行后臺的callmethod方法，txt是傳入的參數(shù)，funRight是成功回調(diào)。
看下后臺:
[WebMethod] //[ScriptMethod(ResponseFormat = ResponseFormat.Json)] public
static string callmethod(string str) { return "您輸入的是:"+ str; }
拿到數(shù)據(jù)后，加上“您輸入的是:”，然后返回。
效果:
介紹一下原理:
它會去后臺調(diào)用callmethod方法，
然后會返回:
那么看下PageMethods.callmethod為什么會去調(diào)用到我們后臺的方法：
上圖我們看到這個會幫我們生成callmethod方法，然后調(diào)用對應(yīng)的接口，這讓我們的代碼看起來清爽。
數(shù)據(jù)綁定
后臺加上有一個類:
/// <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> <%--創(chuàng)建一個表格--%> <thead>
<%--表格的表頭--%> <tr> <%--每一列的列名--%> <td>用戶</td> <td>性別</td> < /tr> </thead>
<tbody> <%--表格的主體--%> <asp:Repeater ID="Repeater1" runat="server"> <%--循環(huán)數(shù)據(jù)--%>
<ItemTemplate> <tr> <%--括號內(nèi)為屬性名--%> <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;//指定數(shù)據(jù)源 Repeater1.DataBind();//綁定數(shù)據(jù)源
效果:
這樣就可以直接綁定我們的數(shù)據(jù)了。
關(guān)于ui
ui的話，直接找個庫，最好找一個純的css庫。
總結(jié)
webform的確不適合我們的一些中大型和一些復(fù)雜的頁面了。
但是webform用來做測試或者日常的控制臺替代品還是比較好的，可以看到其實(shí)webform做一些小的東西，還是非常清爽的，做小型工具的話，上面這些完全夠用。
我們可以不用過多的js代碼(傷眼睛)，注重的更多的是邏輯,我們可以把我們的關(guān)注點(diǎn)轉(zhuǎn)移到功能實(shí)現(xiàn)上去。
上面只是個人觀點(diǎn)，如有不同的觀點(diǎn)，請包容指正。
熱門工具 換一換