UpdatePanel局部刷新无效问题的解决方案

在web页面中的服务器控件，有时我们需要做到数据联动，但又不希望页面全局刷新，那么一般的情况下使用的是UpdatePanel服务器控件，需要注意的是UpdatePanel控件需要结合ScriptManager控件的使用，下面是UpdatePanel使用时的前台html代码示例,其中设备大类、设备小类、规格型号是三级联动的，如果不使用UpdatePanel，则在选在改变事件时，整个页面会刷新

 <script src="../../JS/bootstrap-select/js/bootstrap-select.min.js"></script><script src="../../JS/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script><link href="../../JS/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><div class="form-inline pd10 clearfix" id="MainColumn"><asp:UpdatePanel runat="server" ID="QueryUpdatePanel" ><ContentTemplate><div class="form-group">设备大类：<asp:DropDownList runat="server" ID="ddlEQSort" CssClass="form-control" Style="width: 120px" AutoPostBack="true" OnSelectedIndexChanged="ddlEQSort_SelectedIndexChanged"></asp:DropDownList></div><div class="form-group">设备小类：<asp:DropDownList runat="server" ID="ddlEQClass" CssClass="form-control" Style="width: 120px" AutoPostBack="true" OnSelectedIndexChanged="ddlEQClass_SelectedIndexChanged"><Items><asp:ListItem Value="" Text="--请选择--"></asp:ListItem></Items></asp:DropDownList></div><div class="form-group">设备型号：<asp:DropDownList runat="server" ID="ddlEQModel" CssClass="form-control" Style="width: 120px"><Items><asp:ListItem Value="" Text="--请选择--"></asp:ListItem></Items></asp:DropDownList></div></ContentTemplate></asp:UpdatePanel><div class="form-group"><asp:Button runat="server" ID="_RequestButton" Text="查询" OnClick="_RequestButton_Click" CssClass="btn btn-primary" /></div></div>

由于设备大类数据较多，在下拉选择时，不好查找，所以设备大类中使用了bootstrap-select.js，使用下拉检索功能，但是在使用该插件后，设备大类选择第二次改变时，设备小类和设备规格型号无法联动，使用了以下方法解决的

1、设备大类控件的AutoPostBack属性值设置为false

2、添加页面加载事件

$(function(){selectSearch();
});var prm = Sys.WebForms.PageRequestManager.getInstance();prm.add_endRequest(selectSearch);//updatepanel 调用js事件//下拉检索function selectSearch() {//使用bootstrap-select$("#ddlEQSort").selectpicker({ width: 120, liveSearch: true, liveSearchPlaceholder: "数据检索" });//设备大类选择改变事件，doPostBack调用选择改变事件$("#ddlEQSort").on("change", function () {__doPostBack("ddlEQSort", "");});}

————————————————
版权声明：本文为CSDN博主「蓝晶之心」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liwan09/article/details/86137020

UpdatePanel局部刷新无效问题的解决方案相关推荐

asp.net UpdatePanel 不能局部刷新问题汇总
1.web.config 配置问题. 关于web.config的配置方面网上有很多资料参考,按照其方法做即可实现. 2.网站 Framework 版本变化造成不能局部刷新问题版本更新时,会在w ...
页面局部刷新( ScriptManager 和 UpdatePanel)(转)
ScriptManager 和UpdatePanel控件联合使用可以实现页面异步局部更新的效果.其中的UpdatePanel就是设置页面中异步局部更新区域,它必须依赖于 ScriptManager存在 ...
redux 局部刷新_如何使用Redux Observables和刷新令牌API获取新的访问令牌
redux 局部刷新 by Sachin Kumar 由Sachin Kumar 如何使用Redux Observables和刷新令牌API获取新的访问令牌 (How to get a new acc ...
android ListView 局部刷新
今天,简单讲讲android如何对ListView 进行局部刷新. 之前,自己做的ListView 发现刷新频率太高了,而且很多界面上看不到的数据改变时调用Adapter.notifyDataSetC ...
Ajax:如何运用updatepanle进行局部刷新
1.设定ScriptManager的EnablePartialRendering="true"(一般默认为true) 2.设定要进行局部刷新panel的UpdateMode=&qu ...
利用jquery load 局部刷新数据
<base><style>BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: ...
Alats2种局部刷新的比较
第一种是 .UpdaterPanel 首先ScriptManager中要设置EnablePartialRendering="true" 来开启局部更新功能, 同时在Updat ...
html的tab页面切换刷新,切换tab页，页面局部刷新，地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...
Vue3中如何进行页面局部刷新，组件刷新
前言今天在给vue3的项目中进行数据绑定的时候,发现我删除一条记录页面不会自动刷新,还是保留原来的状态但是数据已经传送给后端,后端也完成了响应的处理这个时候我想到了局部刷新,我想vue3是vue ...

UpdatePanel局部刷新无效问题的解决方案

UpdatePanel局部刷新无效问题的解决方案相关推荐

最新文章

热门文章