Description

The anthem:Button control has some properties that are not found on asp:Button. This example shows how to use them.

After clicking a button, you might want to give the user some feedback to let him or her know that it might take a while to handle that button click. To do that, you can change the text on the button and also disable it for the duration of the call back. There are two special properties on the anthem:Button control that allow you to do this.

Additionally, you might want to disable other controls on the page or do other work. The anthem:Button control will execute functions before and after the call back. It's even possible to cancel call backs using these functions.

Example

Click the first button to see get prompted to confirm making the call back. The first button's text will change and will be disabled during the call back. The other button will also disable itself while the call back is in progress.

Steps

  1. Add a anthem:Button control to your page:

    <anthem:Button id="button1" runat="server" Text="Click Me!" />

  2. Add a second anthem:Button control to your page. We'll disable this button when the first button is clicked:

    <anthem:Button id="button2" runat="server" Text="Another Button" />

  3. Set the TextDuringCallBack and EnabledDuringCallBack properties to the desired values:

    <anthem:Button id="button1" runat="server" Text="Click Me!"
	TextDuringCallBack="Working..." EnabledDuringCallBack="false" />

  4. To disable the second button when the first button gets clicked, add PreCallBackFunction and PostCallBackFunction properties to the first button's tag:

    <anthem:Button id="button1" runat="server" Text="Click Me!"
	TextDuringCallBack="Working..." EnabledDuringCallBack="false"
	PreCallBackFunction="button1_PreCallBack"
	PostCallBackFunction="button1_PostCallBack" />

  5. Those properties are the names of client-side JavaScript functions that get invoked before and after the button calls back to the server when it gets clicked. Add a client-side script block (with no runat="server" attribute) to the page containing those functions:

    <script language="javascript" type="text/javascript">

function button1_PreCallBack(button) {
	document.getElementById('button2').disabled = true;
}

function button1_PostCallBack(button) {
	document.getElementById('button2').disabled = false;
}

</script>

  6. To cancel call backs, return false from the PreCallBackFunction:

    function button1_PreCallBack(button) {
	if (!confirm('Are you sure you want to perform this call back?')) {
		return false;
	}
	document.getElementById('button2').disabled = true;
}

  7. When a call back gets cancelled, the function specified with the CallBackCancelledFunction property gets invoked. Add that property to your button:

    <anthem:Button id="button1" runat="server" Text="Click Me!"
	TextDuringCallBack="Working..." EnabledDuringCallBack="false"
	PreCallBackFunction="button1_PreCallBack"
	PostCallBackFunction="button1_PostCallBack" 
	CallBackCancelledFunction="button1_CallBackCancelled" />

  8. Finally, add the button1_CallBackCancelled function (as client-side JavaScript):

    function button1_CallBackCancelled(button) {
	alert('Your call back was cancelled!');
}

Remarks

You can do anything you want in the functions specified with the PreCallBackFunction and PostCallBackFunction properties. The TextDuringCallBack and EnabledDuringCallBack features could have been done with the functions but those will probably be so common, they have first-class support.

Don't confuse the PreCallBackFunction and PostCallBackFunction properties with events. They're just JavaScript strings that get evaluated on the client to some sort of callable object like a function. The property names are suffixed with "Function" to make them look different than events much like the CustomValidator control's ClientValidationFunction property.

Note that the button that caused the call back is passed in to the client-side functions. This way you could have multiple buttons on the page with the same values for those properties.