基于ASP.NET的 JQuery实例

http://hi.baidu.com/xylz_yang/blog/item/f164a94ffb44cb12b3de050d<wbr>.html</wbr>

基于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> Sample1：JQuery支持基于Get的AJAX <wbr></wbr> 本例子说明如何在ASP.NET里使用基于JQuery的Get方法。页面布局代码如下： 页面布局很简单，一个文本框用于输入票数，还有一个ID为Error1的div，用于显示AJAX操作结果。 下面是AJAX的方法 <wbr></wbr> <wbr></wbr> 在了解代码前，看一下运行结果： 运行效果 <wbr></wbr> <wbr></wbr> 在票数后面输入数字，如果大于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了。 Sample2：JQuery支持基于Post的AJAX 和Sample1差别不大 代码如下 <wbr></wbr> <wbr></wbr> 不过，需要注意的是这里传递了参数TicReq，对于URL，一般都是name=key的方式，例如 default.aspx？id=1，则可以使用Request.QueryString["id"]获取id的值为1，所以上面传递的相当于 GetTicksByPost.aspx?TicReq=ticketsReq (不过，这里的ticketsReq是个变量值，系统自动转换) 所以在GetTicksByPost.aspx里就可用获取该参数 运行结果同上 Sample3：JQuery支持基于ASP.NET<wbr>AJAX</wbr>的AJAX 要在ASP.NET<wbr>AJAX</wbr>里使用JQuery，需要将EnablePageMethods设置为true。如下 <wbr></wbr> <wbr><wbr><wbr><wbr><br><br> 接下来，就可以使用ASP.NET AJAJX技术了，如下<br><br><img height="477" src="https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.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> 注意：需要添加WebMethod修饰符。 <wbr></wbr> <wbr></wbr> Sample3：JQuery支持基于ASP.NET<wbr>AJAX</wbr>的AJAX传递参数 <wbr></wbr> 下面是主要代码，注意参数是通过data传递的 因为传递了no参数，所以在后台就可用直接使用 <wbr></wbr> 注意：这里后天里的参数名需要和前台ajax里定义的参数一样 <wbr></wbr> Sample4：JQuery支持基于ASP.NET<wbr>AJAX</wbr>的AJAX传递参数到WebService 如果使用WebService，需要在类前加入 [System.Web.Script.Services.ScriptService] 看下面的代码（在default.js文件里的） 下面是webservice文件，注意红色的标示。 <wbr></wbr> <wbr></wbr> <wbr></wbr>