Ok, so you have a requirement where the user wants to auto populate certain fields based on some input they enter in a textbox. Pop out your jQuery toolbox and get it done in few minutes, however when that textbox is inside of an UpdatePanel of a web forms project this simple task might leave you scratching your head as it did to me. After countless hours here are the options and the solution that I came up with:
First I tried using the onTextChanged event which comes built in with every textbox control. But the problem with this event is that it only gets fired when you move the focus away from the textbox by hitting the tab key for instance, which is not what I was after. I wanted the event to fire as soon as it reaches certain length, in my case 5 for zip code value. So after doing extensive research I ended up implementing the __doPostBack() event that the UpdatePanel itself uses and hence reap the benefits of the built in partial rendering on the UpdatePanel.
As you can see for this to work you’ll have to use two hidden fields that are outside of the UpdatePanel and then attach a trigger to the UpdatePanel for the hidden button’s click event.
And this button click event is what gets called when someone enters a zip code in the textbox. This is a little trick that you have to do in order for this to work.
Now in you code behind file you could simply access the zip code values as such:
So after all this we have a working program that calls the hiddenButton_Click event using the __doPostBack method of the UpdatePanel using jQuery that we wrote inside of the pageLoad event of the ScriptManager, truly a mouthful.