ASP.NET/C# TextBox1_TextChanged like Windows Application

[qwedster]

Folks!

I have an ASP.NET WebForm with 2 TextBoxes for user to enter, however I want update the TextBox2 with TextBox1 Text as the user enters in TextBox1 (without submitting back to the page) like a Windows Application. I tried the following code in vain, please help!

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
   TextBox2.Text = TextBox1.Text;
}

Adding a Button that submits back to the same page will update TextBox2 with TextBox1.Text. However, I don't want to submit.


Thanks.

[ThatThatGuy]

There's a AutoPostBack property of the textbox... if you enable it to true....

everything you type in any one textbox2 as (per your code) will update in textbox1 but it will create a post back to the server on every single character you type....


Instead you can use javascript to do so..... as it won't do all the processing without postbacks

[Curtis Rutland]

Use Javascript rather than the .NET backend.

Alternatively, you can use an UpdatePanel and turn AutoPostBack on for your text box. This will trigger an asynchronous post back.

The first option is probably best.

[Frinavale]

Even if you use Ajax it's still going to postback to the server.
You need to use a client-side scripting language (like JavaScript) to accomplish your task.

Check out this article on How to use JavaScript in ASP.NET.

I've moved your question to the JavaScipt forum where you can get more help with this.

-Frinny

[DMsy2]

Something like:

<input type="text" name="text1" onchange="this.form.text2.value = this.value;" />
<input type="text" name="text2"  />

[Frinavale]

You've got the right idea DMsy2.

Normally in ASP.NET people use ASP.NET controls instead of HTML elements because they are easier to use in their server side .NET code.

The problem is that in ASP.NET your TextBox with the ID "text2" may not necessarily be "text2" in HTML when the page is rendered.

If you have a TextBox within a user control...or even a TextBox within a content page that is in a placeholder...y our TextBox's ID could be something like "ctrl100_ctrlNa me_text2" when it is rendered in the browser instead of "text2".

The simple reason is because HTML elements must have unique IDs. In ASP.NET you could have a UserControl "A" that has a TextBox with the ID "text2" and you could also have a UserControl "B" that has a TextBox with the ID "text2" on the same page. To differentiate between the two TextBoxes, and to keep the HTML generated for the page valid, ASP.NET changes the ID of these TextBoxes when they are rendered in their HTML form.

In other words, the ID given to an ASP.NET control may not match the ID given the HTML element that is rendered for the control.

To get around this you should use the TextBox.ClientI D property. The ClientID property lets you access the ID that will be used for the control when it is rendered in its HTML form.

So, you can use this in a function:

<script type="text/javascript">
  /*Please note that anything between <% %> is server-side code
   that means that any code between these tags has to match the .NET
   code that you are developing with. Please also note that <%= %> is
  short hand for Response.Write()*/
  
  function populateSecondTextBox(firstTextBoxElement){
    var secondTextBoxElement = document.getElementById('<%=TextBox2.ClientID %>');
    if(firstTextBoxElement && secondTextBoxElement){
      secondTextBoxElement.value = firstTextBoxElement.value;
    }
  }

-Frinny

[DMsy2]

Indeed. That's probably why my usage of ASP.NET (as and when I must) is certainly heretical to those mind-tyrants of Redmond :-)

[acoder]

The simple reason is because HTML elements must have unique IDs. In ASP.NET you could have a UserControl "A" that has a TextBox with the ID "text2" and you could also have a UserControl "B" that has a TextBox with the ID "text2" on the same page. To differentiate between the two TextBoxes, and to keep the HTML generated for the page valid, ASP.NET changes the ID of these TextBoxes when they are rendered in their HTML form.

I can see why this is done, but it does make for ugly IDs. Why not make IDs unique across the page? That's what IDs are supposed to be anyway - unique.

[Frinavale]

Why not make IDs unique across the page?

Well one good scenario is with templates.
Say you have a GridView (renders as an HTML table) and you specify a template that indicates what controls should be used to display/interact-with the data in the rows. In that template you may have a button or hyperlink that lets the user select the row, or you may have a TextBox to let the user enter information. All of these controls have to be given a unique ID when they are rendered in the browser. But on the server, when you want to retrieve the controls from the GridView row you don't want to be working with the clientID, it's much easier to work with the (server side) ID that you assigned the controls in the template.

Another scenario would be having several different people working on several different User Controls (it may even be sever different outsourced companies working on several different User Controls). It would be very difficult to ensure that each ID is unique in this situation.

I know they sometimes look gross but they work!

-Frinny