jQueryUI 按钮简便调用 WebService - JQueryElement [4]
2011-07-20 11:18
288 查看
[b]其[/b]实这次是要说明进度条的, 但这个控件我没有找到需要解释的地方.
正好这次更新了 JQueryElement 到版本 2.6.3, 修改了其中的 AjaxSetting, AjaxSettingEdit 类, 增加了一些属性并完成了可对 WebService 的调用.
[b]本[/b]次的例子是通过按钮调用 WebService 保存学生信息并检查信息的完整度, 下面定义 Student 类 Student.cs:
在 Student 类中, 为了简单明了只有简单的 4 个字段, 也没有使用属性. Student 类将用于保存用户输入的学生信息.
[b]下[/b]面是页面 Progressbar.aspx 的代码:
在页面中, 我们还是先加入对了 JQueryElement 的 dll 的引用, 以及 jqueryui 相关的脚本和样式.
之后, 加入了与 Student 类字段对应的 4 个文本框.
之后, 我们加入了第一个按钮, 虽然之前的文章已经对按钮和 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 属性对应一个选择器.
保存按钮之后, 我们添加了检查按钮, 调用了另一个 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 变量.
[b]最[/b]后, 我们看下 WebService 的两个方法 Progressbar.aspx.cs:
也许只能在 .NET 4.0 中使用这种方法, 我们将 WebService 的方法写在了页面的代码文件中, 我们看到在两个方法 Save 和 Check 中, 我们增加了 WebMethod 属性, 并设置 enableSession 参数为 true, 因为这样我们可以在方法中使用 Session.
那么, 这两个方法的具体功能, 我就不再说明了, 都是很简单的, Save 是保存用户信息到 Student 类, 并存入到 Session 中, Check 方法则是检测 Student 类的信息填写的百分比.
[b]好[/b]的, 今天的例子使用 JQueryElement 的按钮和进度条服务器控件调用了 WebService 并处理其返回结果, 如果需要观看, 可以参照下面的演示.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
目前 JQueryElement 最新版本为 2.6.3, 可以在上面的地址看到新版本改动的内容.
实际过程演示: http://www.tudou.com/programs/view/kBBXWWRTEKc/ .
正好这次更新了 JQueryElement 到版本 2.6.3, 修改了其中的 AjaxSetting, AjaxSettingEdit 类, 增加了一些属性并完成了可对 WebService 的调用.
[b]本[/b]次的例子是通过按钮调用 WebService 保存学生信息并检查信息的完整度, 下面定义 Student 类 Student.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
///Student 的摘要说明
/// </summary>
public class Student
{
public string UserName;
public string EMail;
public string RealName;
public string ClassName;
}在 Student 类中, 为了简单明了只有简单的 4 个字段, 也没有使用属性. Student 类将用于保存用户输入的学生信息.
[b]下[/b]面是页面 Progressbar.aspx 的代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Progressbar.aspx.cs" Inherits="Progressbar" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui" TagPrefix="je" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" rel="Stylesheet" rev="Stylesheet" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
</head>
<body>
<form id="formProgressbar" runat="server">
<div>
用户名: <input type="text" id="userName" /><br />
邮箱: <input type="text" id="email" /><br />
真实姓名: <input type="text" id="realName" /><br />
班级: <input type="text" id="className" /><br />
<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>
<je:Button ID="cmdCheck" runat="server" Label="检查">
<ClickAsync ContentType="application/json;charset=utf-8" MethodName="Check"
Type="POST" Url="Progressbar.aspx" Success="
function(data){
bar.progressbar('option', 'value', data.d);
}
">
</ClickAsync>
</je:Button>
<je:Progressbar ID="bar" runat="server" IsVariable="true"></je:Progressbar>
</div>
</form>
</body>
</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>
[b]最[/b]后, 我们看下 WebService 的两个方法 Progressbar.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
public partial class Progressbar : System.Web.UI.Page
{
[WebMethod ( true )]
public static int Check ( )
{
if ( null == HttpContext.Current.Session["s"] )
HttpContext.Current.Session["s"] = new Student ( );
Student student = HttpContext.Current.Session["s"] as Student;
int pre = 0;
if ( !string.IsNullOrEmpty ( student.ClassName ) )
pre += 25;
if ( !string.IsNullOrEmpty ( student.EMail ) )
pre += 25;
if ( !string.IsNullOrEmpty ( student.RealName ) )
pre += 25;
if ( !string.IsNullOrEmpty ( student.UserName ) )
pre += 25;
return pre;
}
[WebMethod(true)]
public static string Save ( string userName, string email, string realName, string className )
{
if ( null == HttpContext.Current.Session["s"] )
HttpContext.Current.Session["s"] = new Student ( );
Student student = HttpContext.Current.Session["s"] as Student;
student.ClassName = className;
student.EMail = email;
student.RealName = realName;
student.UserName = userName;
return "保存了用户: " + (string.IsNullOrEmpty(userName) ? "无名氏" : userName);
}
protected void Page_Load(object sender, EventArgs e)
{
}
}也许只能在 .NET 4.0 中使用这种方法, 我们将 WebService 的方法写在了页面的代码文件中, 我们看到在两个方法 Save 和 Check 中, 我们增加了 WebMethod 属性, 并设置 enableSession 参数为 true, 因为这样我们可以在方法中使用 Session.
那么, 这两个方法的具体功能, 我就不再说明了, 都是很简单的, Save 是保存用户信息到 Student 类, 并存入到 Session 中, Check 方法则是检测 Student 类的信息填写的百分比.
[b]好[/b]的, 今天的例子使用 JQueryElement 的按钮和进度条服务器控件调用了 WebService 并处理其返回结果, 如果需要观看, 可以参照下面的演示.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
目前 JQueryElement 最新版本为 2.6.3, 可以在上面的地址看到新版本改动的内容.
实际过程演示: http://www.tudou.com/programs/view/kBBXWWRTEKc/ .
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery调用WebService返回JSON数据
- jQuery通过调用webservice返回json数据的问题
- jquery调用webservice
- Jquery调用Webservice传递Json数组
- jquery调用webservice
- JQuery调用VS2005 c#2.0编写的Webservice时返回值转换成JSON格式的解决办法
- 一起谈.NET技术，抛弃WebService，在.NET4中用 jQuery 调用 WCF
- asp.net 2010中jquery调用webservice
- asp.net 2010中jquery调用webservice
- asp.net 2010中jquery调用webservice
- asp.net 2010中jquery调用webservice
- asp.net中使用jQuery调用WebService返回JSON数据
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
- javascript,jquery调用xfire驱动的webservice
- jquery.Ajax soap方式调用webservice
- jQuery调用WebService
- jQuery 调用WebService 实例讲解
- Jquery调用webService的四种方法
- webservice调用没有按钮
- Jquery + Ajax调用webService实例代码(asp.net)