How to avoid page refresh after selectedindexchanged from the drop-down list?

Question

I use the update panel and ASP. When I select any value from the drop-down list, I load some data from the database, which depends on this selected value. However, whenever this selection changes, the page will be refreshed. How can I avoid updating this page? I also tried AsyncPostBackTrigger, but this problem occurs.

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

Answer 1

Add this if you want the dropdown to make an Ajax call without refreshing the page and not remove AutoPostBack="true"

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

Answer 2

The essence of your question, I believe, is as follows:

"when I select any value from the drop-down list, I load some data from the database, which depend on this selected value. Before the page with the changes is changed, I will have a problem."

There are many ways to achieve this, but some restructuring may be required for its desired effect. A relatively simple way to do this:

(1) Rearrange your page as follows:

 <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) Add a script as follows:

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

This is an older approach, but it should solve your problem.

EDIT: The following is a description of the non-jQuery approach, with the idea above being a little more specific:

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> 

Code-Behind:

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