The Self-Taught Programmer

Recipes from real-world experience with asp.net.

How To Process a Portion of a Form via Callback and Display a Results Message Using DevExpress Controls

leave a comment »

The Situation:

You have an ASP.NET page with multiple form sections, and you want to process only one section when an ASPxButton control is clicked. You also want to display a status message after processing.

A Solution:

This should be basic Ajax-type stuff, but as I am a self-taught programmer, I came to this late. Also, I am using DevExpress controls in my current application, which function a bit differently than standard Ajax. Without Ajax, you would just process the page on postback and set the results label in the code-behind. However, using a callback rather than postback is a great way to process only a portion of the page.

Many of the DevExpress controls have an CallbackComplete client-side event, so you would handle the callback event, return a result to the control, and use the CallbackComplete event to set the results message label’s text value.

However, the ASPxButton does NOT have an CallbackComplete event that you can use (inconvenient!). The way around this is to use an ASPxCallback control.

1) Add an ASPxCallback control to your page. Add text to the control’s client-side CallbackComplete event to update the results label.

<dx:ASPxCallback ID="cbSaveResults" runat="server" ClientInstanceName="cbSaveResults" OnCallback="cbSaveResults_Callback">
	<ClientSideEvents CallbackComplete="function(s, e) {
				lblResults.SetText(e.result);
			}" />
</dx:ASPxCallback>

 
2) Add a method to the code-behind to handle the callback:

protected void cbSaveResults_Callback(object source, DevExpress.Web.ASPxCallback.CallbackEventArgs e)
{
	string returnMessage = "";

	try
	{
		// PUT CODE HERE TO PROCESS THE FORM

		returnMessage = "Your Changes have been saved.";
	}
	catch (Exception ex)
	{
		returnMessage = String.Format("There was a problem saving your changes. The error message was '{0}'", ex.Message);
	}

	e.Result = returnMessage;
}

 
3) Finally, add an ASPxButton to your page and add code to its client-side Click event to call the ASPxCallback control’s server-side OnCallback event (and blank the results label). Don’t forget to set the ASPxButton’s AutoPostBack=”False”!

<dx:ASPxButton ID="btnSaveResults" runat="server" Text="Save" AutoPostBack="False">
	<ClientSideEvents Click="function(s, e) {
				lblStatus.SetText('');
				cbSaveResults.PerformCallback();
			}" />
</dx:ASPxButton>

 
That’s all. When your user clicks the button, the ASPxButton actually throws the processing over to the ASPxCallback control, which then finishes and updates the results label. ALMOST as good as if DevExpress had included the functionality into the ASPxButton itself.

Advertisements

Written by Jim McMullen

July 18, 2013 at 4:20 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: