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>
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
Add this to your page load and you will be good to go.
Page.MaintainScrollPositionOnPostBack = true;
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.
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.
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>Location 2</strong>
<strong>Location 3</strong>
<strong>Location 4</strong>
</body>
</html>
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
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");
}
Related
When I change the selection of my dropdown, the Change event does not fire. I put a breakpoint in the method and the program does not stop.
This is my markup:
<form id="form1" runat="server">
<div style='text-align:center;'>
<a style='text-decoration:none;font-size:16px;color:blue;background-color:white;width:200px;padding:4px;' href='LocationDetails.aspx?Location_ID=0' target='detailPanel'> Add Location
</a></div>
 
<div style='text-align:left;'>
<asp:Label ID="FacilityTypeLbl" runat="server">Facility Type:</asp:Label>
<asp:DropDownList ID="FacilityTypeDDL" runat="server" AutoPostBack="true" EnableViewState="true" OnSelectedIndexChanged="FacilityTypeDDL_SelectedIndexChanged">
</asp:DropDownList>
</div>
<hr/>
<%ListLocations()%>
</form>
This is my Page_Load method to populate the list and it works fine.
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
GetServiceTypes()
FacilityTypeDDL.DataSource = dtServiceTypes
FacilityTypeDDL.DataTextField = dtServiceTypes.Columns("Title").ToString()
FacilityTypeDDL.DataValueField = dtServiceTypes.Columns("ID").ToString()
FacilityTypeDDL.DataBind()
End If
End Sub
This is my change event:
Protected Sub FacilityTypeDDL_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles FacilityTypeDDL.SelectedIndexChanged
strFacilityValue = FacilityTypeDDL.SelectedValue
ListLocations()
End Sub
I put a breakpoint at the first line of code and after changing the dropdown selection it does not stop at this event.
What am I doing wrong?
UPDATE
This is my entire markup. Can there be something wrong this it?
<%# Page Language="VB" AutoEventWireup="true" CodeFile="Locations.aspx.vb" Inherits="Editor_Locations" %>
<!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 id="LocationHead" runat="server">
<title>Locations</title>
<meta http-equiv="Content-Language" content="en-us"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
</head>
<body>
<form id="form1" runat="server">
<div style='text-align:left;'>
<asp:Label ID="FacilityTypeLbl" runat="server">Facility Type:</asp:Label>
<asp:DropDownList ID="FacilityTypeDDL" runat="server" AutoPostBack="true" EnableViewState="true" OnSelectedIndexChanged="FacilityTypeDDL_SelectedIndexChanged">
<asp:ListItem>Test1</asp:ListItem>
<asp:ListItem>test2</asp:ListItem>
<asp:ListItem>Test34</asp:ListItem>
</asp:DropDownList>
</div>
<hr/>
</form>
</body>
</html>
UPDATE
This application is a web site, not a web application. (I didn't know there was a difference but now I do.) In trying to figure out way the SelectedIndexChange event will not fire, I added a button and a click event. When I change the selection in the dropdown list, no event fires. When I click the button, the click event fires, then the selectedindexchange event fires.
I don't think the event SelectedIndexChanged is going to work.
Is there any other way to wire up a Postback when the dropdown list changes?
Can I somehow use __doPostback from a javascript function call when the list changes?
Any suggestions would be greatly appreciated!
I could not get the asp:DropdownList to fire the SelectedIndexChanged event. So this is how I completed the task.
Adding the dropdown dynamically as shown above and adding the change event that calls a javascript:
onchange='UpdateLocationList()'
This function had to be put in a .js file. This web site had a .js file already. It also had some AJAX calls that I used to complete the task.
In the UpdateLocationList(), I get the ID of the service type that was set as a value attribute in the dropdown. Then I use a function that is already part of the .js file to the LocationDetails page using the Service Type ID to display only the facilities of that service type. This is the function:
function updateLocationList() {
var ddlFacilityType = document.getElementById("FacilityTypeDDL");
var facilityValue = ddlFacilityType.options[ddlFacilityType.selectedIndex].value;
processAjax("/editor/Locations.aspx?Location_ID=" + facilityValue, "navPanel");
}
Works like a charm.
Thanks for all of your help.
My superior asked me to redirect or always use an IP based address for the web application that I created.
Ex: Instead of using http://www.google.com, the project should use
http:/ /173.194.127.46
In this way, the computers on our network could visit the webportal directly.
Unfortunately, when I use the IP, the server script on code behind doesn't work. I tried to create a simple one to prove it right.
Default.aspx
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button runat="server" ID="btnClick" Text="Test Click" />
<asp:Label ID="Label1" runat="server" Text="Label" />
<button runat="server" id="btnClick2">Test Click 2</button>
</div>
</form>
</body>
</html>
Default.aspx.vb
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub btnClick_Click(sender As Object, e As System.EventArgs) Handles btnClick.Click
Label1.Text = "Clicked from ASP Button"
End Sub
Protected Sub btnClick2_ServerClick(sender As Object, e As System.EventArgs) Handles btnClick2.ServerClick
Label1.Text = "Clicked from HTML Button"
End Sub
End Class
The code on HTML Button does not work, like it doesn't have a script.
There are html tags I placed inside the HTML Button so replacing to ASP Button will not solve it.
Is there a way I can make the codes on HTML Button work?
Update: It is working on the latest version of Google Chrome and Mozilla Firefox
I solved it but I need further testing!
Here's what I've done.
<%# Page Language="VB" AutoEventWireup="true" %>
<!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>
<style type="text/css">.hid{display: none;}</style>
</head>
<body>
<form id="form1" name="form" runat="server">
<div>
<asp:Button runat="server" ID="btnClick" Text="Test Click" />
<button runat="server" id="btnClick2">Test Click 2</button>
<button runat="server" id="btnClick3" onclick="document.getElementsByTagName('form')[0].btnHidden.click();return false;">Test Click 3</button>
<asp:Button runat="server" CssClass="hid" ID="btnHidden" />
<br /><asp:Label ID="Label1" runat="server" Text="Label" />
</div>
</form>
<script type="text/VB" runat="server">
Protected Sub btnClick_Click(sender As Object, e As System.EventArgs) Handles btnClick.Click
Label1.Text = "Clicked from ASP Button"
End Sub
Protected Sub btnClick2_ServerClick(sender As Object, e As System.EventArgs) Handles btnClick2.ServerClick
Label1.Text = "Clicked from HTML Button"
End Sub
Protected Sub btnHidden_Click(s As Object, e As EventArgs) Handles btnHidden.Click
Label1.Text = "Clicked from ASP Button via HTML Button"
End Sub
</script>
</body>
</html>
What I did is add ASP Button that will trigger the server script. Then on the HTML button, I added onclick event that will perform a click on ASP Button.
Suppose i have two text fields in one page, one for name and another one for age.
When i click the submit button those values should appear in another page. Can any one give the example for that one.. i am totally confused.
please help me
Thank you
MSDN has a page on this, How to: Pass Values Between ASP.NET Web Pages:
The following options are available even if the source page is in a different ASP.NET Web application from the target page, or if the source page is not an ASP.NET Web page:
Use a query string.
Get HTTP POST information from the
source page.
The following options are available only when the source and target pages are in the same ASP.NET Web
application.
Use session state.
Create public properties in the source page and access the property values in the target page.
Get control information in the target page from controls in the source page.
For your scenario, it sounds like using POST is the way to go, since you have textboxes on the first page. Example:
First page:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1" %>
<!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>Page 1</title>
</head>
<body>
<form id="form1" runat="server" action="WebForm2.aspx">
<div>
Name: <asp:TextBox ID="tbName" runat="server"></asp:TextBox><br />
Age: <asp:TextBox ID="tbAge" runat="server"></asp:TextBox><br />
<asp:Button ID="submit" runat="server" Text="Go!" />
</div>
</form>
</body>
</html>
Notice the action="WebForm2.aspx" which directs the POST to the second page. There's no code-behind.
Page 2 (receiving page):
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication2.WebForm2" EnableViewStateMac="false" %>
<!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>Page 2</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Literal ID="litText" runat="server"></asp:Literal>
</form>
</body>
</html>
Notice the EnableViewStateMac="false" attribute on the Page element. It's important.
The code-behind, grabbing the values using a simple Request.Form():
Public Class WebForm2
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
litText.Text = Request.Form("tbName") & ": " & Request.Form("tbAge")
End Sub
End Class
That should work... :)
Put this code to your submit button event handler,
private void btnSubmit_Click(object
sender, System.EventArgs e) {
Response.Redirect("AnotherPage.aspx?Name="
+ this.txtName.Text + "&Age=" + this.txtAge.Text); }
Put this code to second page page_load,
private void Page_Load(object sender,
System.EventArgs e) {
this.txtBox1.Text =
Request.QueryString["Name"];
this.txtBox2.Text =
Request.QueryString["Age"]; }
You have a couple of options.
**
1. Use Query string.
(Cons)
- Text might be too lengthy
- You might have to encrypt/decrypt query string based on your requirement
(Pros)
- Easy to manage
2. Use Session
(Cons)
- May increase processing load on server
- You have to check and clear the session if there are too many transactions
(Pros)
- Values from different pages, methods can be stored once in the session and retrieved from when needed
According to the info in:
Which values browser collects as a postback data?
the value of the HTML input button is sent in a post back. I'm testing in ASP.NET with IE and I am not finding this to be the case.
The markup for my test case is:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
<!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>test postback</title>
<script type="text/javascript">
function doTest() {
var button = document.getElementById("btnTest");
button.value = "new-value";
alert("button contents = " + button.value);
return true;
}
</script>
</head>
<body>
<form id="myForm" runat="server">
<div>
<asp:Panel ID="pnlTest" runat="server"
DefaultButton="btnTest">
Textbox:
<asp:TextBox ID="txtTest" runat="server" />
<asp:Button ID="btnTest" runat="server"
Text="change" OnClientClick="doTest()" />
</asp:Panel>
</div>
</form>
The code behind is:
Partial Class Test
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
txtTest.Text = btnTest.Text
End Sub
End Class
My result is that the value of the input button is always "change" when the browser loads the page, but I was expecting it to be "new-value" after postback. The Javascript doTest() function is changing the value when the button is clicked.
Is there something more I'm supposed to do for ASP.NET or IE to get the input button value posted back? Or is the information about this functionality
wrong?
In a case like this I would probably use:
<input type="button" ID="btnTest" runat="server" onclick="doTest()" value="change" />
Note the runat="server".
While asp:button probably renders similarly, if what you really want it an HTML button input, you can use that. Yes, ASP.NET will pick up the value on the server side.
Also, do a view source and make sure the ASP.NET panel is not munging up the ID of the input. More generally, have you tested this without the asp:panel tag? I wonder if that affects anything.
I believe IE just hates input submits....
But you should also know...
ASP uses viewstate to ensure there is no tampering with server controls. The value of the submit button is stored in the view state and most likely the only way to modify the value of it is to use the ASP.NET JS API.
More commonly you see this problem with <selects> (Options added to by javascript lost in postback), but <input type="submit" /> is very similar
It's not that it's not being set, but the javascript sets the value, which gets reset back to "change" on the postback. If you're looking for a button that works with your javascript, use the client input control:
<input type="button" ID="btnTest" onclick="doTest()" />
Otherwise, if you want a server control, you should set btnTest.Text on the server side.
You are using the wrong id for the button. ASP.NET gives each control a unique id. It is made up of all the ids in the chain to your control.
Therefore your button probably has an id something like ctl00_pnlTest_btnTest. This is why your JavaScript is not setting the buttons text.
view source in your browser to see the actual ID of the control and adjust your JavaScript accordingly.
From code you can get the actual ID used in the page with the ClientID property. So you could change your JavaScript to:
var button = document.getElementById("<%= btnTest.ClientID %>");
Just tried Marc's solution like this:
<script type="text/javascript">
function doTest() {
var button = document.getElementById("btnTest1");
button.value = "new-value";
alert("button contents = " + button.value);
return true;
}
</script>
<input type="submit" id="btnTest1" name="btnTest1" value="Submit 1" runat="server" onclick="doTest()" />
When I posted back the Load event still had Submit 1 as the value of the button. You could use a hidden field, set that value with the button in JS and post back. That does in fact work.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>test postback</title>
<script type="text/javascript">
function doTest() {
var button = document.getElementById("btnTest1");
button.value = "new-value";
alert("button contents = " + button.value);
var hdn = document.getElementById("hdnTextboxName");
hdn.value = button.value;
return true;
}
</script>
</head>
<body>
<form id="myForm" runat="server">
<div>
<asp:Panel ID="pnlTest" runat="server" DefaultButton="btnTest">
Textbox:
<asp:TextBox ID="txtTest" runat="server" /><asp:HiddenField ID="hdnTextboxName" runat="server" ClientIDMode="Static" />
<asp:Button ID="btnTest" runat="server" Text="change" OnClientClick="doTest()" ClientIDMode="Static" />
</asp:Panel>
</div>
</form>
</body>
</html>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
txtTest.Text = hdnTextboxName.Value
End Sub
I am trying to learn asp.net (vb.net) and I'm having some trouble. I want to change a pages content based on the querystring.
In classic asp I would do:
<% If request.querystring("page") = 1 THEN %>
-entire page-
<% Else %>
-different page-
<% End If %>
The closest I could get in .net is
Sub Page_Load(ByVal Sender as Object, ByVal E as EventArgs)
If Request.QueryString("page") = 1 Then
lblMessage1.Text = "message"
Else
lblMessage1.Text = "message2"
End If
End Sub
That only seems good for small things. What would be the best method to change an entire page?
You could do the following (simple redirect):
If Request.QueryString("page") = 1 Then
Response.Redirect("MyPage1.aspx")
Else
Response.Redirect("MyPage2.aspx")
End If
You could also do this (read more here):
If Request.QueryString("page") = 1 Then
Server.Transfer("MyPage1.aspx")
Else
Server.Transfer("MyPage2.aspx")
End If
And finally one more option (show/hide different panels on the page):
If Request.QueryString("page") = 1 Then
MyPanel1.Visible = true
MyPanel2.Visible = false
Else
MyPanel1.Visible = false
MyPanel2.Visible = true
End If
I would suggest using the MultiView control.
In a nutshell, you would create two multiview "Views", each with the html that you would want to show. Then you could look at the querystring parameter and switch the active view of the multiview accordingly.
This has a lot of advantages to Response.Redirect() like others suggested. First off, that would always generate at least two browser requests. Also, Response.Redirect() throws a ThreadAborted exception behind the scenes, which can confuse people diagnosing the application.
Example MultiView control:
ASPX:
<form id="form1" runat="server">
<div>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View runat="server">
Hi, this is Page 1
</asp:View>
<asp:View runat="server">
Hi, this is Page 2
</asp:View>
</asp:MultiView>
</div>
</form>
Code:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If Request.QueryString("page") = "1" Then
MultiView1.ActiveViewIndex = 0
Else
MultiView1.ActiveViewIndex = 1
End If
End Sub
You really have a few options, you could:
Response.Redirect(url) to a different page based on the input.
You could have an ASP:Panel with the "visible" property set to false and toggle that value based on the input.
Why not use different files instead? redirect to different pages. That would avoid having to have if statements everywhere.
OR
put your data in panels and just hide one or the other panel1.visible = (true/false). That's the best thing to do if you have to have it all in the same aspx page.
I prefer doing it on the ASPX page using DataBinding:
<asp:PlaceHolder runat="server" ID="Messages">
<asp:Label runat="server" Visible=<%# Request.QueryString("page") = 1 %> Text="Message 1" />
<asp:Label runat="server" Visible=<%# Request.QueryString("page") <> 1 %> Text="Message 2"/>
</asp:PlaceHolder>
Then on the server side:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Messages.DataBind()
End Sub
For future reference, you can still use the classic ASP way to control content. Here's an ASPX page I wrote just now:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<%
if (3 == 9)
{%>
<span>Hello</span>
<%
}
else
{
%> <span>What?</span > <%
}
%>
</div>
</form>
</body>
</html>
When the page renders, it displays 'What?' on the page.
However, I would say that this is bad practise and poor design! Use either womp's suggestion of a multiview, or a page redirect.