Làm cách nào để tránh làm mới trang sau khi đã chọntìm danh sách thả xuống?

Question

Tôi đang sử dụng bảng cập nhật và thả xuống ASP. Khi tôi chọn bất kỳ giá trị nào từ danh sách thả xuống, tôi tải một số dữ liệu từ cơ sở dữ liệu phụ thuộc vào giá trị đã chọn này. Tuy nhiên, bất cứ khi nào lựa chọn này thay đổi trang sẽ được làm mới. Làm cách nào để tránh làm mới trang này? Tôi cũng đã thử AsyncPostBackTrigger nhưng vẫn còn vấn đề này xảy ra.

<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

Thêm này, nếu bạn muốn DropDownList để kích hoạt cuộc gọi Ajax mà không làm mới trang và không loại bỏ AutoPostBack="true"

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

Answer 2

Điểm mấu chốt của câu hỏi của bạn, tôi tin rằng, là:

"khi tôi chọn bất kỳ giá trị nào từ trình đơn thả xuống, tôi tải một số dữ liệu từ cơ sở dữ liệu phụ thuộc vào giá trị đã chọn này, tôi đang gặp phải sự cố khi trang thay đổi lựa chọn sẽ được làm mới".

Có nhiều cách để thực hiện việc này, nhưng có thể yêu cầu một số cơ cấu lại để tạo hiệu ứng mong muốn. Một cách tương đối đơn giản để làm điều này sẽ là:

(1) Tổ chức lại trang của bạn như sau:

<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) Thêm kịch bản như sau:

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

Đây là một nhiều hơn " cách tiếp cận cũ của trường học cũ, nhưng nó sẽ giải quyết vấn đề của bạn.

EDIT: Sau đây minh họa một "phi jQuery" cách tiếp cận, với ý tưởng trên nhiều hơn một chút fleshed ra:

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