I have a simple aspx file
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test4.aspx.vb" Inherits="test4" %>
<!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">
<body>
<form id="form1" runat="server">
<div id="content">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
And this is the test4.aspx.vb code file
Partial Class test4
Inherits System.Web.UI.Page
Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox1.TextChanged
TextBox2.Text = TextBox1.Text
End Sub
End Class
Now the problem is that even if i type something in the textBox1 the textchanged event if not firing why??. What should i do??
You need to enable AutoPostBack on the TextBox that results in the event.
The problem with your code is it's a server-side event trying to invoke a client-side event. The text needs to be entered in TextBox1 and then it will result in the AutoPostBack.
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
Based on your need though. It may be better to populate the TextBox2 with the value from TextBox1 using JavaScript.
Your TextBox is a server control, and text changed is a server event. It is not meant to be fired each time you type a letter, rather it is fired if the text value is different from the value at the time of the last server post back.
If you need to run some kind of code each time a letter is pressed you will need to register and handle the client-side events OnKeyUp / OnKeyDown / OnKeyPress with VB or JavaScripting.
On your .Aspx, add on your TextBox:
OnTextChanged="TextBox1_TextChanged"
I know I'm late to the party with this one, but I still wanted to tell my story.
I had a text changed event handler on a read-only TextBox.
JavaScript changed the TextBox to read/write, but the event wouldn't fire. Probably because the back-end still thought it was read-only.
I fixed the issue by moving all changes between R/O and R/W to the back-end. Now it works.
Related
AjaxFileUpload works on visible TabContainer control TabPanels yet not on ones that are initially invisible and then set to visible.
I believe the issue would be resolved if the visibility property of the TabPanels is set by JavaScript rather than from the server but doesn't know how to do it.
Please help me to fix this issue. Thanks.
ASPX Code:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="AjaxFileUpload.aspx.vb" Inherits="_Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="true"></asp:ToolkitScriptManager>
<p>AjaxFileUpload works on visible TabContainer control TabPanels yet not on ones that are initially invisible and then set to visible.</p>
<p>I believe the issue would be resolved if the visibility property of the TabPanels is set by JavaScript rather than from the server.</p>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel 1">
<ContentTemplate>
<asp:Button ID="btnShow" runat="server" Text="Show"></asp:Button>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel 2" Visible="false">
<ContentTemplate>
<asp:Button ID="btnHide" runat="server" Text="Hide"></asp:Button>
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" AllowedFileTypes="txt,xls,xlsx,doc,docx,msg,pdf,bmp,gif,jpg,jpeg,png" MaximumNumberOfFiles="5" Width="500px" OnUploadComplete="AjaxFileUpload1_OnUploadComplete"></asp:AjaxFileUpload>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Backend VB.Net Code:
Imports System.IO
Imports AjaxControlToolkit
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub btnShow_Click(sender As Object, e As System.EventArgs) Handles btnShow.Click
If TabPanel2.Visible = False Then TabPanel2.Visible = True
TabContainer1.ActiveTabIndex = 1
AjaxFileUpload1.Visible = True
End Sub
Protected Sub btnHide_Click(sender As Object, e As System.EventArgs) Handles btnHide.Click
If TabPanel2.Visible = True Then TabPanel2.Visible = False
End Sub
Protected Sub AjaxFileUpload1_OnUploadComplete(ByVal sender As Object, ByVal e As AjaxFileUploadEventArgs)
Dim strPath As String = Server.MapPath("~/Uploads")
If Not Directory.Exists(strPath) Then Directory.CreateDirectory(strPath)
Dim sFilename As String = System.IO.Path.GetFileName(e.FileName)
Dim sUploadPath As String = "~/Uploads/"
AjaxFileUpload1.SaveAs(Server.MapPath(sUploadPath) + sFilename)
Dim filePath As String = Server.MapPath("~/Uploads/" & e.FileName)
Dim filename As String = Path.GetFileName(filePath)
End Sub
End Class
Actually, even if you set a textbox with visible=false, then the control is NOT sent down to the web page. So, you can't client side even turn that simple text box to become visible.
Use style, and display none.
The page first time is initialized, and that includes js wriing up the ajax up-loader.
So, put the mess in a div (with the control, and anything else you need to hide/show)
, say like this:
<div id="uploader" runat="server" style="display:none;width:50%">
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
ChunkSize="8192"
ClientIDMode="Static"
ViewStateMode="Enabled" />
</div>
So, if you are in SERVER side code (some button postback), then you can show the "div" like this:
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Me.uploader.Style("display") = "inline"
End Sub
and to hide:
Me.uploader.Style("display") = "none"
Remember, while we are in a post back, all that "jazz" JavaScript STILL needed to do it dance on the FIRST page load. (so, we can't use visible = false) on first page load (and against the control or div). You need the full page to load - including the truckload of code that ONLY runs the FIRST time the ajaxupload control loads. If it not a first page load - the control will not setup and initialize correctly.
So, by using style, then the control is rendered when the page is first loaded. And this concept not only applies to the ajax, but say for a hidden text box or what not? Again, using style with display none.
In fact, DURING the process of a user selecting files, and up-loading with that control? Well, you don't want a post back. But when the whole up-load is done? And the server side events (such as saving the files), then I often DO WANT some final code, or even the web page to move on. I do want a final post-back to move on. But, I need a post-back client side!
In place of using a JaveScript _dopostback? (which forces you to write parameter code in the server side page load event? I just drop a asp button on the form some place, and HIDE it (of course with style="display:none").
Now I can use client side js to to "click" of that hidden button. The beauty is then the server side event code stub for the single button code runs, and I don't have write up event code with _doPostBack + code in load event for a code stub server side to run!
Now, in the above, I displayed the up-loader using a server side code-behind.
But, you can ALSO rather easy have client side code to hide or show that div.
If you using jQuery()?
Well, jQuery has .hide(), and .show() (and guess what!!! - .hide()/.show() actually sets the style for you!!! - so even jQuery assumes that you hide or show controls with style, since using the "SomeControl.visible" is near use-less (since anything set visible = false is NOT rendered client side - so then you can't hide/show anyway!!!).
So, to hide/show that with jQuery, you could use this client side:
function show() {
$('#uploader').show();
}
function hide() {
$('#uploader').hide();
}
And, if you not using jQuery, and want to hide/show the div? (javascript).
This will work:
function showl2() {
var mydiv2 = document.getElementById('<%=uploader.ClientID%>');
mydiv2.style.display = "inline";
}
function hidel2() {
var mydiv = document.getElementById('<%=uploader.ClientID%>');
mydiv.style.display = "none";
}
So, the simple concept here is that the control has to render on the page load and must do the first time. So, it has to come down to the browser side. Any control not visible will not be sent down to the client side. However, using css means the control is sent down client side - in all cases.
Now, after a upload, and I want a full post back of the page? Well, as note, this can be difficult, since after the ajax server side events run (such as saving the file), you do NOT get a final post back when all is said and done.
So, I set a client side event for the ajax up-loader like this:
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
AllowedFileTypes="pdf,zip"
ChunkSize="8192"
OnClientUploadCompleteAll="UpLoadDone"
/>
So, note the above client side event - all code (both server and client is done). But we now want a postback from the client side.
So, in the UpLoadDone routine?
I have this:
function uploaddone() {
document.getElementById('<%= btnProof.ClientID %>').click();
}
So, I get a post back and ALSO the code in the button stub server side also runs. And that btProof is hidden with style. But, it is a regular asp.net button. I just wanted it to be clicked after the ajax file up-load is done. But, there not really a way to get the ajax up-load to fire a postback when all is said and one. But, once again:
The concept of a hidden control with style is used - since if I hide that button with .visible = false, then in fact the button would not exist client side, and never be rendered or placed into the browser client side.
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.
According to this post you can intercept the post by overriding this function __doPostBack but it wont work. If I view the generated source I am not able to see the function that is meant to be auto generated and causes asp.net to make the postback.
where is this function? and how do I intercept it?
I'm using asp.net 4 and vs 2012
Default.aspx
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
//breaks here as it cant find __doPostBack
var __original = __doPostBack;
__doPostBack = myFunction();
function myFunction() {
alert('intercept');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
Default.aspx.vb
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub form1_Load(sender As Object, e As EventArgs) Handles form1.Load
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Dim txt As String = TextBox1.Text
End Sub
End Class
An ASP.NET Button renders an <input type="submit" /> to postback the form, and will never use this method. The __doPostBack method is only used for elements that are not input buttons that do not normally cause a POST operation to the server. This is a function that's inside one of the Microsoft's JavaScript file, and only gets rendered out on the client. Common uses for __doPostBack are LinkButton controls, controls that may have AutoPostBack="true", and others.
Also, there may be a call to WebForms_DoPostBack... something named like that that also posts back, but internally calls __doPostBack.
If you are trying to prevent postback on click of your button, attach to the submit event of the form, and cancel the postback operation that way.
I came across a very strange occurrence with ASP.NET onclick event in IE (other browsers doesn't seem to have this problem). When there is only one textbox field in a form, the onclick event doesn't fire when you enter text and hit Enter/Return. The event does fire when you click on the actual submit button. When there are two or more fields in the form, hitting Enter/Return works just fine.
It's very strange. Thought it was something with my IE, but checked other machines, and every one of them had the same problem.
I had setup this really simple page as a test:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
Response.Write(((Button)sender).Text);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="txtBox2" runat="server" ></asp:TextBox>
<asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" Text="Submit" runat="server" />
</div>
</form>
</body>
</html>
When one of the textbox is removed, the btnSubmit_Click event doesn't behave as expected.
The defaultButton property of Panel or Form is used to ensure Enter Key Submission. Typically people used to Enter Key submission and if it is disabled, it might be annoying certain times.
The defaultButton really provides a way to handle Enter Keys for respective portions of the page when the focus is there.
Source: multiple submit buttons and the enter key
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