Client-Side Implementation Example

This topic provides code samples for the basic integration of Code Effects into a client-centric web application (commonly called an Ajax application). This type of web application has become very popular, because it closely resembles the behavior of desktop applications while still running inside of a web client.

Note that this is an intentionally simplified example. Code Effects component comes with a much richer client-side API that is easy to understand and work with. Our demo projects demonstrate the full implementation of Code Effects using Ajax on both ASP.NET and MVC platforms.

The example below shows how to add Code Effects component to a client web page, and save rules to your storage. As with other implementation examples on this site, this topic will use the custom .NET class called Person as a source object. This class declares three public properties that will become rule fields, and two public void methods that we can use as rule actions.

using CodeEffects.Rule.Attributes;

namespace TestLibrary
{
	public class Person
	{
	public string FirstName { get; set; }
	public string MiddleName { get; set; }
	public string LastName { get; set; }

		[Action("Action one")]
	public void ActionOne() { /* some action logic goes here */ }

		[Action("Action two")]
	public void ActionTwo() { /* some other action logic goes here */ }
	}
}

Even though most of the functionality of Rule Editor is implemented on the client, Code Effects component still needs some data from the server. The easiest way to connect the client with your server, and load the data, is to use any client framework that includes implementation of the xmlHttpRequest object, such as Angular, React, and so on.

To begin, we need to register Code Effects component on a page. Note that in "ajaxed" ASP.NET pages we only need to give the Rule Editor its server ID, and tell it that it's going to be rendered in the ClientOnly mode - the rest will be done on the server:

<%@ Register assembly="CodeEffects.Rule"
	namespace="CodeEffects.Rule.Asp" tagprefix="rule" %>

<rule:RuleEditor ID="ruleEditor" runat="server" ClientOnly="true" />

We also need to create some JavaScript functions, and initialize certain client objects when the page is done loading. Add the following code to your page either inside of a script tag or as an included script. At first, the code may look large and bulky, but if you look closely, you'll realize the it contains more comments than actual code lines:

// Global variable to hold reference to Web Rule
var codeeffects;
 
window.onload = function ()
{
	// The global shortcut $ce gets a reference to
	// Web Rule by its server ID (not its client ID)
	codeeffects = $ce("ruleEditor");
 
	// Set action delegates that Web Rule calls on save, load or delete the rule.
	codeeffects.setClientActions(loadRule, deleteRule, saveRule);
 
	// Finally, call the GetSettings() web method to load Web Rule's client settings
	loadSettings();
};
 
function loadSettings()
{
	codeeffects.clear();
	// Call the LoadSettings web method declared in the next code example
	post("/LoadSettings", null, settingsLoaded);
};
 
function settingsLoaded(data)
{
	// ASP.NET web methods send their data as wrapped property "d"
	data = data.d || data;
	// Pass the settings data to Web Rule
	codeeffects.loadSettings(data);
};
 
// Action method that saves the new or existing rule in storage.
// It has to define one parameter. See the Ajax API help topic for details
function saveRule(ruleData)
{
	// Call the SaveRule web method, passing the ruleData as
	// a serialized JSON string. ruleSaved is the delegate
	// that handles server response. The JSON object serializes the rule;
	// This object is new in modern browsers.
	// You can use anything else to serialize the data.
	post("/SaveRule", JSON.stringify({ ruleData: ruleData }), ruleSaved);
};
 
function ruleSaved(data)
{
	data = data.d || data;
	if (data.IsRuleEmpty)
	{
	// The Rule Area is empty. Do something about it.
	}
	else if (!data.IsRuleValid)
	{
	// The rule is invalid. Pass the received invalid client data to Web Rule
		codeeffects.loadInvalids(data.ClientInvalidData);
	}
	else
	{
	// Server returns rule ID using the Output property of ProcessingResult C# type.
	// Web Rule needs this ID if the saved rule was a new rule.
	// Tell Web Rule that the rule has been saved successfully by calling
	// its "saved" method and passing it the rule's ID.
		codeeffects.saved(data.Output);
	}
};
 
function post(url, data, delegate)
{
	// Any implementation of posting back to the server and handling errors goes here.
	// See any of our demo projects for jQuery implementation
};

Now we need to create web methods used in the above script to handle the server-side processing. In this example, we assume that ASP.NET is used on the server, and therefore we add web methods to the code-behind of the current page. See the MVC demo project for MVC server code.

using System.Web.UI;
using System.Web.Services;
using CodeEffects.Rule.Common;
using CodeEffects.Rule.Asp;
using CodeEffects.Rule.Demo.Asp.Common;
 
namespace CodeEffects.Rule.Demo.Asp
{
	public partial class Ajax : Page
	{
		[WebMethod(false)]
	public static string LoadSettings()
		{
	// Get the Web Rule
	RuleEditor ce = GetControl();
 
	// Return Web Rule settings back to the client
	return ce.GetClientSettings();
		}
 
		[WebMethod(false)]
	public static ProcessingResult SaveRule(string ruleData)
		{
	// Define the result
	ProcessingResult r = new ProcessingResult();
 
	// Get Web Rule
	RuleEditor ce = GetControl();
 
	// Load client rule data into the Web Rule
			ce.LoadClientData(ruleData);
 
	if (ce.IsEmpty)
			{
	// The rule is empty
				r.IsRuleEmpty = true;
			}
	else if (!ce.IsValid)
			{
	// The rule is invalid. Load invalid data for the client
				r.IsRuleValid = false;
				r.ClientInvalidData = ce.GetClientInvalidData();
			}
	else
			{
	// Even though we don't use RuleEditor's events in Ajax apps
	// it's still convenient to operate with the save arguments
	SaveEventArgs e = ce.GetSaveArguments();
 
	// Save the rule
	YourRuleStorage.SaveRule(e);
 
	// Output the rule ID (new rule or not)
				r.Output = e.RuleID;
			}
	return r;
		}
 
	private static RuleEditor GetControl()
		{
	RuleEditor ce = new RuleEditor();
 
	// The iD must be the same as in HTML
			ce.ID = "ruleEditor";
 
			ce.Mode = RuleType.Execution;
			ce.ClientOnly = true;
 
	// This is where we define the source object
			ce.SourceAssembly = "TestLibrary";
			ce.SourceType = "TestLibrary.Person";
 
	return ce;
		}
	}
 
	// Model class that holds the rule saving response data (Not part of Web Rule)
	public class ProcessingResult
	{
	public bool IsRuleEmpty { get; set; }
	public bool IsRuleValid { get; set; }
	public string Output { get; set; }
	public string ClientInvalidData { get; set; }
 
	public ProcessingResult()
		{
	this.IsRuleEmpty = false;
	this.IsRuleValid = true;
		}
	}
}

That is all you need to create and save Code Effects business rules using Ajax.