Jak uniknąć odświeżania strony po wybranej zindeksowanej liście rozwijanej?

Question

Używam rozwijanego panelu i ASP. Po wybraniu dowolnej wartości z rozwijanej listy ładuję niektóre dane z bazy danych, która zależy od wybranej wartości. Jednak po zmianie tego wyboru strona zostanie odświeżona. Jak mogę uniknąć odświeżania strony? Próbowałem również AsyncPostBackTrigger, ale nadal ten problem występuje.

<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

Dodaj ten, jeśli chcesz dropdownlist wywołać Ajax połączenia bez odświeżania strony i nie usuwają AutoPostBack="true"

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

Answer 2

sedno pytania, jak sądzę, jest:

"kiedy wybieram dowolną wartość z rozwijanego menu, ładuję niektóre dane z bazy danych, która zależy od tej wybranej wartości, napotykam problem, gdy strona wyboru zmian zostanie odświeżona."

Istnieje wiele sposobów, aby to osiągnąć, ale może to wymagać pewnej restrukturyzacji, aby uzyskać pożądany efekt. Stosunkowo prostym sposobem na to byłoby:

(1) Reorganizacja strony następująco:

<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) Dodaj skrypt w następujący sposób:

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

Jest to bardziej " starej szkoły ", ale powinno rozwiązać twój problem.

EDIT: Poniżej przedstawiono podejście "non-jQuery", z powyższej idei trochę bardziej dopracować:

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