`
az7772010
  • 浏览: 201771 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

基于ASP.NET的 JQuery实例

 
阅读更多
基于ASP.NET的 JQuery实例
2011-08-30 17:13

cs
using System.Web.Services;
<wbr>[WebMethod]</wbr>
<wbr><wbr><wbr><wbr> public static string Web_UpdateItem(string columnName, string columnValue, string id)</wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr> {</wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> BLLCard bLLCard = new BLLCard();</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> Dictionary&lt;string, string&gt; dict = new Dictionary&lt;string, string&gt;();</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> dict.Add(columnName, columnValue);</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> if (!bLLCard.Update(dict, Convert.ToDecimal(id)))</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> {</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> return "-1:" + bLLCard.GetLastErr().Replace(",", "");</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> }</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> return "0";</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr> }</wbr></wbr></wbr></wbr>

aspx
<wbr>&lt;asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"&gt;</wbr>
<wbr><wbr> &lt;/asp:ScriptManager&gt;</wbr></wbr>
function SetUse(obj,no) {
<wbr><wbr><wbr><wbr><wbr><wbr> var state = $(obj).html();</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> var value = 0;</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> var label = "";</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> if (state == "禁用") {</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> value = 0;</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> label = "启用";</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> }</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> else {</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> value = 1;</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> label = "禁用";</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> }</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> $.ajax({</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> type: "Post",</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> url: "Card.aspx/Web_UpdateItem",</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> contentType: "application/json;charset=utf-8",</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> dataType: "json",</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> data: "{ "id": "" + no + "" ,"columnName": "card_state_use","columnValue": "" + value + "" }",</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> success: function (data) {</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $(obj).html(label);</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> if (data.d.indexOf("-1") &gt;= 0) {</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> alert(data.d);</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> },</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> error: function (err) {</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> alert("更新错误");</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr> });</wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr> }</wbr></wbr></wbr></wbr>



在使用JQuery前,请到www.jquery.com下载最新版本的js代码,然后再代码里使用<?XML:NAMESPACE PREFIX = O />

<wbr>&lt;script<wbr>src="_scripts/jQuery-1.2.6.js"<wbr>type="text/javascript"&gt;&lt;/script&gt;</wbr></wbr></wbr>即可,
当然,由于微软已经把
JQuery集成到VS里,所以你可以WWW.ASP.NET/ajax查看

<wbr></wbr>

本文将通过六个列子介绍如何在ASP.NET里使用JQuery,其他很容易类比学会。这个项目布局如下图

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>


基于ASP.NET的<wbr>JQuery实例

Sample1JQuery支持基于GetAJAX

<wbr></wbr>

本例子说明如何在ASP.NET里使用基于JQuery的Get方法。页面布局代码如下:
基于ASP.NET的<wbr>JQuery实例
页面布局很简单,一个文本框用于输入票数,还有一个ID为Error1的div,用于显示AJAX操作结果。
下面是AJAX的方法
基于ASP.NET的<wbr>JQuery实例

<wbr></wbr>

<wbr></wbr>

在了解代码前,看一下运行结果:
运行效果

<wbr></wbr>

<wbr></wbr>


基于ASP.NET的<wbr>JQuery实例

在票数后面输入数字,如果大于5,则给出提示信息,否则,则没有。这里使用了文本框的change事件,所以输入数字后,需要使其失去焦点,
否则看不到结果
下面是对上面代码的简单解释:

<wbr></wbr>

<wbr><wbr><wbr><strong><wbr><wbr><wbr><wbr>&lt;script<wbr>language="javascript"&gt;</wbr></wbr></wbr></wbr></wbr></strong></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>$(document).ready(function()<wbr>{</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>...</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>}</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr><wbr></wbr><wbr>&lt;/script&gt;</wbr>

是一个类似英语用法的标准句型,当页面完毕后做某事的意思。
可能有人需要问为什么需要需要这样的类型。这是因为JS的位置不同,需要执行不同的判断。考虑一下到你打开的百度页面,当百度页面加载完毕后,光标会自动定位到输入框

这里它的代码可能类似如下:

<input<wbr>type="text"<wbr>id="f"&gt;</wbr></wbr>

<script>

var<wbr>o=document.getElemementById("f");</wbr>

o.focus();
</script>

在这里,这段脚本必须放在后面,如果这样放置代码

<script>

var<wbr>o=document.getElemementById("f");</wbr>

</script>

<input<wbr>type="text"<wbr>id="f"&gt;</wbr></wbr>

则浏览器在执行时会报错,因此此时文本框还未加载。使用JQuery则不用管那么多,在页面头或者尾部尽管用<wbr><wbr>$(document).ready(function()<wbr>{},这也是JQuery的好处。<br></wbr></wbr></wbr>

其他都很简单,概括的说,对于输入框如textbox,select等则用val()获取/设置其值,对于div,p,span等则是html()获取/设置其值,
<wbr><wbr>$.get("GetTicks.aspx",<wbr>function(result)<wbr>{…</wbr></wbr></wbr></wbr>
}<wbr>表示<span style="FonT-FAMiLY: 宋体">数据处理会由</span><span style="FonT-FAMiLY: Verdana">GetTicks.aspx</span><span style="FonT-FAMiLY: 宋体">执行,<br><br></span> <span style="FonT-FAMiLY: Verdana">G</span></wbr>etTicks.aspx很简单,如下

<wbr><wbr></wbr></wbr>int<wbr>NoOfTicketsAvailable<wbr>=<wbr>5;</wbr></wbr></wbr>





<wbr>Response.Write(NoOfTicketsAvailable.ToString());</wbr>

<wbr><wbr>Response.End();</wbr></wbr>

注意:需要Response.End();

<wbr></wbr>

这样既OK了。


Sample2JQuery支持基于PostAJAX

Sample1差别不大

代码如下

<wbr></wbr>

<wbr></wbr>

基于ASP.NET的<wbr>JQuery实例

不过,需要注意的是这里传递了参数TicReq,对于URL,一般都是name=key的方式,例如
default.aspx?id=1,则可以使用Request.QueryString["id"]获取id的值为1,所以上面传递的相当于
GetTicksByPost.aspx?TicReq=ticketsReq (不过,这里的ticketsReq是个变量值,系统自动转换)
所以在
GetTicksByPost.aspx里就可用获取该参数

基于ASP.NET的<wbr>JQuery实例
运行结果同上



Sample
3JQuery支持基于ASP.NET<wbr>AJAX</wbr>AJAX

要在ASP.NET<wbr>AJAX</wbr>里使用JQuery,需要将EnablePageMethods设置为true。如下

<wbr></wbr>

基于ASP.NET的<wbr>JQuery实例<wbr><wbr><wbr><wbr><br><br> 接下来,就可以使用ASP.NET AJAJX技术了,如下<br><br><img height="477" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://hiphotos.baidu.com/xylz_yang/pic/item/950864519e92460e8535248b.jpg" width="717" border="0" name="image_operate_64251355975742385" alt="基于ASP.NET的&lt;wbr&gt;JQuery实例" title="基于ASP.NET的&lt;wbr&gt;JQuery实例"><br><wbr></wbr></wbr></wbr></wbr></wbr>然后使用即可,请注意URL的格式,页面后面跟的是方法

url:<wbr>"default.aspx/</wbr>GetAvailableTickets",表示使用default.aspx里定义的GetAvailableTickets方法。
后台代码如下,

<wbr></wbr>

基于ASP.NET的<wbr>JQuery实例
注意:需要添加WebMethod修饰符

<wbr></wbr>

<wbr></wbr>





Sample3
JQuery支持基于ASP.NET<wbr>AJAX</wbr>AJAX传递参数

<wbr></wbr>


下面是主要代码,注意参数是通过data传递的
基于ASP.NET的<wbr>JQuery实例

因为传递了no参数,所以在后台就可用直接使用

<wbr></wbr>

基于ASP.NET的<wbr>JQuery实例
注意:这里后天里的参数名需要和前台ajax里定义的参数一样

<wbr></wbr>


Sample
4JQuery支持基于ASP.NET<wbr>AJAX</wbr>AJAX传递参数到WebService

如果使用WebService,需要在类前加入

[System.Web.Script.Services.ScriptService]

看下面的代码(在default.js文件里的)

基于ASP.NET的<wbr>JQuery实例

下面是webservice文件,注意红色的标示。

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

基于ASP.NET的<wbr>JQuery实例


分享到:
评论

相关推荐

    基于Asp.net的个人网站实例

    基于Asp.net的个人网站实例,具有一定的学习和参考价值

    基于ASP.NET MVC项目实例

    基于ASP.NET MVC框架的学习项目,包含MVC的框架的设计思路,通俗易懂学习MVC框架,需要VS2010及以上版本打开,初学者可以快速理解MVC的构思以及开发。

    漂亮的.Net控件

    一个为RadioButton控件,(带源程序)可以定制漂亮的图形界面,提供...我才发现VS.net正式版也适用,.net&nbsp;&nbsp;beta2下编写的控件,vs.net&nbsp;&nbsp;正式版下重新编译一下即可,注意测试时多放几个此控件。

    asp.net实例asp.net实例asp.net实例

    asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例asp.net实例...

    Asp.Net MVC之jQuery与AJAX操作实例

    Asp.Net MVC之jQuery与AJAX操作实例

    ASP.NET MVC和jQuery系列一:入门篇

    ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇

    基于ASP.NET MVC4+JQuery easyui的企业管理系统开发案例源码

    基于ASP.NET MVC4+JQuery easyui的企业管理系统开发案例源码,采用MVC4.0+三层+JQuery EasyUI开发,很适合初学者学习!

    ASP.NET MVC使用JQuery系列

    ASP .Net Mvc、这是一个基础、但全面的项目源码,结合了.net Mvc与jquery作者在利用空余时间慢慢整理归纳出来。

    基于ASP.NET的app接口实例

    基于ASP.NET的app接口实例

    ASP.NET 实现的 jquery树

    ASP.NET 实现的 jquery树 对树节点的增删、拖动修改节点 等功能 通过jquery 异步提交到数据库,内含sql脚本

    asp.net mvc基于jquery分页

    asp.net mvc基于jquery的样式分页,可自定义皮肤,分页样式为每隔一个页码样式,可用于mvc自定义分页。以及ajax异步分页。

    基于ASP.net的驾校驾考系统源码

    基于ASP.net的驾校驾考系统源码基于ASP.net的驾校驾考系统源码基于ASP.net的驾校驾考系统源码基于ASP.net的驾校驾考系统源码基于ASP.net的驾校驾考系统源码基于ASP.net的驾校驾考系统源码基于ASP.net的驾校驾考系统...

    基于ASP.net的校园通系统源码

    基于ASP.net的校园通系统源码基于ASP.net的校园通系统源码基于ASP.net的校园通系统源码基于ASP.net的校园通系统源码基于ASP.net的校园通系统源码基于ASP.net的校园通系统源码基于ASP.net的校园通系统源码基于ASP.net...

    基于ASP.NET购物商城

    基于ASP.NET购物商城 基于ASP.NET购物商城 基于ASP.NET购物商城 基于ASP.NET购物商城 基于ASP.NET购物商城 基于ASP.NET购物商城 基于ASP.NET购物商城 基于ASP.NET购物商城 基于ASP.NET购物商城 基于ASP.NET购物商城

    ASP.NET网络数据库开发实例精解

    构架数据库系统入门 网站的架设和服务器配置 建立和配置数据源 连接和操作数据源 ...使用ASP.NET操作数据库 断开式数据库访问 使用数据网格处理数据 常用ASP.NET模块 ASP.NET网络数据库开发 . . . . 附带实例

    基于asp.net下使用jquery实现ajax的解决方法

    首先新建一个名闻Ajax的asp.net web空应用程序,项目目录如下图所示。 其中.ashx文件是一般处理程序,暂时不用知道它是干嘛用的,后面你就知道了。jquery-1.7.1.js可以在这里下载。 我们首先理清一下我们要实现的...

    基于ASP.net的婚纱影楼管理系统源码

    基于ASP.net的婚纱影楼管理系统源码基于ASP.net的婚纱影楼管理系统源码基于ASP.net的婚纱影楼管理系统源码基于ASP.net的婚纱影楼管理系统源码基于ASP.net的婚纱影楼管理系统源码基于ASP.net的婚纱影楼管理系统源码...

    asp.net ERP管理系统实例

    asp.net ERP管理系统实例 asp.net ERP管理系统实例 asp.net ERP管理系统实例

    基于ASP.NET三层架构的学生选课系统 源代码 毕业设计

    基于ASP.NET三层架构的学生选课系统 源代码 毕业设计 数据库需要打R2的补丁 不然附加不上 在X宝800找人定制的

Global site tag (gtag.js) - Google Analytics