asp.net 下拉列表回发到锚点答案

【问题标题】：asp.net dropdown list postback to anchorasp.net 下拉列表回发到锚点
【发布时间】：2011-02-24 06:46:04
【问题描述】：

当 myDropDownList_SelectedIndexChanged() 事件触发时，如何转到页面上的锚标记？我正在使用常规的 ASP.NET 表单。

更新：以下内容适用于 ASP.NET 按钮。当我从下拉列表中选择一个选项时，我想实现相同的功能（转到#someAnchor）。

<asp:Button ID="btnSubmit" runat="server" Text="Do IT"  Width="186px" PostBackUrl="#myAnchor" CausesValidation="false" />

更新：我将尝试进一步解释我最初没有详细介绍的细节。这是一个长页面，在页面中间有一个下拉列表。下拉列表下方是一个标签，该标签将根据从下拉列表中选择的项目进行更改。标签的更新将在回发期间发生。此时页面需要保持关注下拉菜单。我尝试使用 AJAX 来实现这一点，但其他实现细节阻止了它的工作。在回发之后转到锚标记的能力将是一个简单的解决方案。这是我想要完成的简化版本。

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub myDropDown_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        myLabel.Text = myDropDown.SelectedValue
        'When this finishes, go to #myAnchor
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Imagine many lines of text here.
        <a name="myAnchor"></a>
        <asp:DropDownList ID="myDropDown" runat="server" OnSelectedIndexChanged="myDropDown_SelectedIndexChanged" asdf="asdf" PostBackUrl="#myAnchor"></asp:DropDownList>
        <asp:Label ID="myLabel" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

【问题讨论】：

“转到锚标记”是什么意思？跟随锚的href？
我编辑了问题以阐明我的意图。
我认为您确实需要更具体地说明您的问题。在这一点上，你的问题没有多大意义。也许您可以发布更多代码。

标签： asp.net postback

【解决方案1】：

这可以解决问题

    <asp:DropDownList ID="DropDownList1" runat="server" 
       onchange="document.location= this.value">
       <asp:ListItem Text="Anchor" Value="#anchor"></asp:ListItem>
       <asp:ListItem Text="Anchor2" Value="#anchor2"></asp:ListItem>
    </asp:DropDownList>

你提到myDropDownList_SelectedIndexChanged()（服务器代码），但你必须在客户端这样做，除非你有充分的理由去服务器

【讨论】：

很遗憾，我确实需要回到服务器。

【解决方案2】：

将此添加到您的页面加载中，您就可以开始了。

Page.MaintainScrollPositionOnPostBack = true;

【讨论】：

【解决方案3】：

我会使用 JavaScript——要么在你的代码隐藏中注册脚本，要么拥有一个仅在 SelectedIndexChanged 事件之后可见的 asp:Literal。修改 location.href 以附加您的锚点。

【讨论】：

【解决方案4】：

一种方法是使用 ASP.NET 中的 forms.Controls bla bla bla 属性。但是我建议您使用 asp.net 超链接控件或链接按钮，这样您就可以直接使用其 ID 访问它。

谢谢， MNK。

【讨论】：

【解决方案5】：

这个要求有简单的javascript解决方案。但问题是设计有缺陷。一旦你移动到屏幕中的一个新区域，你就不能在不向后滚动的情况下访问导航选择列表。无论如何，类似以下的作品

   <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function Goto(x) {
        window.location =  "#"+x.value;
        }

    </script>
</head>
<body>
    <select id="Select1"  name="D1"  onchange="Goto(this);">
        <option value="Loc1" >go to 1 </option>
        <option value="Loc2">go to 2 </option>
        <option value="Loc3">go to 3 </option>
        <option value="Loc4">go to 4 </option>
    </select><form id="form1" runat="server">
    </form>


 <strong>  <a href="#" id="Loc1" >Location 1</a></strong>

 blah
  <strong><a href="#" id="Loc2">Location 2</a></strong>

    <strong><a href="#" id="Loc3">Location 3</a></strong>

    <strong><a href="#" id="Loc4">Location 4</a></strong>
</body>
</html>

【讨论】：

【解决方案6】：

这是我为实现我想要的结果而实施的。

Protected Sub myDropDown_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles myDropDown.SelectedIndexChanged

    Response.Redirect("Default.aspx?myDropDown=" & myDropDown.SelectedItem.Text.ToString.Trim & "#myAnchor")

End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim myDropDownValue As String = Request.QueryString("myDropDown")
        If myDropDownValue <> "" Then

            myDropDown.Items.FindByText(myDropDownValue).Selected = True
                Label1.Text = GetTextBasedOnDropDownSelection(myDropDownValue)

        End If
    End If
End Sub

【讨论】：

【解决方案7】：

如果您的下拉列表包含三个项目，例如：

第1页
第2页
第3页

为下拉列表赋予AutoPostBack="true" 的属性，然后在下拉列表OnSelectedIndexChanged 方法中写入以下内容：

if (DDl.SelectedIndex == 1) {
    Response.Redirect("~/page1");
}
else if (DDl.SelectedIndex == 2) {
    Response.Redirect("~/page2");
}

【讨论】：