jQueryUI 按钮简便调用 WebService - JQueryElement [4]
其实这次是要说明进度条的, 但这个控件我没有找到需要解释的地方.
正好这次更新了 JQueryElement 到版本 2.6.3, 修改了其中的 AjaxSetting, AjaxSettingEdit 类, 增加了一些属性并完成了可对 WebService 的调用.
本次的例子是通过按钮调用 WebService 保存学生信息并检查信息的完整度, 下面定义 Student 类 Student.cs:
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5
6 /// <summary>
7 ///Student 的摘要说明
8 /// </summary>
9 public class Student
10 {
11 public string UserName;
12 public string EMail;
13
14 public string RealName;
15 public string ClassName;
16 }
在 Student 类中, 为了简单明了只有简单的 4 个字段, 也没有使用属性. Student 类将用于保存用户输入的学生信息.
下面是页面 Progressbar.aspx 的代码:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Progressbar.aspx.cs" Inherits="Progressbar" %>
2
3 <%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui" TagPrefix="je" %>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6
7 <html xmlns="http://www.w3.org/1999/xhtml">
8 <head runat="server">
9 <title></title>
10 <link type="text/css" rel="Stylesheet" rev="Stylesheet" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" />
11 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
12 <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
13 </head>
14 <body>
15 <form id="formProgressbar" runat="server">
16 <div>
17 用户名: <input type="text" id="userName" /><br />
18 邮箱: <input type="text" id="email" /><br />
19 真实姓名: <input type="text" id="realName" /><br />
20 班级: <input type="text" id="className" /><br />
21 <je:Button ID="cmdSave" runat="server" Label="保存">
22 <ClickAsync ContentType="application/json;charset=utf-8" MethodName="Save"
23 Type="POST" Url="Progressbar.aspx" Success="
24 function(data){
25 alert(data.d);
26 }
27 ">
28 <Parameters>
29 <je:ParameterEdit Name="userName" Type="Selector" Value="'#userName'" />
30 <je:ParameterEdit Name="email" Type="Selector" Value="'#email'" />
31 <je:ParameterEdit Name="realName" Type="Selector" Value="'#realName'" />
32 <je:ParameterEdit Name="className" Type="Selector" Value="'#className'" />
33 </Parameters>
34 </ClickAsync>
35 </je:Button>
36 <je:Button ID="cmdCheck" runat="server" Label="检查">
37 <ClickAsync ContentType="application/json;charset=utf-8" MethodName="Check"
38 Type="POST" Url="Progressbar.aspx" Success="
39 function(data){
40 bar.progressbar('option', 'value', data.d);
41 }
42 ">
43 </ClickAsync>
44 </je:Button>
45
46 <je:Progressbar ID="bar" runat="server" IsVariable="true"></je:Progressbar>
47 </div>
48 </form>
49 </body>
50 </html>
在页面中, 我们还是先加入对了 JQueryElement 的 dll 的引用, 以及 jqueryui 相关的脚本和样式.
之后, 加入了与 Student 类字段对应的 4 个文本框.
用户名: <input type="text" id="userName" /><br />
邮箱: <input type="text" id="email" /><br />
真实姓名: <input type="text" id="realName" /><br />
班级: <input type="text" id="className" /><br />
之后, 我们加入了第一个按钮, 虽然之前的文章已经对按钮和 Ajax 设置有过详细的讲解, 但还是简单的说明一下好了. Label 属性表示按钮的文本, 这里我们显示的是保存. 在 ClickAsync 中, 是按钮点击时的 Ajax 操作, 在例子中 Url 属性为 WebService 的地址, MethodName 为 WebService 方法的名称, 在设计视图中, 如果 MethodName 为空, 那么设置 MethodName 属性将自动修改 ContentType 和 Type 属性为 application/json;charset=uft-8 和 POST, 以适应调用 WebService.
Success 为处理调用 WebService 返回结果的 javascript 函数, 在函数中, 弹出了服务器返回的消息. 第一个参数 data 在 .NET 4.0 中默认返回为 JSON 数据, 形式为 {d: <返回值>}, d 中包含的就是 WebService 的返回值, 比如: 一个字符串或者数字, 也可能是一个 JSON. 在 .NET 2.0 中, data 默认为 xml 对象, 而 3.0 和 3.5 我是没有测试.
ParameterEdit 属性表示为 WebService 的传递的参数, 其中的 Name 属性应该是和 WebService 的 Save 方法中的参数名称一致. Save 方法一会将给予说明. Type 和 Value 属性在代码中表示获取文本框的值作为参数值, Seletor 表示 Value 属性对应一个选择器.
<je:Button ID="cmdSave" runat="server" Label="保存">
<ClickAsync ContentType="application/json;charset=utf-8" MethodName="Save"
Type="POST" Url="Progressbar.aspx" Success="
function(data){
alert(data.d);
}
">
<Parameters>
<je:ParameterEdit Name="userName" Type="Selector" Value="'#userName'" />
<je:ParameterEdit Name="email" Type="Selector" Value="'#email'" />
<je:ParameterEdit Name="realName" Type="Selector" Value="'#realName'" />
<je:ParameterEdit Name="className" Type="Selector" Value="'#className'" />
</Parameters>
</ClickAsync>
</je:Button>
保存按钮之后, 我们添加了检查按钮, 调用了另一个 WebService 方法 Check 检查学生信息完整度, 并将完整度显示为进度条的值, 就是 Success 属性中 javascript 函数的这一句: bar.progressbar('option', 'value', data.d);, 其他的一些参数设置都是类似, 不再说明.
在上面 javascript 脚本中 bar 变量表示 jqueryui 进度条, 我们调用他的 progressbar 方法修改其 value 属性. 这里对 bar 的引用也可以使用之前说明的 [%id:bar%] 这样的内嵌语法, 但这里服务器控件 Progressbar 的 ClientID 与 ID 属性一致, 所以直接写 bar 也是没有问题的. 脚本中的 data.d 表示从服务器返回的学生信息完成百分比.
这里就是进度条的代码, IsVariable 属性表示是否生成与 ClientID 同名的 javascript 变量, 在实际的效果中, 也就是生成了一个名称为 bar 的 javascript 变量, 也就是上一小段中提到的 bar 变量.
<je:Progressbar ID="bar" runat="server" IsVariable="true"></je:Progressbar>
最后, 我们看下 WebService 的两个方法 Progressbar.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 Progressbar : System.Web.UI.Page
10 {
11
12 [WebMethod ( true )]
13 public static int Check ( )
14 {
15
16 if ( null == HttpContext.Current.Session["s"] )
17 HttpContext.Current.Session["s"] = new Student ( );
18
19 Student student = HttpContext.Current.Session["s"] as Student;
20
21 int pre = 0;
22
23 if ( !string.IsNullOrEmpty ( student.ClassName ) )
24 pre += 25;
25
26 if ( !string.IsNullOrEmpty ( student.EMail ) )
27 pre += 25;
28
29 if ( !string.IsNullOrEmpty ( student.RealName ) )
30 pre += 25;
31
32 if ( !string.IsNullOrEmpty ( student.UserName ) )
33 pre += 25;
34
35 return pre;
36 }
37
38 [WebMethod(true)]
39 public static string Save ( string userName, string email, string realName, string className )
40 {
41
42 if ( null == HttpContext.Current.Session["s"] )
43 HttpContext.Current.Session["s"] = new Student ( );
44
45 Student student = HttpContext.Current.Session["s"] as Student;
46
47 student.ClassName = className;
48 student.EMail = email;
49 student.RealName = realName;
50 student.UserName = userName;
51
52 return "保存了用户: " + (string.IsNullOrEmpty(userName) ? "无名氏" : userName);
53 }
54
55 protected void Page_Load(object sender, EventArgs e)
56 {
57
58 }
59 }
也许只能在 .NET 4.0 中使用这种方法, 我们将 WebService 的方法写在了页面的代码文件中, 我们看到在两个方法 Save 和 Check 中, 我们增加了 WebMethod 属性, 并设置 enableSession 参数为 true, 因为这样我们可以在方法中使用 Session.
那么, 这两个方法的具体功能, 我就不再说明了, 都是很简单的, Save 是保存用户信息到 Student 类, 并存入到 Session 中, Check 方法则是检测 Student 类的信息填写的百分比.
好的, 今天的例子使用 JQueryElement 的按钮和进度条服务器控件调用了 WebService 并处理其返回结果, 如果需要观看, 可以参照下面的演示.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
目前 JQueryElement 最新版本为 2.6.3, 可以在上面的地址看到新版本改动的内容.
