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

时间:2014-08-26 09:57:37

标签: c# asp.net drop-down-menu webforms autopostback

我已经成功完成了一个组织的网络应用程序,它符合预期,但我注意到一个问题,并试图通过搜索谷歌和问老年人来解决这个问题,但这些都没有帮助。

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

代码:

<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>
请帮忙。

1 个答案:

答案 0 :(得分:0)

这里的核心问题是您在每个下拉列表选项上回发到服务器。这意味着网页重新加载,因为它是您的网络服务器更新HTML而不是更现代的方式来做javascript在客户端上执行操作。这是一个hacky,不完美但快速的解决方案:

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

的内容
<select id="ctl000$ddlDistricts"...

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

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

为什么这不完美?因为它会将您的页面滚动到下拉列表位于浏览器顶部边缘的位置。这意味着如果用户在页面中间选择下拉列表,则一旦页面重新加载,该页面将位于顶部。但是,至少,您的下拉列表将在视野范围内。

您的原始问题表明您希望该页面看起来“专业”,并且在完成工作时,这是不完美的,所有解决方案都是在您处理经典ASPX webforms样式的回发时。具体来说,你的下拉列表有这样的东西:

OnSelectedIndexChanged=MyFunction

这告诉ASPX表单本质上是“当你将这个下拉控件呈现为HTML时,在标签中添加一些东西,如onChange="postMyFormBackToServerCausingReloadAndPageScroll。你真正想要的是,它可能是onChange=GetNewDropdownFromServerAndReplaceOnPageWithoutReload {{1}}。 1}}。这涉及的知识多于我可以添加到已经很长的答案中的知识,但这里有一些有用的链接:

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 for“.NET MVC”)