单击按钮时如何防止下拉列表回发或在更新面板中更新

问题描述：

单击按钮时如何防止下拉列表回发或在更新面板中更新. 我这样做是因为我有Java脚本使ddl成为可搜索的dropdownlist.我在更新面板中有一些标签，文本框，gridviews和下拉列表.当我单击查看按钮下拉列表时，它会恢复为正常的下拉列表，而不是可搜索的下拉列表.

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>

答

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

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.

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

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>

单击按钮时如何防止下拉列表回发或在更新面板中更新

相关推荐