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代码(伤眼睛)，注重的更多的是逻辑,咱们能够把咱们的关注点转移到功能实现上去。

上面只是我的观点，若有不一样的观点，请包容指正。