今天和之后的一段时间, 将给大家带来新的内容 JQueryElement 服务器控件, 而暂时不再讨论 IEBrowser 的相关内容.
JQueryElement 是可以在 ASP.NET 中使用的服务器端控件, 实现了 jqueryui 的相关功能和其所有的插件.
使用 JQueryElement 将减少需要手工书写的 javascript 脚本, 比如: 定义 jqueryui 中的按钮, 执行 Ajax 操作. 因此, 对 jqueryui 稍有或基本不了解的情况下, 可能使用 JQueryElement 完成稍稍复杂的任务.
而本次将演示一个通过 Ajax 调用来验证用户名的示例, 在示例所用的网站项目中, 已经引用了 JQueryElement 的 dll, jqueryui 相关的脚本和样式文件, 下面来看第一个页面 Button1.aspx:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Button1.aspx.cs" Inherits="Button1" %>
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="form1" runat="server">
16 <div>
17 用户名:<input type="text" id="txtUserName" class="ui-accordion-content" />
18 <je:Button ID="cmdCheckUserName" runat="server" Label="检测用户名">
19 <ClickAsync Url="CheckUserName.ashx" Success="
20 function(data)
21 {
22 alert(data.message);
23 }
24 " Error="
25 function()
26 {
27 alert('检测出现错误!');
28 }
29 ">
30 <Parameters>
31 <je:ParameterEdit Name="un" Type="Selector" Value="'#txtUserName'" />
32 </Parameters>
33 </ClickAsync>
34 </je:Button>
35 </div>
36 </form>
37 </body>
38 </html>
在页面的 10 到 12 行中, 我们引用了 jqueryui 所需的样式和脚本, 因为 JQueryElement 并没有采用将所需的脚本作为资源嵌入到 dll 文件中.
第 3 行则是一条页面指令, 为页面引用 JQueryElement 的 dll. 而这条指令也会通过从工具栏中拖动 JQueryElement 控件到页面自动添加, 不过要首先在工具栏上添加 JQueryElement 控件.
我们看到, 第 18 到 34 是对 JQueryElement 按钮控件的定义, 在 jqueryui 中按钮插件的所有属性名称在 JQueryElement 中保持不变, 因此 18 行中的 Label 属性表示按钮的文本.
之后的 19 到 33 行是对点击按钮后 Ajax 操作的设置, 其中 Url 属性表示调用的页面地址, 这里是同目录下的 CheckUserName.ashx, 此文件用于检查用户名, 稍后会说明. Success 和 Error 属性表示 Ajax 操作成功或者出错时调用的 javascript 函数, 在处理成功的函数中, 我们看到函数有一个名为 data 的参数, data 中即包含了 CheckUserName.ashx 返回的 JSON 数据, 因此在此函数中, 我们可以将服务器返回的消息弹出给用户.
在调用 CheckUserName.ashx 检测用户名时, 我们通过 30 到 32 行设置了传递的参数, 也就是用户输入的用户名, ParameterEdit 的 Name 属性表示参数的名称, 这里是设置的 un, Type 属性表示 Value 中内容是如何生成参数值得, Selector 表示 Value 中的内容作为一个选择器, 其对应的元素的值将作为参数值, 这里的选择器也就是 jquery 中标准的选择器写法.
上面的简单设置即完成了大部分的操作, 下面只需要再编写 CheckUserName.ashx 即可:
1 <%@ WebHandler Language="C#" Class="CheckUserName" %>
2
3 using System;
4 using System.Web;
5
6 public class CheckUserName : IHttpHandler
7 {
8
9 public void ProcessRequest ( HttpContext context )
10 {
11 context.Response.ContentType = "text/javascript";
12
13 string userName = context.Request["un"];
14 string result = string.Empty;
15
16 if ( string.IsNullOrEmpty ( userName ) )
17 result = "用户名不能为空";
18 else if ( userName.Length < 3 || userName.Length > 10 )
19 result = "用户名的长度应该在 3 和 10 之间";
20 else
21 result = "合法的用户名";
22
23 context.Response.Write ( "{\"message\": \"" + result + "\"}" );
24 }
25
26 public bool IsReusable
27 {
28 get
29 {
30 return false;
31 }
32 }
33
34 }
在 ProcessRequest 方法中, 我们设置返回的类型为 text/javascript, 这样浏览器将把返回的内容作为脚本处理. 我们通过 context 的 Request 属性获取了参数 un 的值, 此 un 正是上面提到的在 ParameterEdit 中通过 Name 属性设置的值.
而在检测完用户名之后, 我们使用简单的方式返回了一段 json, 他是一个对象, 包含了一个 message 属性, 这个 message 属性又在 Button1.aspx 页面的按钮的 Success 处理函数中使用.
这样简单编写后, 就实现了按钮的 Ajax, 实际的效果就没法展示了, 如果需要观看, 可以参照下面的演示.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
目前 JQueryElement 最新版本为 2.6.1, 可以在上面的地址看到新版本改动的内容, 欢迎大家留言发表好的建议.