Directives
A directive can be considered as a very important part of the core of Angular. Directives extend the functionality of HTML using a new syntax. With it we can use logic that will be executed in the DOM
Client Click
Adds supports for Button and LinkButton [System.Web.UI.WebControls.IButtonControl] OnClientClick property.
Reference documentation:
Implementation Details
Directive Selector: ‘wmClientClick’
Client Click scenarios
Scenario 1 - Regular JS code:
onClientClick = 'console.log();'
Scenario 2 - Function call:
onClientClick = 'download()'
Scenario 3 - JS code or function call using 'return':
onClientClick = 'return myFunction()'
If the onClientClick script doesn't include a 'return', it will always trigger the Control's Click event and if the Control is inside a GridView or a DataList, it will also trigger the RowCommand or the OnItemCommand respectively.
In case the script includes the 'return', it may or may not trigger the events, depending on the result. For example, in the 3rd case scenario, if myFunction() returns true, it will trigger the events.
PME Support
Properties
onClientClick: string
Used to save the onClientClick script.
eventsContext: any
Used to save the context of the events. If the onClientClick script is a function call, the directive will validate and look for a method in this context to be executed.
Methods
onClientClickHandler
This handler validates the different scenarios and executes the onClientClick script and triggers the click events if necessary.
getClientClickFunction
In case the onClientClick script is a function call, this method needs to be called. It returns an arrow function with the correct parameters and context, ready to be executed.
triggerClickMechanism
Triggers the control's click and the GridView or DataList command.
executeAsJSCode
Executes JS code that doesn't have a reference to any function.
For example:
console.log();
var x=2; return true;
getFunctionParams
Returns a string array with all the parameters in the onClientClick script function.
For example:
getFunctionParams('myFunction('param1')') => returns ['param1']
setThisContext
Sets the context if we have a 'this' reference in the function parameters.
For example:
setThisContext(['this', 'param1'], myContext) => returns [myContext, 'param1']
*The context is been set as event.target in the getClientClickFunction method.
Reference to the complete directive documentation: ClientClickDirective
Last updated