jQueryUI 时钟无刷新获取消息 - JQueryElement [5]
时隔数周后又和大家见面, 这次给大家带来的是 jquery ui 的时钟插件, 类似于 winfrom 中的 Timer 控件, jquery ui 时钟插件可以定时执行 js 脚本或者执行 ajax 调用.
提前说明下 JQueryElement 更新到了 3.0, 增加了各种效果的控件, 以及 Timer 和 Repeater 控件. 还进行了 ajax 设置的一些调整, 而之前的一些示例的代码也进行了调整.
还是来说本次的例子吧, 将通过一个设置消息和一个接收消息的页面来演示 Timer 控件, 首先来看设置消息的页面 Message.aspx:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Message.aspx.cs" Inherits="_3_0_Message" %>
2
3 <%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui"
4 TagPrefix="je" %>
5 <%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui"
6 TagPrefix="je" %>
7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
8 <html xmlns="http://www.w3.org/1999/xhtml">
9 <head runat="server">
10 <title>设置消息</title>
11 <link type="text/css" rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.15.custom.css" />
12 <script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
13 <script type="text/javascript" src="../js/jquery-ui-1.8.15.custom.min.js"></script>
14 <link type="text/css" rel="stylesheet" href="../css/main.css" />
15 </head>
16 <body>
17 <form id="formMessage" runat="server">
18 <div class="title">
19 设置消息
20 </div>
21 <div class="content">
22 消息内容:
23 <input id="message" runat="server" type="text" class="ui-widget" /><br />
24 <br />
25 <je:Button ID="cmdSave" runat="server" Label="保存">
26 <ClickAsync Url="Message.aspx" MethodName="SaveMessage" Success="
27 function(data){
28 $('#result').html(data.d);
29 }
30 ">
31 <ParameterList>
32 <je:Parameter Name="message" Type="Selector" Value="'#message'" />
33 </ParameterList>
34 </ClickAsync>
35 </je:Button>
36 <p id="result">
37 </p>
38 </div>
39 </form>
40 </body>
41 </html>
页面的开始处使用了两个页面指令 Register 来引用了 JQueryElement 所需的命名空间.
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui" TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui" TagPrefix="je" %>
之后, 我们在 head 标签中引用了 jquery ui 所需的脚本和样式, 因为 JQueryElement 并没有将这些脚本作为资源包含在它的 dll 中.
<link type="text/css" rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.15.custom.css" />
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.15.custom.min.js"></script>
在页面上有 3 个主要的元素, id 为 message 的 input 元素, 用来让用户输入消息的内容, 用户可以将此内容保存在服务器上, 以发送给访问接收消息页面的访问者. 这里还设置了 runat 为 server, 以让对应的 cs 文件可以访问修改 input 元素的内容.
<input id="message" runat="server" type="text" class="ui-widget" />
3 个元素中还有一个 id 为 result 的 p 元素, 用来显示用户操作后从服务器返回的结果, 比如保存成功的消息.
<p id="result">
</p>
最后一个主要的元素是 Button 控件, 通过 ClickAsync 设置了点击按钮时的 ajax 操作, 这里设置为调用 WebServices 方法, Url 表示 WebServices 地址, MethodName 为方法名称, Success 为 ajax 调用成功后处理结果的 javascript 函数.
ParameterList 则表示传递给方法 SaveMessage 的参数, 参数名称为 message, 参数的值为前面所添加的 input 元素的值. Type 为 Selector 即说明了 Value 对应了一个选择器, 也就是选择 input 元素的选择器.
在处理 ajax 调用成功的函数中, data.d 表示从 SaveMessage 方法返回的数据, 我们使用 jquery 语法将这个数据显示在 p 元素中. SaveMessage 方法是页面 Message.aspx 对外的一个方法, 之后会说明.
<je:Button ID="cmdSave" runat="server" Label="保存">
<ClickAsync Url="Message.aspx" MethodName="SaveMessage" Success="
function(data){
$('#result').html(data.d);
}
">
<ParameterList>
<je:Parameter Name="message" Type="Selector" Value="'#message'" />
</ParameterList>
</ClickAsync>
</je:Button>
下面是 Message.aspx 对应的 Message.aspx.cs 文件:
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7 using System.Web.Services;
8
9 public partial class _3_0_Message : System.Web.UI.Page
10 {
11
12 protected void Page_Load ( object sender, EventArgs e )
13 {
14 this.message.Value = this.Application["m"] as string;
15 }
16
17 [WebMethod()]
18 public static string SaveMessage ( string message )
19 {
20
21 if ( string.IsNullOrEmpty ( message ) )
22 return "消息不能为空";
23 else if ( null != HttpContext.Current.Application["m"] && message == HttpContext.Current.Application["m"].ToString ( ) )
24 return "和原有消息相同";
25
26 HttpContext.Current.Application["m"] = message;
27 return "保存成功";
28 }
29
30 }
显示和设置的消息我们保存在 Application 对象中, 关键字为 m, 在页面载入的事件中, 我们将保存在 Application 中的消息赋值给 input 元素.
然后, 我们编写了 SaveMessage 方法, 是一个公有的字符串类型的方法, 并添加了 WebMethod 属性, 这样 SaveMessage 将可以被 ajax 调用, 在 SaveMessage 中, 我们判断参数 message 的合法性, 也就是从页面传递来的 input 元素的值, 如果合法则保存到 Application 对象中, 最后将结果返回到客户端浏览器, 浏览器中的 javascript 脚本通过 data.d 访问这个结果.
然后, 我们看 Welcome.aspx , 它将定时获取消息并显示给用户:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Welcome.aspx.cs" Inherits="_3_0_Welcome" %>
2
3 <%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui"
4 TagPrefix="je" %>
5 <%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui"
6 TagPrefix="je" %>
7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
8 <html xmlns="http://www.w3.org/1999/xhtml">
9 <head runat="server">
10 <title>欢迎</title>
11 <link type="text/css" rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.15.custom.css" />
12 <script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
13 <script type="text/javascript" src="../js/jquery-ui-1.8.15.custom.min.js"></script>
14 <link type="text/css" rel="stylesheet" href="../css/main.css" />
15 </head>
16 <body>
17 <form id="formWelcome" runat="server">
18 <div class="title">
19 欢迎
20 </div>
21 <div class="content">
22 Welcome 来到 JQueryElement!!!
23 </div>
24 <je:Dialog ID="welcomeDialog" runat="server" AutoOpen="false" Title="消息" Html="<div id='message'></div>" IsVariable="true"></je:Dialog>
25 <je:Timer ID="messageTimer" runat="server" Interval="1000" IsVariable="true">
26 <TickAjax Url="Welcome.aspx" MethodName="GetMessage" Success="
27 function(data){
28 if(data.d == '')
29 return;
30
31 $('#message').html(data.d);
32 welcomeDialog.dialog('open');
33 }
34 "></TickAjax>
35 </je:Timer>
36 </form>
37 </body>
38 </html>
39 <script type="text/javascript">
40 $(function () {
41 messageTimer.__timer('start');
42 });
43 </script>
命名空间, 脚本以及样式的引用和 Message.aspx 是一样的, 这里使用了 Dialog 和 Timer 控件来显示消息和定义获取消息.
Dialog 的 AutoOpen 设置为 false, 对话框将不会自动打开, Title 则表示对话框的标题, Html 为对话框中的 html 代码, 这里设置为了 <div id='message'></div>, 这样做可以让以后的 javascript 脚本可以方便的修改对话框的内容, IsVariable 表示生成与 Dialog 控件的 ClientID 同名的 javascript 变量, 以便在 javascript 脚本中使用.
<je:Dialog ID="welcomeDialog" runat="server" AutoOpen="false" Title="消息" Html="<div id='message'></div>" IsVariable="true"></je:Dialog>
Timer 定时进行 ajax 调用, TickAjax 和 Button 的 ClickAsync 是类似的, 都是进行 ajax 设置. 这里设置时钟每 1 秒钟调用一次 Welcome.aspx 页面的 GetMessage 方法. Interval 属性就表示了调用的时间间隔, 以毫秒为单位, IsVariable 表示生成与 Timer 控件的 ClientID 同名的 javascript 变量, 以便在 javascript 脚本中使用. TickAjax 中的 Success 也是和 ClickAsync 的 Success 一样, 是一个处理 ajax 调用成功的 javascript 函数. 在这个函数, 我们判断 GetMessage 返回的字符串, 也就是 data.d 是否是一个空字符串, 如果不为空字符, 则设置对话框的内容, 通过对话框中的 id 为 message 的 div 元素设置, 显示对话框则是使用 jquery ui 中对话框的语法.
<je:Timer ID="messageTimer" runat="server" Interval="1000" IsVariable="true">
<TickAjax Url="Welcome.aspx" MethodName="GetMessage" Success="
function(data){
if(data.d == '')
return;
$('#message').html(data.d);
welcomeDialog.dialog('open');
}
"></TickAjax>
</je:Timer>
由于时钟默认是不启动的, 所以在页面的最后, 我们通过如下的 javascript 启动了时钟, 使用 <时钟对象>.__timer('start') 来启动时钟, 也可以使用 <时钟对象>.__timer('start') 来停止时钟.
<script type="text/javascript">
$(function () {
messageTimer.__timer('start');
});
</script>
最后, 我们来看 Welcome.aspx.cs:
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7 using System.Web.Services;
8
9 public partial class _3_0_Welcome : System.Web.UI.Page
10 {
11
12 protected void Page_Load ( object sender, EventArgs e )
13 {
14
15 }
16
17 [WebMethod()]
18 public static string GetMessage ( )
19 {
20
21 if ( null == HttpContext.Current.Application["m"] || ( null != HttpContext.Current.Session["hasshow"] && ( bool ) HttpContext.Current.Session["hasshow"] ) )
22 return string.Empty;
23
24 HttpContext.Current.Session["hasshow"] = true;
25 return HttpContext.Current.Application["m"] as string;
26 }
27
28 }
GetMessage 和 Message.aspx.cs 中 SaveMessage 一样是可以被外部调用的. GetMessage 方法获取存放在 Application 对象中的消息, 并且在 Session 中保存是否显示过消息, 以保证同一会话不显示两次, 虽然这样的逻辑显示时钟每隔 1 秒调用 GetMessage 不给了力, 但毕竟只是个例子吧.
恩, 今天的内容写的够多了.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
目前 JQueryElement 最新版本为 3.0, 可以在上面的地址看到新版本改动的内容.
