从下拉菜单中选择值时滚动页面

Question

我已经成功地为一个组织完成了我的网络应用程序，它的运行达到了预期，但我注意到了一个问题，并试图通过在谷歌上搜索并询问老年人来解决它，但这些都没有多大帮助。

问题： 我在页面上有多个下拉列表，其中在一个下拉列表中选择值会触发另一个下拉列表的加载，即国家>城市情况，问题是每当我单击任何值时，它都会将页面滚动到顶部，我必须向后滚动一次又一次，这看起来真的很糟糕而且不专业。请帮帮我。

代码：

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

请帮忙。

Answer 1

这里的核心问题是您在每次下拉选择时都回发到服务器。这意味着网页会重新加载，因为更新 HTML 的是您的网络服务器，而更现代的做事方式是让 javascript 在客户端上执行。这是一个 hacky、不完美但快速的解决方案：

在浏览器中，检查您的 html DOM。您的每个下拉 ASPX 标记都应该被替换为

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

您可以通过将#ctl000$ddlDistricts 附加到网址来使用网址标签滚动到该区域。由于服务器知道是哪个控件发布的，它可以获取该控件的客户端ID，并将其写入以下javascript（最好在页面底部）。

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

为什么这是不完美的？因为它会将您的页面滚动到下拉菜单位于浏览器顶部边缘的位置。这意味着如果用户在页面中间选择下拉菜单，一旦页面重新加载，它将位于顶部。不过，至少您的下拉菜单会在视图中。

您最初的问题表明您希望页面看起来“专业”，虽然这可以完成工作，但它并不完美，当您处理经典的 ASPX 网络表单样式回发时，所有解决方案都是如此。具体来说，您的下拉菜单看起来像这样：

OnSelectedIndexChanged=MyFunction

这告诉 ASPX 表单本质上是，“当您将此下拉控件呈现为 HTML 时，请在标签中添加一些内容，例如 onChange="postMyFormBackToServerCausingReloadAndPageScroll。您真正想要的也许是让它执行 onChange=GetNewDropdownFromServerAndReplaceOnPageWithoutReload。这涉及到比我可以添加到已经很长的答案更多的知识，但这里有一些有用的链接：

http://www.codeproject.com/Articles/691298/Creating-AJAX-enabled-web-forms（有点旧但可能是个不错的垫脚石）

http://www.codedigest.com/Articles/jQuery/318_Doing_AJAX_with_jQuery_in_ASPNet.aspx（一种更现代的方法，但您可以使用这种方法自己做更多的事情，而不是依赖 .NET）

最后，完全现代的方式来做涉及完全重写您的页面的事情

http://www.codeproject.com/Articles/575397/An-Absolute-Beginners-Tutorial-on-ASP-NET-MVC-for（不确定这篇文章是否适合您，只需在 Google 上搜索“.NET MVC”）