单击按钮时如何防止下拉列表回发或在更新面板内更新 [英] How to prevent a dropdownlist from postback or updating inside an updatepanel when button is clicked

问题描述

如何在单击按钮时防止下拉列表在更新面板内回发或更新.我这样做是因为我有 java 脚本来使 ddl 成为可搜索的下拉列表.我在更新面板中有一些标签、文本框、网格视图和下拉列表.当我点击查看按钮时，下拉列表会变回普通下拉列表而不是可搜索的下拉列表.

<asp:DropDownList ID="ddlSector" runat="server" Width="150px"></asp:DropDownList><asp:DropDownList ID="ddlCity" runat="server" Width="150px"></asp:DropDownList><asp:TextBox ID="txtStdID" runat="server" Width="92px" MaxLength="5"></asp:TextBox><asp:Button ID="btnView" runat="server" Text="View" onclick="btnView_Click" AccessKey="V"/><表格><tr><td><b>资格</b></td><td><b>豁免类型</b></td></tr><tr><td><asp:DropDownList ID="ddlQualification" class="chzn-select" runat="server" Width="225px" onselectedindexchanged="ddlQualification_SelectedIndexChanged"AutoPostBack="false"></asp:DropDownList></td><td><asp:DropDownList ID="ddlExemType" runat="server" Width="225px"></asp:DropDownList></td></tr>
<script src="../Searchable DDL/jquery.min.js"type="text/javascript"></script><script src="../Searchable DDL/chosen.jquery.js"type="text/javascript"></script><script type="text/javascript">$(".chzn-select").chosen();$(".chzn-select-deselect").chosen({ allow_single_deselect: true });</script>

解决方案

即使没有完整的 PostBack，UpdatePanel 中的所有内容仍然会刷新，因此 DOM 丢失了使用 jquery 修改的元素.

您还需要在异步回发后调用创建可搜索下拉列表的函数.

How to prevent a dropdownlist from postback or updating inside an updatepanel when button is clicked. I am doing this because i have java script to make ddl a searchable dropdownlist. i have a few labels, textboxes, gridviews and dropdownlist inside an update panel. when i click view button dropdownlist turns back into normal dropdown insteads of searchable dropdown.

<div>
    <asp:DropDownList ID="ddlSector" runat="server" Width="150px"></asp:DropDownList>
    <asp:DropDownList ID="ddlCity" runat="server" Width="150px"></asp:DropDownList>
    <asp:TextBox ID="txtStdID" runat="server" Width="92px" MaxLength="5"></asp:TextBox>
    <asp:Button ID="btnView" runat="server" Text="View" onclick="btnView_Click" AccessKey="V"/>
<table>
    <tr><td><b>Qualification</b></td><td><b>Exemption Type</b></td></tr>
    <tr>              
    <td><asp:DropDownList ID="ddlQualification" class="chzn-select" runat="server" Width="225px" onselectedindexchanged="ddlQualification_SelectedIndexChanged" 
    AutoPostBack="false"></asp:DropDownList></td>
    <td>
    <asp:DropDownList ID="ddlExemType" runat="server" Width="225px">
    </asp:DropDownList></td>        
    </tr>
</table>
</div>
<script src="../Searchable DDL/jquery.min.js"type="text/javascript"></script>  
<script src="../Searchable DDL/chosen.jquery.js"type="text/javascript"></script>  
<script type="text/javascript">
     $(".chzn-select").chosen(); 
 $(".chzn-select-deselect").chosen({ allow_single_deselect: true });</script>

解决方案

Even though there is no full PostBack, everything inside the UpdatePanel still gets refreshed and so the DOM loses the elements that were modified with jquery.

You need to call the function that created the searchable dropdownlists after a async PostBack also.

<script type="text/javascript">
    $(document).ready(function () {
        createSearchDropDown();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        createSearchDropDown();
    });

    function createSearchDropDown() {
        $(".chzn-select").chosen(); 
        $(".chzn-select-deselect").chosen({ allow_single_deselect: true });
    }
</script>

这篇关于单击按钮时如何防止下拉列表回发或在更新面板内更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！