Show loading message on SelectedIndexChanged event of drop down list - asp.net

Question

I'm trying to show message "Loading..." when a user select an item in the dorp down list.
Mark up:
<asp:Label ID="lbl_LoadingMessage" runat="server" ></asp:Label>
<asp:DropDownList ID="ddl_Chapter" runat="server" AutoPostBack="True">
</asp:DropDownList>
Code behind:
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
The method I'm using above is not working. When I select a new item from the drop down list, it works as expected except the message "Loading..." is not showing at all. Any suggestion or code sample? Thank you.

Answer 1

You will have to do this on the client side using javascript.
At the moment, your dropdown menu is causing a postback. when the drop down menu is changed, the page post backs then the entire page life cycle is run through. When the event ddl_Chapter_SelectedIndexChanged is run, you set the text of the loading label, but you never reload the page (which would have your loading message) - instead you server.transfer to a new page.
If you use jQuery, you could set the labels text value as soon as the dropdown is changed
something like:
$('#the_full_renedered_ID_of_ddl_Chapter').change(function () {
$('#the_full_renedered_ID_of_lbl_LoadingMessage').html("Loading...")
});

Answer 2

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

Answer 3

The whole event will execute before the page re-rendering will take place.
If you are going to be doing extra processing between the LoadMessage() and the Server.Transfer try using AJAX UpdateProgress panel and adding your "loading..." message to that and add your dropDownList to a UpdatePanel.
This way depending on what code needs executing in your SelectedIndexChanged event it will show the "loading..." message before it via a partial page postback.
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>
This way the "loading..." message will be displayed for the duration of the processing of what you are trying to achieve in your SelectedIndexChanged event. If this is simply for display reasons javaScript would be your best bet.