如果在下拉列表的selectedindexchanged之后如何避免页面刷新？

I am using update panel and ASP drop down. When I select any value from a drop down list I load some data from a database that depends on this selected value. However, whenever this selection changes the page will be refreshed. How can I avoid this page refresh? I have also tried AsyncPostBackTrigger but still this problem occurs.

我正在使用更新面板和ASP下拉菜单。当我从下拉列表中选择任何值时,我会从依赖于此选定值的数据库中加载一些数据。但是,每当此选择更改时,页面都将刷新。如何避免此页面刷新?我也尝试过AsyncPostBackTrigger,但仍然会出现此问题。

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

2 个解决方案

#1

Add this, if you want the dropdownlist to trigger Ajax call without refreshing the page and do not remove AutoPostBack="true"

如果您希望下拉列表在不刷新页面的情况下触发Ajax调用并且不删除AutoPostBack =“true”,请添加此项

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

#2

The crux of your question, I believe, is:

我相信,你的问题的关键是:

"when i select any value from drop down i load some data from database that depends on this selected value, i am facing a problem whenever selection changes page will be refreshed."

“当我从下拉列表中选择任何值时,我会从依赖于此选定值的数据库中加载一些数据,每当选择更改页面都将被刷新时,我就会遇到问题。”

There are many ways to accomplish this, but it might require some restructuring to produce the desired effect. A relatively simple way to do this would be:

有很多方法可以实现这一目标,但可能需要进行一些重组才能产生预期的效果。一个相对简单的方法是:

(1) Reorganize your page as follows:

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

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

This is a more "old-school" approach, but it should solve your issue.

这是一种更“老派”的方法,但它应该可以解决您的问题。

EDIT: The following illustrates a "non-jQuery" approach, with the above idea a little more fleshed out:

编辑:以下说明了一个“非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>

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

#1