AJAX触发aspnet控件的C#事件(基于Jquery)

前端之家收集整理的这篇文章主要介绍了AJAX触发aspnet控件的C#事件(基于Jquery)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

熟悉asp.net事件机制的人都知道,在aspnet生成页面里有两个隐藏域。

  1. <inputtype="hidden"name="__EVENTTARGET"id="__EVENTTARGET"value=""/>
  2. <inputtype="hidden"name="__EVENTARGUMENT"id="__EVENTARGUMENT"value=""/>

第一个“__EVENTTARGET”保存着要触发事件的那个控件的ID,第二个在某些控件触发事件时用来保存事件的名称的某个参数。当页面上的某个控件如:

  1. <asp:ButtonID="btn_ItemAdd"runat="server"CssClass="button"Text="增加"/>

被点击时,脚本会自动将“btn_ItemAdd”赋值给__EVENTTATGT,然后再用Submit()提交整个页面。在这里很自然我们就会想到替换aspnet页面自带的脚本,换成异步AJAX的方式提交页面。下面是本人整理后的替换代码,其中使用Jquery和Jquery.form插件

  1. /*
  2. eventTarget:就是要触发事件的控件ID
  3. eventArgument:一些参数信息,例如gridview的SelectIndexChanged事件就需要把该参数设为Select$1,1为selectrowindex
  4. callBack:Ajax请求完成后要调用函数(可选)
  5. callBackArg:上面函数调用时传入的参数(可选)
  6. */
  7. functionajaxEvent(eventTarget,eventArgument,callBack,callBackArg){
  8. try{
  9. vartheForm=document.forms[0];
  10. //如果页面没有那两个重要的HiddenField则添加
  11. if(!document.getElementById("__EVENTTARGET")){
  12. varMy__EVENTTARGET="<inputtype='hidden'value='"+eventTarget+"'id='__EVENTTARGET'name='__EVENTTARGET'/>";
  13. $(My__EVENTTARGET).appendTo("form");
  14. }
  15. if(!document.getElementById("__EVENTARGUMENT")){
  16. varMy__EVENTARGUMENT="<inputtype='hidden'value='"+eventArgument+"'id='__EVENTARGUMENT'name='__EVENTARGUMENT'/>";
  17. $(My__EVENTARGUMENT).appendTo("form");
  18. }
  19. $("#__EVENTTARGET").val(eventTarget);
  20. $("#__EVENTARGUMENT").val(eventArgument);
  21. }
  22. catch(e){
  23. alert(e);
  24. }
  25. try{
  26. $(theForm).ajaxSubmit(
  27. function(dataFormServer){
  28. varreturnText=dataFormServer.split("::");
  29. if(returnText[0]=="False"){
  30. alert(returnText[1]);
  31. return;
  32. }//如果要返回错误信息,我们约定返回的信息以False::开头,这样可以在这里统一处理出错
  33. if(callBack){
  34. if(callBackArg){//如果传入了参数则用用户传入的参数调用回调函数
  35. callBack(callBackArg);
  36. }
  37. else{//默认将服务器返回的信息传递给回调函数
  38. callBack(dataFormServer);
  39. }
  40. }
  41. }
  42. );
  43. }
  44. catch(e){
  45. }
  46. returnfalse;//防止页面以submit方式提交
  47. }

有了上面的函数后,我们设置按钮的onclientclick属性为ajaxEvent("btn_ItemAdd","");代码如下

  1. <asp:ButtonID="btn_ItemAdd"runat="server"CssClass="button" OnClick="btn_ItemSelect_Click"Text="增加"OnClientClick="returnajaxEvent('btn_ItemAdd','')/>

这样即可触发控件onclick所定义的后台事件了。

采用Ajax触发控件后台事件的方式,可以大大降低开发AJAX程序的成本,缩短开发时间。读者可以自行将上述操作封装成aspnet控件。你可以将你的自定义控件继承自Button,linkbuttn等控件,然后设置他们的Attribute[onclick] = "ajaxEvent()"即可。

需要注意的是上述代码要成功运行需要在页面添加几个JS引用

  1. <scriptlanguage="javascript"type="text/javascript"src="../JS/jquery.js"></script>
  2. <scriptlanguage="javascript"type="text/javascript"src="../JS/iutil.js"></script>
  3. <scriptlanguage="javascript"type="text/javascript"src="../JS/idrag.js"></script>
  4. <scriptlanguage="javascript"type="text/javascript"src="../JS/jquery.form.js"></script>

这些都是Jquery东西,在网上很容易下到。

原文链接:https://www.f2er.com/ajax/166602.html

猜你在找的Ajax相关文章