asp.net dropdown list postback to anchor
Question
How can I go to an anchor tag on the page when the myDropDownList_SelectedIndexChanged() event fires? I am using regular ASP.NET Forms.
Update: The following is valid for an ASP.NET Button. I would like to achieve the same functionality (going to #someAnchor) when I select an option from the Dropdown list.
<asp:Button ID="btnSubmit" runat="server" Text="Do IT" Width="186px" PostBackUrl="#myAnchor" CausesValidation="false" />
Update: I will try to further explain details that I didn't cover in enough detail initially. This is a long page and in the middle of the page there is a dropdown list. Below the dropdown list is a label that will change based on the item selected from the dropdown. The update of the label will occur during the postback. At this point the page needs to remain focused on the dropdown. I tried to use AJAX to accomplish this, but other implementation details prevent that from working. The ability to go to an anchor tag after the postback would be a simple solution. Here is a simplified version of what I am trying to accomplish.
<%@ 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>
7 answers
solution1
3 2010-05-26 16:49:13
This could do the trick
<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>
You mention myDropDownList_SelectedIndexChanged() (server code) but you must do it on client side, unless you have a good reason to go to the server
solution2
2 2016-05-04 14:33:44
将此添加到您的页面加载中，您将很高兴。
Page.MaintainScrollPositionOnPostBack = true;
solution3
0 2010-05-26 16:22:26
I would use JavaScript--either register the script in your codebehind, or have an asp:Literal which is only visible after the SelectedIndexChanged event. Modify the location.href to append your anchor.
solution4
0 2010-05-26 16:24:06
One way to do this is to use the forms.Controls bla bla bla properties in ASP.NET. however I would suggest you to use a asp.net hyperlink control or link button and this would allow you to access it directly with its ID.
thanks, MNK.
solution5
0 2010-05-26 16:50:08
If your dropdown list contains three items say for example:
- Page1
- Page2
- Page3
Give the dropdownlist a property of AutoPostBack="true" and then in the dropdown OnSelectedIndexChanged method write the following:
if (DDl.SelectedIndex == 1) {
Response.Redirect("~/page1");
}
else if (DDl.SelectedIndex == 2) {
Response.Redirect("~/page2");
}
solution6
0 2010-05-26 16:57:12
This requirement has simple javascript solution.But the problem is the design is flawed.Once you move to a new area in screen you cant access the navigation select list without scrolling back.Anyway something like the following works
<%@ 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>
solution7
0 ACCPTED 2010-05-27 15:33:22
Here is what I have implemented to accomplish my desired result.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.