如何避免下拉列表的selectedindexchanged后页面刷新？答案

【问题标题】：How to avoid page refresh after selectedindexchanged of dropdown list?如何避免下拉列表的selectedindexchanged后页面刷新？
【发布时间】：2012-07-03 12:29:49
【问题描述】：

我正在使用更新面板和 ASP 下拉菜单。当我从下拉列表中选择任何值时，我会从依赖于该选定值的数据库中加载一些数据。但是，只要此选择更改，页面就会刷新。如何避免此页面刷新？我也试过 AsyncPostBackTrigger 但还是会出现这个问题。

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="false">
   </asp:ToolkitScriptManager>
        <asp:UpdatePanel ID="OuterUpdatePanel" runat="server">
            <ContentTemplate>
                <asp:DropDownList ID="ddList" CssClass="dropdown" Style="width: 200px !important;"
                 runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddList_SelectedIndexChanged">
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>

【问题讨论】：

标签： asp.net vb.net visual-studio-2010 c#-4.0 ajaxcontroltoolkit

【解决方案1】：

添加这个，如果你希望下拉列表触发Ajax调用而不刷新页面并且不删除AutoPostBack="true"

<Triggers> 
<asp:AsyncPostBackTrigger ControlID="ddList" EventName="SelectedIndexChanged" /> 
</Triggers>

【讨论】：

我已经检查了这个以及
您是否在内容模板下方添加触发器？其次不要删除 AutoPostBack="true"
是在内容模板下方，所有其他控件都在内容模板中。
检查以确保更新面板中没有任何带有 ClientIDMode=Static 的控件，让它们继承。
我在内容模板中有表格、标签、按钮和其他一些下拉列表，但没有人有 ClientIDMode=Static

【解决方案2】：

我相信你问题的症结在于：

“当我从下拉列表中选择任何值时，我会从数据库中加载一些取决于此选定值的数据，每当刷新选择更改页面时，我都会遇到问题。”

有很多方法可以实现这一点，但可能需要进行一些重组才能产生预期的效果。一个相对简单的方法是：

(1) 按如下方式重新组织您的页面：

<asp:DropDownList ID="ddList" CssClass="dropdown" Style="width: 200px !important;" runat="server" AutoPostBack="false">
</asp:DropDownList>

<asp:UpdatePanel ID="OuterUpdatePanel" runat="server">
        <ContentTemplate>
        <!-- Content goes here -->
        </ContentTemplate>
</asp:UpdatePanel>

(2) 添加脚本如下：

<script type="text/javascript">
function handleDDLChange() {
  __doPostBack($('div[id$="OuterUpdatePanel"]').attr('id'), 'ddlList_Changed_Or_Anything_Else_You_Might_Want_To_Key_Off_Of');
}

$('input[id$="ddlList"]').change( handleDDLChange );
</script>

这是一种更“老派”的方法，但它应该可以解决您的问题。

编辑：以下说明了一种“非 jQuery”方法，上面的想法更加充实：

ASCX：

<asp:ScriptManager runat="server" />

<asp:DropDownList ID="ddlList" runat="server" onchange="handleDDLChange()">
    <asp:ListItem Text="text1" />
    <asp:ListItem Text="text2" />
</asp:DropDownList>

<script type="text/javascript">
    function handleDDLChange() {
        __doPostBack("<%= ddlList.ClientID %>", "ddlList_Changed_Or_Anything_Else_You_Might_Want_To_Key_Off_Of");
    }
</script>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
       <asp:Literal ID="litTest" runat="server" />
   </ContentTemplate>
</asp:UpdatePanel>

代码隐藏：

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        litTest.Text = "No postback";
    }
    else if (Request["__EVENTARGUMENT"] == "ddlList_Changed_Or_Anything_Else_You_Might_Want_To_Key_Off_Of")
    {
        litTest.Text = string.Format("Dropdown changed: {0}", ddlList.Text);
    }
    else
    {
        litTest.Text = "Postback for some other reason... :(";
    }
}

【讨论】：

没有jQuery还有其他解决方案吗？
我已经修改了我的答案以包含不依赖 jQuery 选择器的更具体的代码