Postbacks in

xefteri
home articles forums about Home Articles Article Display A r t i c l e O p t i o n s
How postback works in ASP.NET

In this article, we will take a closer look at how ASP.NET pages post back to themselves, and how to customize this feature in our web applications. Published: Dec 10, 2002 | Last Edited: Aug 20, 2005 Tested with: ASP.NET 1.1 C ategory: ASP.NET 476,168 views
Download C ode (1KB) Print-friendly Page Tell a Friend Discuss in Forums
Ads by Google
ASP Net
ASP Net Ajax
Introduction
In this article, we will take a closer look at how ASP.NET pages post back to themselves, and how to customize this feature in our web applications.
Website Forms in Minutes

Easy to Use. 200 Web Form Templates No Programming - Only Copy & Paste
www.Form Ex perts.com /WebForm
function __doPostBack(eventTarget, eventArgument)

One of the most important features of the ASP.NET environment is the ability to declare controls that run on the server, and post back to the same page. Remember the days of classic ASP? We would create a form which would accept the user's input, and then we would most probably have to create another page that would accept all those inputs, either through HTTP GET or POST, and perform some kind of validation, display and action. Sometimes, even a third page was necessary to perform our actions. This wasted a lot of time and complicated things when you had to make a change. But of course, this is not necessary any more with ASP.NET. There is no need to create second pages that accept the inputs of the first, process them and so on. Form fields and other controls can be declared to run on the server, and the server simply posts the page back to itself and performs all the validation, display and actions. Our life as web developers has become a million times better. But how exactly is this done? When a control is declared to run on the server, a VIEWSTATE is created which remembers the ID of that control, and the method to call when an action is performed. For example, let's say we input this HTML on a page:
Download the White Paper

Discover the Mobile Mass-Market Potential of the US Brew Base
www.brewm p.com /content/resources
Medical Coding Certified

Online & Campus Medical Coding Certificates. Courses Start Soon!
www.AllAlliedHealthSchools.com
<script language="VB" runat="server"> Sub Test_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) 'enter your code to perform End Sub </script> <html> <body> <form runat="server" id="myForm"> <asp:linkbutton id="Test" runat="server" text="Create Text file" onclick="Test_Click" /> 10 </form> 11 </body> 12 </html>
Select this code
This is a very simple page. We declare only one web control, a linkbutton, to run on the server, with an ID of Test and we assign a method called Test_Click to run when the link is clicked on the page. The linkbutton has to be wrapped inside a form that runs on the server as well. We save the above as an ASPX page and then we browse to it. The HTML that gets created looks like this:
1 2 3 4 5 6 7 8 9
DXv2 Is Here DevExpress

Build Metro Inspired Touch Apps For ASP, Winforms, WPF and Silverlight.
www.DevEx press.com
Help W/ Ruby Programming?

Troubleshoot & Tune Ruby Rails App W/ New Relic. Download Free Trial!
NewRelic.com /Ruby_Rails
O t h e r
a r t i c l e s
i n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<html> <body> <form name="myForm" method="post" action="test.aspx" id="myForm"> <input type="hidden" name="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" value="" /> <input type="hidden" name="__VIEWSTATE" value="dDwtMTAwOTA0ODU1NTs7PsllCK1DzvZsK0J6OQ2dxKqmEwVs" /> <script language="javascript">
<!-function __doPostBack(eventTarget, eventArgument) { var theform = document.myForm; theform.__EVENTTARGET.value = eventTarget; theform.__EVENTARGUMENT.value = eventArgument; theform.submit(); } // --> </script>
1. Smart headers and footers using ASP.NET User C ontrols December 23, 2002 Good site usability often means removing links from one page back to itself. In this article we will look at how to create an ASP.NET User C ontrol which will act as a common header to a site. It will automatically know which page we are looking at, and it will remove links to the same page from itself. For example, on this site, if we click on the About us section of the header, it will take you to the page, and it will make that link inactive. That way, we know that we are under that section, and we can't click on it anymore. 2. Maintaining Sorting while Paging in an ASP.NET Datagrid December 18, 2002 The Datagrid server control offers much control and flexibility in presenting data. Two of the actions
converted by Web2PDFConvert.com
19 20 21 22 23
<a id="Test" href="javascript:__doPostBack('Test','')">Create Text file</a> </form> </body> </html>
Our link calls the javascript function __doPostBack when clicked (that's 2 underscore symbols in front of it). You do not write this function, instead it is generated by the ASP.NET engine and automatically included in our page. It submits the form to the same page, and accepts 2 arguments: 1. eventTarget: the control doing the submission 2. eventArgument: any additional information for the event For example, our generated link button, is telling the javascript function that the control submitting the form is the one with ID=Test, and no further information is needed for the second argument. The javascript function is actually setting 2 hidden form fields with these 2 arguments: __EVENTTARGET and __EVENTARGUMENT. When the form is submitted back to the server, the server reads these 2 hidden form fields and decides what submitted the form and performs the necessary action. In this case, the server will determine that the linkbutton performed the action, and will execute the Test_Click method. Lastly, I should point out that at least one control needs to be set to Visible, for the server to generate the __doPostBack function in our page. Even if we have numerous web controls declared to run on the server, but they are all set to Visible=false, then the javascript function will not be included and we will not be able to perform any actions. You can test this out, by changing the linkbutton source code to this and looking at the source code generated when it runs:
1 ... 2 <asp:linkbutton id="Test" runat="server" text="Create Text file" onclick="Test_Click" visible="false" /> 3 ...
Calling __doPostBack in our own javascript

So now that we have seen how the postback process works, we can easily create web applications to use this feature. Let's go through an example, and hopefully things will clear up more. Let's assume that we have a link on our page that creates a file on the server. When we click on the link, we might want to pop up a javascript input box where the user can type the filename. If the user types something in and then clicks OK, the page will post back to itself and perform the action. If the user clicks on CANCEL, then nothing will happen. Something like this:
that are hard-wired into it are Paging and Sorting. On their own they work great, but not so well together. When you sort a column and then move to a previous or next page, the sorting preference is not maintained. In this article we will see how to maintain both by using the Viewstate object. 3. Viewing and editing file and directory attributes in ASP.NET December 2, 2002 The System.IO.FileAttributes class gives us access to file/directory attributes. In this article, we'll see how to use this class to first read the current attributes and then change them. 4. C opying a directory in ASP.NET November 25, 2002 The System.IO.DirectoryInfo class does not come with a method to copy a directory. In this article, we'll see how to create a method to do that, and then use it in an ASP.NET page. 5. C reating and consuming a Web Service using Visual Studio .NET November 18, 2002 This article will go through the complete process of how to create a Web Service and then how to consume it in any ASPX page. We'll do this entirely within the Visual Studio.NET. Our Web Service will convert Fahrenheit degrees to C elcius.
Let's see the HTML code needed to do this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<script language="VB" runat="server"> Sub CreateFile_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Dim strFileName As String = funcParam.Value 'custom code to create a text file End Sub </script> <html> <head> <script language="JavaScript"> //ask for user input and then create file function CreateFile() {
//get filename from the user

var fileName = prompt('Type the name of the file you want to create:','');
//if the user clicks on OK and if they have entered something

if ((fileName) && (fileName!="")) {
//save the filename to the hidden form field 'funcParam'

document.forms['myForm'].elements['funcParam'].value = fileName;
//call the postback function with the right ID

__doPostBack('CreateFile',''); } } </script> </head> <body> <form runat="server" id="myForm"> <a href="javascript:CreateFile();">Create Text file</a> <asp:linkbutton id="CreateFile" runat="server" onclick="CreateFile_Click" />
29 <input type="hidden" runat="server" id="funcParam"> 30 </form> 31 </body> 32 </html>

Inside our form we have 3 controls: 1. a link to call the javascript CreateFile function. 2. a linkbutton that runs on the server, with ID CreateFile, and a CreateFile_Click method which runs when it is clicked. 3. a hidden form field with ID funcParam, to store the filename that the user types in our javascript pop up. Our custom javascript is very simple. First, it pops up an input box, where the user is asked to type a filename. If the user clicks on OK, and actually enters something, then we store this filename in our hidden form field, funcParam. Then we call the __doPostBack function, making sure we pass the ID of the linkbutton to make it think that it's the linkbutton control that is submitting the form. Since the linkbutton has an event called CreateFile_Click which runs on the server when it is clicked, then the page will submit to itself, and this method will run. The first thing we want to do in this method is get the name of the filename, and this is done by funcParam.Value. The remaining code to create the actual file on the server is not included, since the purpose of this article is not to show this. You can add it in, or create some other code here that performs a different action. Keep in mind that for every javascript function that you create which calls the __doPostBack function, you will need to create a control that runs on the server - just like the shown above. We are not restricted to linkbuttons though - we can use any of the ASP.NET web controls.
Conclusion
We have seen how the postback function works with ASP.NET, and how to use it in our web applications. This article has concentrated on how to use this with a simple prompt box, but you can use a similar technique to combine the __doPostBack function with a showModalDialog function, or to return a value from another pop up window.
All content on the site is provided by Evagoras C haralambous. Feel free to use it as you please.

Postbacks in

Uploaded by

Copyright:

Available Formats

Postbacks in

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Postbacks in

Uploaded by

Copyright:

Available Formats

xefteri

home articles forums about Home Articles Article Display A r t i c l e O p t i o n s

How postback works in ASP.NET

Download C ode (1KB) Print-friendly Page Tell a Friend Discuss in Forums

ASP Net Ajax

Website Forms in Minutes

function __doPostBack(eventTarget, eventArgument)

Download the White Paper

Medical Coding Certified

DXv2 Is Here DevExpress

Help W/ Ruby Programming?

<a id="Test" href="javascript:__doPostBack('Test','')">Create Text file</a> </form> </body> </html>

Calling __doPostBack in our own javascript

Let's see the HTML code needed to do this:

//get filename from the user

//if the user clicks on OK and if they have entered something

//save the filename to the hidden form field 'funcParam'

//call the postback function with the right ID

29 <input type="hidden" runat="server" id="funcParam"> 30 </form> 31 </body> 32 </html>

You might also like