Page scrolling on selecting value from drop down menu

Question

i have successfully completed my web application for an organization and it works up to expectations but i noticed one problem and tried to cure it via searching on Google and asking seniors but none of these helped much.

Problem: I have multiple drop downs lists on page, in which selecting value in one drop down triggers the loading of another drop down i.e. Country > cities situation, problem is that whenever i click any value it scrolls page to the top and i have to scroll back again then again and again which realy looks bad and unprofessional. Please help me.

Code:

<asp:UpdatePanel ID="updGridViewSMS" runat="server" UpdateMode="Conditional">
          <ContentTemplate>


        <br />
      <asp:Panel ID="pnlBoxesDropDowns" runat="server">

        <label style="width:400px">Relevant Region</label>
        <asp:DropDownList ID="ddlRegions" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlRegions_SelectedIndexChanged" AppendDataBoundItems="True"  AutoPostBack="true" >
          <asp:ListItem Value="-1" Selected="True">-Select-</asp:ListItem>
        </asp:DropDownList>
        <asp:RequiredFieldValidator ID="ReqFieldValidatorRegions" runat="server" 
         ControlToValidate="ddlRegions" ErrorMessage="Region is Required" InitialValue="-1"
         ForeColor="Red" ValidationGroup="Complaints">Region is Required</asp:RequiredFieldValidator>
        <label style="width:400px">Relevant District</label>
        <asp:DropDownList ID="ddlDistricts" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlDistricts_SelectedIndexChanged" AutoPostBack="true">
        </asp:DropDownList>
        <asp:RequiredFieldValidator ID="ReqFieldValidatorDistricts" runat="server" 
         ControlToValidate="ddlDistricts" ErrorMessage="Region is Required" InitialValue="-1"
         ForeColor="Red" ValidationGroup="Complaints">District is Required</asp:RequiredFieldValidator>
        <label>Relevant P.Station</label>
        <asp:DropDownList ID="ddlPoliceStations" runat="server" Width="147px" CssClass="DropDown_Width">
        </asp:DropDownList>
        <asp:RequiredFieldValidator ID="ReqFieldValidatorPoliceStations" runat="server" 
         ControlToValidate="ddlPoliceStations" ErrorMessage="Police Station is Required" InitialValue="-1"
         ForeColor="Red" ValidationGroup="Complaints">Police Station is Required</asp:RequiredFieldValidator>
        <label>Priority</label>
        <asp:DropDownList ID="ddlPriority" runat="server">
            <asp:ListItem Text="Top" Value="1"></asp:ListItem>
            <asp:ListItem Text="Normal" Value="2"></asp:ListItem>
        </asp:DropDownList>
      </asp:Panel>
        <br />
        <br />
            <asp:Timer runat="server" Interval="60000" ID="RefreshSmsComplaints" OnTick="RefreshSmsComplaints_Tick" />
          </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="RefreshSmsComplaints" EventName="Tick" />
            </Triggers>
         </asp:UpdatePanel>

help please.

Answer 1

The core issue here is that you are posting back to the server on every dropdown select. This means that the web page reloads, because it is your webserver that updates the HTML versus the more modern way to do things which is to have javascript do it on the client. Here is a hacky, imperfect, but quick solution:

In the browser, inspect your html DOM. Each of your dropdown ASPX tags should have been replaced with something along the lines of

<select id="ctl000$ddlDistricts"...

You can use url hashtags to scroll to that area by appending #ctl000$ddlDistricts to the url. Since the server knows which control was posted, it can get the control's client-side ID, and write it into the following javascript (preferably at the bottom of the page).

<script type="text/javascript">
     location.href='#' + <%=PostedControl.ClientID %>
</script>

Why is this imperfect? Because it will scroll your page to a point where the dropdown is at the top edge of the browser. This means that if a user selects the dropdown with it halfway down the page, once the page reloads, that will be at the top. At the very least, however, your dropdowns will then be within view.

Your original question indicated that you wanted the page to look "professional" and while this gets the job done, it is imperfect, as will all solutions be when you are dealing with classic ASPX webforms-style postbacks. Specifically, your dropdowns have something that looks like this:

OnSelectedIndexChanged=MyFunction

What this tells the ASPX form is, in essence, "when you render this dropdown control into HTML, add something into the tag like onChange="postMyFormBackToServerCausingReloadAndPageScroll. What you really want, perhaps, is to have it do onChange=GetNewDropdownFromServerAndReplaceOnPageWithoutReload. That involves more knowledge than I can add to an already long answer, but here are some helpful links:

http://www.codeproject.com/Articles/691298/Creating-AJAX-enabled-web-forms (a bit old but probably a good stepping stone)

http://www.codedigest.com/Articles/jQuery/318_Doing_AJAX_with_jQuery_in_ASPNet.aspx (a slightly more modern way to do it, but you do more yourself with this method as opposed to relying on .NET)

Lastly, the fully modern way to do things that involves completely rewriting your page

http://www.codeproject.com/Articles/575397/An-Absolute-Beginners-Tutorial-on-ASP-NET-MVC-for (not sure if this is the right article for you, just google for ".NET MVC")