Come evitare l'aggiornamento della pagina dopo aver selezionatoindexchanged dell'elenco a discesa?

Question

Sto usando il pannello di aggiornamento e il menu a discesa ASP. Quando seleziono un valore da un elenco a discesa, carico alcuni dati da un database che dipende da questo valore selezionato. Tuttavia, ogni volta che questa selezione cambia, la pagina verrà aggiornata. Come posso evitare l'aggiornamento di questa pagina? Ho anche provato AsyncPostBackTrigger ma ancora questo problema si verifica.

<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

Aggiungere questo, se si desidera che la DropDownList per innescare Ajax chiamata senza aggiornare la pagina e non rimuovere AutoPostBack="true"

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

Answer 2

Il punto cruciale della tua domanda, io credo, è:

"quando seleziono qualsiasi valore dal menu a discesa, carico alcuni dati dal database che dipende da questo valore selezionato, sto affrontando un problema ogni volta che la pagina delle modifiche di selezione viene aggiornata."

Ci sono molti modi per farlo, ma potrebbe richiedere qualche ristrutturazione per produrre l'effetto desiderato. Un modo relativamente semplice per fare questo sarebbe:

(1) Riorganizzare la pagina come segue:

<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) Aggiungi script come segue:

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

Questo è un altro " approccio "vecchia scuola", ma dovrebbe risolvere il problema.

EDIT: Di seguito viene illustrato un approccio "non-jQuery", con l'idea di sopra di un po 'di più concretizzati:

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> 

codice sottostante:

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