Client-Side Code
Implement Client-Side Code
UX Studio enables you to write client-side code, which you can add to a form’s markup. The sample below shows code that is executed when a client event occurs, in this case, a user changes a field value.
Client Event
<sq:TextBox Width="195px" ID="RadTextBox1" runat="server" Label="Single line: "EmptyMessage="type here" InvalidStyleDuration="100" > <ClientEvents OnValueChanged="ValueChanged" /> </sq:TextBox>
You can register to a wide selection of events for each control you add to the form. The sample below shows how to add JavaScript code to the markup, which is executed when an event occurs, in this case, concatenating the old and new values (see the event above) and placing them into a new div.
Concatenating Old and New Values
<script type="text/javascript"> function ValueChanged(sender, e) { var div = document.getElementById("div1"); div.innerHTML = "ValueChanged (Client Event): OldValue=" + e.get_oldValue() + "; NewValue=" + e.get_newValue() + ";"; e.set_cancel(true); } </script>
Find a Control on the Client Side
Cora SeQuence exposes the following expression parameters in form view expressions.
Expression Parameter | Description |
---|---|
@ncontainer | Reference to a naming container that contains an expression. |
@bcontainer | Reference to a binding container that contains an expression. |
@template | Reference to the template (form view) that contains an expression. |
@page | Reference to a page. |
The following code snippet demonstrates how to find a grid control with ID Grid1 on the client side using the @ncontainer parameter:
<%@ Control %> <script type="text/javascript"> function pageLoad() { var grid = $find("<%= { @ncontainer.FindControl("Grid1").ClientID } %>"); } </script> <sq:Grid runat="server" ID="Grid1"></sq:Grid>
Server-Side Code
Implement Server-Side Code
Cora SeQuence enables you to implement server-side code to use in your forms. This functionality enables you to use all available .NET events for form controls.
For example, you can add an event to a button control, which renders a grid automatically when the user clicks that button.
Sq.Grid resultsGridView = (Sq.Grid)this.FindControl("ResultGridView"); if (ds is IEnumerable) { primitiveLable.Visible = false; resultsGridView.Visible = true; resultsGridView.DataSource = ds; resultsGridView.DataBind(); }
Procedure to implement server-side code
- Create a .NET project with the code, and inherit from Cora SeQuence contols by adding the following lines.
using System; using System.Collections.Generic; using System.Linq; using System.Text; using PNMsoft.Sequence.Forms.Web.UI; using System.Web.UI.WebControls; using PNMsoft.Sequence.Linq; using Sq = PNMsoft.Sequence.Forms.Web.UI.Controls; using System.Collections; using PNMsoft.Sequence.Web.UI; namespace SequenceEx.Forms.Samples
- Compile this project, and place the
.dll
file in the GAC of the Cora SeQuence server. - In UX Studio, access the form markup editor, and change the header to inherit from the assembly you created.
<%@ Control Inherits="SequenceEx.Forms.Samples.CustomFormControl,SequenceEx.Forms.Samples,Version=1.0.0.0, Culture=neutral, PublicKeyToken=524345e6dd86aefe"%>
Sample Project
This is a sample project server-side code that includes several events.