Question

当用户在dorp下拉列表中选择一个项目时，我正在尝试显示“正在加载...”消息。

标记：

<asp:Label ID="lbl_LoadingMessage" runat="server" ></asp:Label>

<asp:DropDownList ID="ddl_Chapter" runat="server" AutoPostBack="True">
            </asp:DropDownList>

代码背后：

Protected Sub LoadMessage()
        lblLoading.Text = "Loading..."
End Sub


Protected Sub ddl_Chapter_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddl_Chapter.SelectedIndexChanged

        LoadMessage()

        Dim redirectURL As String = "~/chapter.aspx?bid=" & BookId.ToString
        Server.Transfer(redirectURL)

End Sub

我上面使用的方法不起作用。当我从下拉列表中选择一个新项目时，它按预期工作，但消息“正在加载...”根本没有显示。有任何建议或代码示例吗？谢谢。

Answer 1

您必须使用javascript在客户端执行此操作。

目前，您的下拉菜单会导致回发。当下拉菜单被更改时，页面发布后退，然后整个页面生命周期运行。当运行事件ddl_Chapter_SelectedIndexChanged时，您设置加载标签的文本，但是您从不重新加载页面（这将有您的加载消息） - 而是您server.transfer到新页面。

如果您使用jQuery，您可以在下拉列表更改后立即设置标签文本值

类似的东西：

$('#the_full_renedered_ID_of_ddl_Chapter').change(function () {
      $('#the_full_renedered_ID_of_lbl_LoadingMessage').html("Loading...")
});

Answer 2

整个事件将在页面重新呈现之前执行。

如果您要在LoadMessage()和Server.Transfer之间进行额外处理，请尝试使用AJAX UpdateProgress面板并向其添加“loading ...”消息并将dropDownList添加到UpdatePanel

这种方式取决于SelectedIndexChanged事件中需要执行的代码，它会通过部分页面回发显示“loading ...”消息。

e.g

    <asp:ScriptManager id="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <asp:UpdateProgress id="UpdateProgress1" runat="server" associatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <p>Loading....</p>
        </ProgressTemplate>
    </asp:UpdateProgress>

    <asp:UpdatePanel id="UpdatePanel1" runat="server" childrenAsTriggers="true">
        <ContentTemplate>
            <asp:DropDownList id="DropDownList1" runat="server" autoPostBack="true">
                <asp:ListItem selected="True" value="1">Book 1</asp:ListItem>
                <asp:ListItem value="2">Book 2</asp:ListItem>
                <asp:ListItem value="3">Book 3</asp:ListItem>
                <asp:ListItem value="4">Book 4</asp:ListItem>
                <asp:ListItem value="5">Book 5</asp:ListItem>
            </asp:DropDownList>

            <asp:Label id="lblSelected" runat="server"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>

这样，“loading ...”消息将在处理您SelectedIndexChanged事件中尝试实现的内容时显示。如果这只是出于显示原因，那么javaScript将是您最好的选择。

Answer 3

或者使用javascript：

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" /></script>
<script type="text/javascript">
$(document).ready( function() {
    $("#<%= ddl_Chapter.ClientID %>").change(function()
    {
        window.alert("Loading");
    });     
});
</script>

在下拉列表的SelectedIndexChanged事件上显示加载消息

3 个答案: