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

最新推荐文章于 2024-05-03 16:37:51 发布

weixin_33924220

最新推荐文章于 2024-05-03 16:37:51 发布

阅读量65

点赞数

文章标签： ui javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/zoyobar/archive/2011/08/21/JE_5.html

版权

时隔数周后又和大家见面, 这次给大家带来的是 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, 可以在上面的地址看到新版本改动的内容.

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

转载于:https://www.cnblogs.com/zoyobar/archive/2011/08/21/JE_5.html

weixin_33924220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQueryUI 时钟无刷新获取消息 - JQueryElement [5]

时隔数周后又和大家见面, 这次给大家带来的是 jquery ui 的时钟插件, 类似于 winfrom 中的 Timer 控件, jquery ui 时钟插件可以定时执行 js 脚本或者执行 ajax 调用.提前说明下 JQueryElement 更新到了 3.0,增加了各种效果的控件, 以及 Timer 和 Repeater 控件. 还进行了 ajax 设置的一些调整, 而之前的一些示例的...
复制链接

扫一扫