The Self-Taught Programmer

Recipes from real-world experience with asp.net.

Posts Tagged ‘AJAX

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

How to Pass Extra Parameters When Using AJAX Toolkit CascadingDropDowns with a Database

leave a comment »

The Situation:

You have set up your CascadingDropDowns as shown on the ASP.NET AJAX Control Toolkit documentation here, using a web service to retrieve and populate your dropdowns. However, in addition to the value of the first dropdown, you need to pass other parameters to the web service to be used in your query.

A Solution:

The CascadingDropDown control has a mechanism for this — ContextKey. You can add it like at design time like this (note the last 2 lines):

<ajaxToolkit:CascadingDropDown
	ID="CascadingDropDown3"
	runat="server"
	TargetControlID="dd2"
	ParentControlID="dd1"
	PromptText="Please select blah blah blah"
	ServiceMethod="GetDDdata"
	ServicePath="WebSerivce.asmx"
	Category="ObjectName"
	UseContextKey="true"
	ContextKey="0" />

This works great for passing a single parameter. And you can set it dynamically in the code-behind like this (make sure to include a “using AjaxControlToolkit;” in the code-behind):

CascadingDropDown ccd = (CascadingDropDown)CascadingDropDown2;
ccd.ContextKey = avalues + ";";

But what if you want to pass more than a single value?

You can always set ContextKey to a delimited string, which will work just fine. But the AJAX toolkit’s CascadingDropDown control has a function called “ParseKnownCategoryValuesString(string)”, which accepts a string delimited in this way:

“key:value;key:value;key:value;”

And returns a StringDictionary containing the keys and their values, so you can easily use them in your code.

Here’s an example of how to use this in your web service code:

[WebMethod]
public CascadingDropDownNameValue[] GetDDdata(string knownCategoryValues, string category, string contextKey)
{
	// The Value of the parent DropDown is in knownCategoryValues
	StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
	int someId;
	if (!kv.ContainsKey("SomeItemName") ||
		!Int32.TryParse(kv["SomeItemName"], out someId))
	{
		return null;
	}

	// Other parameters are in contextKey. Must be formatted the same as knownCategoryValues
	//  (i.e., "key:value;key:value;key:value;")
	StringDictionary ck = CascadingDropDown.ParseKnownCategoryValuesString(contextKey);

	string SomeOtherThing = "";
	if (!ck.ContainsKey("SomeOtherThing") || ck["SomeOtherThing"] == null)
	{
		return null;
	}
	else
	{
		SomeOtherThing = ck["SomeOtherThing"];
	}
	
	// ... do some other processing here ...
	
	return result;
}

Written by Jim McMullen

November 1, 2012 at 12:14 pm

Posted in How-To

Tagged with ,