WebForm使用JQuery实现DropDownList无刷新联动
原来用的微软封装的Ajax控件UpdatePannel和ScriptManager去实现无刷新联动,但一直出现意料之外的现象导致不正常联动。单独的做demo就没事,放到系统中就出问题,经过调试之后仍然不解。条条大路通罗马,还不信能被憋死了。众所周知,JQuery封装了Ajax,调用起来比原生的Ajax要好用的多,实现异步刷新当然也更一些了,虽然功能简单,直接看代码:
1. JS代码:
- <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"> <script type="text/javascript" language="javascript">
- $(function () {
- //利用dropdownlist的change事件
- $("#hbKeyWordsType").change(function () {
- //获取关键字类型
- var keyType = $("#hbKeyWordsType").val();
- $.ajax({
- url: "WxKeywords_WxMessageFunOperation.aspx/hbKeyWordsType_SelectedIndexChanged", //调用后台方法:页面/方法名
- type: "post",
- data: "{typeCode:" + keyType + "}", //给后台传递数据,参数名必须跟方法的参数名一致
- contentType: "application/json;charset=uft-8",
- success: function (dataJson) {
- $("#hbKeysName").empty(); //清除关键字下拉框中原来存在的数据
- var strNames = eval(dataJson.d); //必须加.d,否则无法解析。不太清除原因,通过调试发现存在,但代码中智能提示中却没有d
- for (var i = 0; i < strNames.length; i++) {
- $("#hbKeysName").append($("<option value='" + strNames[i].Code + "'>" + strNames[i].Keywords + "</option>")); //这个添加关键字
- }
- },
- Error: function () {
- alert("服务器错误,请联系管理员!");
- }
- });
- });
- });
- </script>
- </span></span>
2. 页面相关控件(用的是平台封装的控件,普通DropDownList也可以)
- <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><td class="fieldtitle">
- 关键字类型
- </td>
- <td class="fieldvalue">
- <SOA:HBDropDownList runat="server" ID="hbKeyWordsType" />
- </td>
- <td class="fieldtitle">
- 关键字名称
- </td>
- <td class="fieldvalue">
- <SOA:HBDropDownList runat="server" ID="hbKeysName" />
- </td></span></span>
3. 后台C#代码
- <span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"> [WebMethod] //用于前台Jquery的调用
- public static string hbKeyWordsType_SelectedIndexChanged(string typeCode)
- {
- //根据选取的关键字类型和公共号编码查找关键字实体集合
- string accountCode = WxMessageAdapter.Instance.GetCurrentWxAccountCode();
- int keyWordsType =int.Parse(typeCode);
- WxKeywordsCollection wxKeyColl = WxKeywords_WxMessageAdapter.Instance.LoadByAccAndKeyType(accountCode, keyWordsType);
- //使用封装好的JSON序列化的方法返回Json串
- string reutnJson=JSONSerializerExecute.Serialize(wxKeyColl);
- return reutnJson;
- }
- </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无刷新联动的更多相关文章
- asp.net DropDownList无刷新ajax二级联动实现详细过程
只适合新手制作DropDownList无刷新ajax二级联动效果: 数据库实现,添加两表如图:表1,pingpai,表2,type,具体数据库实现看自己的理解: //页面主要代码: <asp:S ...
- JQuery 实现页面无刷新
对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...
- JQuery中国省市区无刷新三级联动查询
之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...
- repeater绑定dropdownlist,jquery+ajax页面无刷新,修改dropdownlist默认值
html代码: <td> <asp:HiddenField ID="hiddenchuli" Value='< ...
- jQuery Ajax实现下拉框无刷新联动
HTML代码: @{ Layout = null; } @using DAL; @using System.Data; @{ AreaDal areaDal = new AreaDal(); stri ...
- jQuery Pjax – 页面无刷新加载,优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
随机推荐
- 不允许 ASSIGNMENT 语句中包含 FOR XML 子句。
DECLARE @guidList NVARCHAR(max) SELECT @guidList=( CAST(OrderGUID AS nvarchar(max)) +',') FROM Order ...
- try{futureGirl}catch(Exception){"Kill All Trouble"}——echarts样式
首先先给未来女,解释一下题目吧.这是段代码,我再try{}括号里写了你,意思我会保护你.后面的catch(Exception)是捕捉你的所有麻烦,交给我解决. 今天收工较早,拖着疲惫是身躯回到宿舍,简 ...
- 重大漏洞:Bitlocker成摆设,多款固态硬盘硬件加密均可被绕过
荷兰拉德堡德大学的两名研究人员日前发表论文,描述了固态硬盘流行加密软件Bitlocker中的关键漏洞.固态硬盘需要口令来加密和解密其上存储的内容,但该口令可以被绕过. 荷兰拉德堡德大学的两名研究人员日 ...
- 便捷编程-Xcode常用第三方插件 (随时更新)
Xcode工具插件 1.XAlign 让Xcode编辑器中的代码以多种方式瞬间对齐 地址:https://github.com/qfish/XAlign 2.VVDocumenter-Xcode 在X ...
- XML解析——DOM解析
XML:可扩展性标记语言,主要用来传输和存储数据,相对于HTML的各种标签规范,XML的标签可以让用户根据语义自己进行定义,适用于web传输. JSON和XML的区别: (1).XML定义 扩展标记语 ...
- UVA 12508 - Triangles in the Grid(计数问题)
12508 - Triangles in the Grid 题目链接 题意:给定一个n∗m格子的矩阵,然后给定A,B.问能找到几个面积在A到B之间的三角形. 思路:枚举每一个子矩阵,然后求[0,A]的 ...
- Python下opencv使用笔记(一)(图像简单读取、显示与储存)
写在之前 从去年開始关注python这个软件,途中间间断断看与学过一些关于python的东西.感觉python确实是一个简单优美.easy上手的脚本编程语言,众多的第三方库使得python异常的强大. ...
- 54.nodejs nodemailer不兼容
转自:https://blog.csdn.net/q36835109/article/details/53067917 注:由于本人使用最新版本的nodemailer不兼容,所以目前使用的是0.7.1 ...
- POJ 2374 线段树建图+Dijkstra
题意: 思路: 线段树+Dijkstra(要堆优化的) 线段树要支持打标记 一个栅栏 拆成两个点 :左和右 新加一个栅栏的时候 看看左端点有没有被覆盖过 如果有的话 就分别从覆盖的那条线段的左右向当前 ...
- CHARINDEX,REPLACE,LEFT+四大系统函数+模糊查询
select CHARINDEX('bob','my name is bob',1)--返回12 bob的第一个b在字符串中排第12(从1开始数) select CEILING(456.4)--45 ...