ASP.NET 2.0 新增的客户端脚本用户体验功能

最近研究了一下aspnet2.0，发现了一些比较刺激的客户端脚本的新功能，这些功能不但结合了客户端脚本的特性，增加了用户体验，而且还能够使我们能够更好的在服务器脚本的编码中对客户端脚本进行有效的控制和调试。

1、客户端点击事件 
    在asp.net 2.0中，对可以响应点击处理的服务器控件加入了客户端脚本响应处理属性--OnClientClick属性，我们知道aspnet1.1中同样能够在服务器控件中加入客户端javascript脚本，但是这能在后台代码中通过服务器脚本以编程的方式为服务器控件添加，也就是在程序是在运行时添加的客户端脚本，这种方式是通过对控件添加Attribute属性来实现的：

[aspnet1.1中为服务器控件添加javascript脚本]

ASPX页面：

<form id="Form1" method="post" runat="server">
            <asp:Button id="Button1" runat="server" Text="Button"></asp:Button>
        </form>

后台C#代码：
private void Page_Load(object sender, System.EventArgs e)
        {
            // 在此处放置用户代码以初始化页面
            if(!Page.IsPostBack)
            {
                this.Button1.Attributes.Add("onclick","alert('hello');return false;");
            }
        }

    而在asp.net 2.0中，只需添加如下代码就能够为服务器控件增加客户端脚本。请注意下面的javascirpt语句，我为第二个按钮控件的javascript脚本添加了一句"return false;"，这样才能真正做到增进客户体验。这是因为如果没有"return false"，在按钮时该页面始终都要发生一次往返操作，也就是说每点击一次按钮，form里的内容都会提交到服务器，而这样就违背了只在客户端处理事件的原则，特别是在AJAX中，这种原则是相当重要的。其实通过实验就会发现在点击按钮1后会首先触发客户端javascript脚本事件，弹出一个警告对话框，在点击"确定"后接着又触发了服务器端事件"Button1_Click"，假如在按钮1的客户端脚本中也加入一条"return false;"，那么Buttn1_Click事件就不会被触发，尽管在服务器控件里已经声明了此事件处理程序，但该页并没有提交服务器。

[aspnet2.0中为服务器控件添加javascript脚本]

ASPX页面：

<script runat="server"></script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="Button1" runat="server" OnClientClick="javascript:alert('client event fired first! the server evnet will fired next')" OnClick="Button1_Click" Text="Click fire Client & Server" /><br />
        <br />
        <asp:Button ID="Button2" runat="server" Text="Click just fire Client" OnClientClick="javascript:alert('just client event fired!');return false" /><br />
    </form>
</body>
</html>

   这就好像在html控件中通过"runat=server"和"onserverclick=myserverclickevent"的属性组合来实现服务端脚本事件处理一样，只不过实现的物理位置恰好相反（这是让html控件在服务器端响应点击事件处理，而上面的例子是让web控件在客户端响应点击事件处理）。

2、页面滚动位置的保持
    在1.1版本中，对于一个其内容超出了屏幕长度的页面，要是该页面发生了一次往返操作，或者说向服务器提交了一次事件处理（如点击一次"asp:Button"控件），那么在客户端重新显示该页面时，其滚动位置将重置到顶部。这是由于在一次往返操作中服务器实际上又重新生成了一次页面，所以客户端获取该页时始终只能从头展现。
    而在2.0中，只需要在aspx页面代码中加入以下的指令就可以保持页面滚动的位置：

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>

    当然你也可以为整个网站设置统一设置页面保持属性，只需在web.config中配置如下内容：
<system.web>
      <pages maintainScrollPositionOnPostBack="true"></pages>
    </system.web>

3、其它方面
    2.0中还有一些其它比较好的客户体验增强，比如说WebPart系列组件，还有CallBack Event Handlers，甚至还有Atlas这种强大的Ajax模板。总的说来ASP.NET 2.0在不但增强了编程模型而且还提高了用户体验，使我们的Web应用程序更加的生动了。


posted @ 2006-01-23 14:18  Andre  阅读(881)  评论(3)    收藏  举报