The
AjaxOptions parameter includes properties that define JavaScript
functions to be called during Ajax request. These properties are
called event callback functions.
Ajax
request life cycle can be defined by a diagram which is given in
Figure 1. The life cycle is very simple. When request begins then the
OnBegin callback
function is executed. After the request and before the page is
updated, the OnComplete callback
function executes. At this point, if the request is completed
successfully then the OnSuccess callback
function will be executed otherwise the OnFailure
callback function will executed.
Figure 1. Ajax request life cycle
Let’s
use the callback functions for further improvement of our Send
Message form to prevent users from clicking Send Message
button multiple times. To do this, we will hide the form and only
element visible is the loading <div>.
When
the request gets completed, we want to show the messageForm div again
to display result of the server. Modify form definition to include
OnBegin and OnComplete callbacks functions like below:
Now
modify the @scripts section at the bottom of the form as follows:
Figure 2, shows result of these changes. Now
the flow for sending a message is given below:
1.
The user completes the form and clicks on the Send Message button.
2.
The confirmation window will be shown and if user clicks OK then the
OnBegin callback will be fired and the <form> will be
disappeared.
3.
The loading <div> will be shown.
4.
After the request gets completed, the OnComplete callback gets fired.
5.
The messageForm
<div> will be shown again with the
result of request.
Figure 2. Using callbacks to improve the
Send Message form
No comments:
Post a Comment