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

最新推荐文章于 2021-02-11 13:55:53 发布

蓝晶之心

最新推荐文章于 2021-02-11 13:55:53 发布

阅读量1.3k

点赞数

分类专栏： .Net

本文链接：https://blog.csdn.net/liwan09/article/details/86137020

版权

.Net 专栏收录该内容

111 篇文章 15 订阅

订阅专栏

在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", "");
            });
        }

做了以上修改后，问题解决