10分钟学会基于ASP.NET的 JQuery实例 (转)

痛定思痛。 2022-10-02 04:46 84阅读 0赞

**本文介绍如何在ASP.NET(ASP.NET/AJAX)里使用基于JQuery的AJAX技术。（源代码下载见最后）**

在使用JQuery前，请到[www.jquery.com下载最新版本的js][www.jquery.com_js]代码，然后再代码里使用

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

**![点击查看原始大小图片][Jquery3-392.png]  
  
Sample1：JQuery支持基于Get的AJAX**

本例子说明如何在ASP.NET里使用基于JQuery的Get方法。页面布局代码如下：  
![Jquery3-429.png][]  
页面布局很简单，一个文本框用于输入票数，还有一个ID为Error1的div，用于显示AJAX操作结果。  
下面是AJAX的方法  
![点击查看原始大小图片][Jquery3-440.png]

在了解代码前，看一下运行结果：  
运行效果

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

**    <script language="javascript">**

**            $(document).ready(function() \{**

**            ...**

**            \}**

**      </script>**

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

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

var o=document.getElemementById("f");

o.focus();  
</script>

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

var o=document.getElemementById("f");

</script>

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

其他都很简单，概括的说，对于输入框如textbox，select等则用val()获取/设置其值，对于div，p，span等则是html()获取/设置其值，  
  $.get("GetTicks.aspx", function(result) \{…\} 表示数据处理会由GetTicks.aspx执行，  
  
GetTicks.aspx很简单，如下

int NoOfTicketsAvailable = 5;

Response.Write(NoOfTicketsAvailable.ToString());

Response.End();

**注意：需要Response.End();**

**这样既OK了。  
  
  
Sample2：JQuery支持基于Post的AJAX**

和Sample1差别不大

代码如下

![点击查看原始大小图片][Jquery3-1228.png]  
  
不过，需要注意的是这里传递了参数**TicReq**，对于URL，一般都是name=key的方式，例如  
default.aspx？id=1，则可以使用Request.QueryString\["id"\]获取id的值为1，所以上面传递的相当于  
GetTicksByPost.aspx?TicReq=ticketsReq (不过，这里的ticketsReq是个变量值，系统自动转换)  
所以在GetTicksByPost.aspx里就可用获取该参数

![Jquery3-1286.png][]  
运行结果同上  
  
  
**Sample****3****：JQuery支持基于****ASP.NET AJAX****的AJAX**

要在ASP.NET AJAX里使用JQuery，需要将EnablePageMethods设置为true。如下

![点击查看原始大小图片][Jquery3-1401.png]     
  
接下来，就可以使用ASP.NET AJAJX技术了，如下  
  
![点击查看原始大小图片][Jquery3-1420.png]  
然后使用即可，请注意URL的格式，页面后面跟的是方法

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

![Jquery3-1490.png][]  
注意：需要添加WebMethod修饰符。

[www.jquery.com_js]: http://www.jquery.com%e4%b8%8b%e8%bd%bd%e6%9c%80%e6%96%b0%e7%89%88%e6%9c%ac%e7%9a%84js/
[WWW.ASP.NET_ajax]: http://www.asp.net/ajax
[Jquery3-392.png]: /images/20220113/e47692bd45744dfd8fd283ceb608d1fb.png
[Jquery3-429.png]: /images/20220113/5e2dc613f80f491984630e521206979c.png
[Jquery3-440.png]: /images/20220113/ba19911542e4417e902d3a222d025f27.png
[Jquery3-448.png]: /images/20220113/9c6dc1328a4948bcb7e631a8e5d9b808.png
[Jquery3-1228.png]: /images/20220113/51a6941dcec04c4da124a44313a896f2.png
[Jquery3-1286.png]: /images/20220113/aa01462dc67d4d91a0dbd375406fbd36.png
[Jquery3-1401.png]: /images/20220113/e5e200fa45d94680a6df0812bbc99df1.png
[Jquery3-1420.png]: /images/20220113/8183a6bf651e4123acaeb7caa8e86491.png
[Jquery3-1490.png]: /images/20220113/558afb74c0b2427a800ecb06755e7bd4.png