How postback works in ASP.NET

Dưới đây là bài viết tiếng Anh giải thích postback làm việc như thế nào?
Chúng ta nếu đã từng học sơ qua lập trình web động ( như PHP chẳng hạn), chúng ta đã biết sơ qua phương thức Post và Get. Theo mình nghĩ Postback thực ra cũng là hình thức gởi dữ liệu cũ nhưng đã được đơn giản hóa bằng cách viết lệnh đơn giản:

Sử dụng Code behind trong ASP.NET
Tự phát sinh ra các hàm kiểm tra thông qua ASP.NET Engine ( như lời gọi hàm Postback, tự phát sinh sự kiện, tham số, viewstate kèm ID).

Đây là bài viết chi tiết:

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.

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:

<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" />
 </form>
</body>
</html>

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:

<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>

<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:

eventTarget: the control doing the submission
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:

...
<asp:linkbutton id="Test" onclick="Test_Click" runat="server" text="Create Text file" visible="false">
...

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:
User Prompt

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

<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" />
    <input type="hidden" runat="server" id="funcParam">
</form>
</body>
</html>

Inside our form we have 3 controls:

a link to call the javascript CreateFile function.
a linkbutton that runs on the server, with ID CreateFile, and a CreateFile_Click method which runs when it is clicked.
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.

Tìm kiếm Blog này

Blog Yoyo 1001