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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值