其实这次是要说明进度条的, 但这个控件我没有找到需要解释的地方.
正好这次更新了 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 }
在 StudentStudent
下面是页面 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
用户名: <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
那么, 这两个方法的具体功能, 我就不再说明了, 都是很简单的, Save 是保存用户信息到 Student 类, 并存入到 Session 中, Check 方法则是检测 Student
好的, 今天的例子使用 JQueryElement 的按钮和进度条服务器控件调用了 WebService 并处理其返回结果, 如果需要观看, 可以参照下面的演示.
