近期发布
专辑列表

Windows Phone 游戏合集
JQueryElement
IEBrowser
WPXNA

jQueryUI 时钟无刷新获取消息 - JQueryElement [5]

隔数周后又和大家见面, 这次给大家带来的是 jquery ui 的时钟插件, 类似于 winfrom 中的 Timer 控件, jquery ui 时钟插件可以定时执行 js 脚本或者执行 ajax 调用.

提前说明下 JQueryElement 更新到了 3.0, 增加了各种效果的控件, 以及 TimerRepeater 控件. 还进行了 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 个主要的元素, idmessageinput 元素, 用来让用户输入消息的内容, 用户可以将此内容保存在服务器上, 以发送给访问接收消息页面的访问者. 这里还设置了 runatserver, 以让对应的 cs 文件可以访问修改 input 元素的内容.

<input id="message" runat="server" type="text" class="ui-widget" />

3 个元素中还有一个 idresultp 元素, 用来显示用户操作后从服务器返回的结果, 比如保存成功的消息.

<p id="result">
</p>

最后一个主要的元素是 Button 控件, 通过 ClickAsync 设置了点击按钮时的 ajax 操作, 这里设置为调用 WebServices 方法, Url 表示 WebServices 地址, MethodName 为方法名称, Successajax 调用成功后处理结果的 javascript 函数.

ParameterList 则表示传递给方法 SaveMessage 的参数, 参数名称为 message, 参数的值为前面所添加的 input 元素的值. TypeSelector 即说明了 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 是一样的, 这里使用了 DialogTimer 控件来显示消息和定义获取消息.

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 调用, TickAjaxButtonClickAsync 是类似的, 都是进行 ajax 设置. 这里设置时钟每 1 秒钟调用一次 Welcome.aspx 页面的 GetMessage 方法. Interval 属性就表示了调用的时间间隔, 以毫秒为单位, IsVariable 表示生成与 Timer 控件的 ClientID 同名的 javascript 变量, 以便在 javascript 脚本中使用. TickAjax 中的 Success 也是和 ClickAsyncSuccess 一样, 是一个处理 ajax 调用成功的 javascript 函数. 在这个函数, 我们判断 GetMessage 返回的字符串, 也就是 data.d 是否是一个空字符串, 如果不为空字符, 则设置对话框的内容, 通过对话框中的 idmessage 的 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 }

  GetMessageMessage.aspx.cs 中 SaveMessage 一样是可以被外部调用的. GetMessage 方法获取存放在 Application 对象中的消息, 并且在 Session 中保存是否显示过消息, 以保证同一会话不显示两次, 虽然这样的逻辑显示时钟每隔 1 秒调用 GetMessage 不给了力, 但毕竟只是个例子吧.

, 今天的内容写的够多了.

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

目前 JQueryElement 最新版本为 3.0, 可以在上面的地址看到新版本改动的内容.

实际过程演示: http://www.tudou.com/programs/view/eMT0UQhGVXM/ .

posted @ 2011-08-21 17:25  麦丝平方  阅读(3438)  评论(3编辑  收藏  举报