• .NET 服务器按钮控件轻松调用 Ajax JQueryElement [2]


    天和之后的一段时间, 将给大家带来新的内容 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, 可以在上面的地址看到新版本改动的内容, 欢迎大家留言发表好的建议.

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

  • 相关阅读:
    Git-删除文件后找回-比较文件差异
    Python-异常处理-66
    Python-包-65
    Python-序列号和模块复习-64
    python入门第二十五天--反射 通过字符串的形式操作对象中的成员
    python入门第二十五天--异常处理
    python入门第二十四天----成员修饰符 类的特殊成员
    python入门第二十四天----类的成员之属性
    python入门第二十三天-----静态字段和静态方法
    pyqt5-day4
  • 原文地址:https://www.cnblogs.com/zoyobar/p/JE_2.html
Copyright © 2020-2023  润新知