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

本文关键字：滚动 下拉菜单 选择 | 更新日期: 2023-09-27 18:19:22

我已经成功完成了一个组织的web应用程序，它达到了预期的效果，但我注意到一个问题，并试图通过在谷歌上搜索并询问前辈来解决它，但这些都没有多大帮助。

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

代码:

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

请帮助。

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

这里的核心问题是，您将在每个下拉选择上发回服务器。这意味着网页重新加载，因为它是你的web服务器更新HTML，而不是更现代的方式来做的事情，是有javascript在客户端做。这里有一个粗糙的，不完美的，但是快速的解决方案:

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

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

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

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

为什么这是不完美的?因为它会将页面滚动到下拉框位于浏览器顶部边缘的位置。这意味着如果用户在页面的中间位置选择下拉菜单，一旦页面重新加载，下拉菜单就会出现在顶部。然而，至少，你的下拉菜单会在你的视线之内。

你最初的问题表明，你想要的页面看起来"专业"，虽然这得到的工作完成，它是不完美的，将所有的解决方案，当你处理经典的ASPX webforms风格的回发。具体来说，你的下拉菜单看起来像这样:

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(不确定这是否是适合你的文章，只需谷歌"。净MVC")

相关文章：