如何避免下拉列表中selectedindexchanged後的頁面刷新？

我正在使用更新面板和ASP下拉菜單。當我從下拉列表中選擇任何值時，我將從數據庫加載一些依賴於此選定值的數據。但是，只要此選擇發生變化，頁面將被刷新。我怎樣才能避免這個頁面刷新？我也嘗試了AsyncPostBackTrigger，但仍然會出現此問題。如何避免下拉列表中selectedindexchanged後的頁面刷新？

<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>

來源

2012-07-03 AqEeL BaLoCh

，如果你想在下拉列表觸發Ajax調用而無需刷新頁面添加這一點，也不要取出AutoPostBack="true"

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

來源

2012-07-03 12:33:11

我已經檢查了這一點，並與

你是否在內容模板下面添加觸發器？其次，不要在內容模板下面刪除AutoPostBack =「true」 –

yes，並且所有其他控件都在內容模板中。 –

你的問題的癥結所在，我相信的是：

「當我從下拉列表中選擇任何值時，我會從數據庫加載一些依賴於此選定值的數據，每當選擇更改頁面將被刷新時，我都會遇到問題。」

有很多方法可以做到這一點，但它可能需要一些重組才能產生預期的效果。一個相對簡單的方式做，這將是：

（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... :("; 
    } 
}

來源

2012-07-03 12:58:00

有沒有其他解決方案沒有jQuery？ –

我已經修改了我的答案，以包含不依賴於jQuery選擇器的更具體的代碼 –

如何避免下拉列表中selectedindexchanged後的頁面刷新？

回答

相關問題