码迷,mamicode.com
首页 > Web开发 > 详细

WebForm使用JQuery实现DropDownList无刷新联动

时间:2016-05-15 12:13:15      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

 

    原来用的微软封装的Ajax控件UpdatePannel和ScriptManager去实现无刷新联动,但一直出现意料之外的现象导致不正常联动。单独的做demo就没事,放到系统中就出问题,经过调试之后仍然不解。条条大路通罗马,还不信能被憋死了。众所周知,JQuery封装了Ajax,调用起来比原生的Ajax要好用的多,实现异步刷新当然也更一些了,虽然功能简单,直接看代码:

   1.  JS代码:

 

[javascript] view plain copy
 
 技术分享技术分享
  1. <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;">   <script type="text/javascript" language="javascript">  
  2.             $(function () {  
  3.                 //利用dropdownlist的change事件  
  4.                 $("#hbKeyWordsType").change(function () {  
  5.                     //获取关键字类型  
  6.                     var keyType = $("#hbKeyWordsType").val();  
  7.                     $.ajax({  
  8.                         url: "WxKeywords_WxMessageFunOperation.aspx/hbKeyWordsType_SelectedIndexChanged",    //调用后台方法:页面/方法名  
  9.                         type: "post",                      
  10.                         data: "{typeCode:" + keyType + "}",     //给后台传递数据,参数名必须跟方法的参数名一致  
  11.                         contentType: "application/json;charset=uft-8",  
  12.                         success: function (dataJson) {  
  13.                             $("#hbKeysName").empty();           //清除关键字下拉框中原来存在的数据  
  14.                             var strNames = eval(dataJson.d);    //必须加.d,否则无法解析。不太清除原因,通过调试发现存在,但代码中智能提示中却没有d  
  15.                             for (var i = 0; i < strNames.length; i++) {  
  16.                                 $("#hbKeysName").append($("<option value=‘" + strNames[i].Code + "‘>" + strNames[i].Keywords + "</option>")); //这个添加关键字  
  17.                             }  
  18.                         },  
  19.                         Error: function () {  
  20.                             alert("服务器错误,请联系管理员!");  
  21.                         }  
  22.                     });  
  23.                 });  
  24.             });  
  25.              
  26.         </script>  
  27. </span></span>  
   

 

     2. 页面相关控件(用的是平台封装的控件,普通DropDownList也可以)    

 

[html] view plain copy
 
 技术分享技术分享
  1. <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><td class="fieldtitle">  
  2.     关键字类型  
  3. </td>  
  4. <td class="fieldvalue">  
  5.     <SOA:HBDropDownList runat="server" ID="hbKeyWordsType" />   
  6. </td>  
  7. <td class="fieldtitle">  
  8.     关键字名称  
  9. </td>  
  10. <td class="fieldvalue">  
  11.     <SOA:HBDropDownList runat="server" ID="hbKeysName" />  
  12. </td></span></span>  

 

    3. 后台C#代码 

 

[csharp] view plain copy
 
 技术分享技术分享
  1. <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;">   [WebMethod]  //用于前台Jquery的调用  
  2.             public static string hbKeyWordsType_SelectedIndexChanged(string typeCode)  
  3.             {  
  4.       
  5.                 //根据选取的关键字类型和公共号编码查找关键字实体集合  
  6.                 string accountCode = WxMessageAdapter.Instance.GetCurrentWxAccountCode();  
  7.                 int keyWordsType =int.Parse(typeCode);  
  8.       
  9.                 WxKeywordsCollection wxKeyColl = WxKeywords_WxMessageAdapter.Instance.LoadByAccAndKeyType(accountCode, keyWordsType);  
  10.           
  11.             //使用封装好的JSON序列化的方法返回Json串  
  12.                 string reutnJson=JSONSerializerExecute.Serialize(wxKeyColl);  
  13.                 return reutnJson;  
  14.       
  15.             }  
  16. </span></span>  

 

    注意事项:

    1. 前台页面:  ①url:"本页面名称/方法名称";  ②必须添加contentType:"application/json;charset=utf-8";  ③dataJson.d通过.d属性来取服务端返回的数据
2. 后台方法:  ①方法由[WebMethod]修饰;   ②方法必须是公共且静态的方法;  ③方法里的参数名称必须与脚本里data的参数名一样,顺序可以不一样

    之前dataJson没有添加.d,一直取不到后台返回来的数据,通过调试之后发现其实已经返回来了,只不过是data.d的形式,如下图:

    技术分享

    从上图可以看出,dataJson是一个对象,而Eval函数是只能解析字符串的,导致一直取不到值。做这个功能花费了很长时间,虽然最终做出来了,也没多少欣慰,工作中的任务可是不等人的。但,万事开头难,只要上手了,一切都会好起来。

WebForm使用JQuery实现DropDownList无刷新联动

标签:

原文地址:http://www.cnblogs.com/ysz12300/p/5494806.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!