We all know about confirm boxes right. Confirm boxes are very simple JavaScript popup like boxes that gives you the option to select either "ok" or "cancel". In this article we will see that how we can use AJAX to use control the server side methods based on the selection from the confirm box.

Introduction:

We all know about confirm boxes right. Confirm boxes are very simple JavaScript popup like boxes that gives you the option to select either "ok" or "cancel". In this article we will see that how we can use AJAX to use control the server side methods based on the selection from the confirm box.

I got "ok":

Catching "okay" is pretty simple. When you press "ok" in a confirm box the server side button click event is automatically fired. Let's see a very simple example.

private void InitializeComponent() { this.BtnSave.Click += new System.EventHandler(this.BtnSave_Click); this.Load += new System.EventHandler(this.Page_Load); this.BtnSave.Attributes.Add("onclick","CheckConfirmation();"); }

In the example above I just added the "onclick" attribute to the BtnSave Button control. The server side button click event will look something like this:

private void BtnSave_Click(object sender, System.EventArgs e) { Response.Write("I am Server Side button click and I am fired"); }

Now, when you click the "ok" button from the confirm window you will see that server side button event is fired and Response.Write puts the message on the screen. The bad thing is that when you press "cancel" from the confirm box nothing happens. The reason is that "cancel" is only handled on the client side. Let's see how we can access the "cancel" button click.

AJAX COMES TO THE RESCUE:

AJAX is not the only technique that can solve this problem. You can solve this problem of caching the cancel click using JavaScript but that tends to be little ugly. Let's say that when the user presses the "ok" from the confirm box we have to update a record in the database and when the user presses "cancel" we add the record in the database.

Server Side Update and Add Method:

I am not going to implement the whole Add and Update Method but I will just define the methods and leave the implementation for the readers.

[Ajax.AjaxMethod] public string UpdateMethod() { // Do your update thing here return "Record Updated"; } [Ajax.AjaxMethod] public string AddMethod() { // Do your Adding in the database here return "Record Added"; }

Now let's see how can we call these methods from JavaScript code.

<script language="javascript"> // Check confirmation method function CheckConfirmation() { // If you click "ok" then true is returned and if you click "cancel" then false is returned var result = confirm('Are you sure'); if(result) { // Call the Update method AjaxDemo.UpdateMethod(UpdateMethod_CallBack); } else { // Call the Add method AjaxDemo.AddMethod(AddMethod_CallBack); } } function AddMethod_CallBack(response) { var myString = response.value; alert(myString); } function UpdateMethod_CallBack(response) { var myString = response.value; alert(myString); }

If you have been following my previous articles about AJAX than this is very simple code for you. If NOT than shame on you and visit the links below.

AJAX IN ACTION

AJAX IN ACTION (DropDownList Dependency)

I hope you liked the article, happy coding!