ASPxCaptcha.ClientInstanceName Property

Gets or sets the editor’s client programmatic identifier.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.2.dll

Declaration

C#

[DefaultValue("")]
public string ClientInstanceName { get; set; }

VB.NET

<DefaultValue("")>
Public Property ClientInstanceName As String

Property Value

Type	Default	Description
String	String.Empty	A string value that specifies the editor’s client identifier.

Remarks

Use the ClientInstanceName property to specify a unique client-side identifier for an editor. The ClientInstanceName property’s value can be used on the client side to programmatically access the client object, rendered for the editor in client-side script. This property is particularly important in referencing the editor, when it is contained within a naming container (for instance, within an ASPxPageControl‘s page or an ASPxPopupControl‘s window).

If the ClientInstanceName property is not specified, an editor’s client identifier is generated automatically, and equals the value of the editor’s ID property. Note that in this case, client-side programmatic access to the editor by its ID is not allowed when the editor is contained within a naming container.

Special Characters in Client Instance Name

If the ClientInstanceName property contains special characters, for instance, the dot (.), you cannot access a client object by this name. Call the GetByName(name) method to retrieve the client-side object instead.

<dx:ASPxTextBox ... ClientInstanceName="SomeType.SomeProp" />

var txt = ASPxClientControl.GetControlCollection().GetByName("SomeType.SomeProp");  
txt.SetText("Some Text");  

Example

The following part of the ASPxCaptcha - Custom Appearance online demo illustrates how to implement a captcha control with a custom appearance.

In this example, the control’s Refresh Button.ASPxCaptcha and Text Box.ASPxCaptcha are hidden, and their functionaliry is implemented in a custom manner using separate controls (the IMG element, ASPxLabel, ASPxTextBox).

JS

function GetRefreshButton() {
    return document.getElementById("refreshButton");
}        

function OnCaptchaBeginCallback(s, e) {
    var refreshButton = GetRefreshButton();
    refreshButton.src = "Images/refreshButtonAnimated.gif";
}

function OnCaptchaEndCallback(s, e) {
    var refreshButton = GetRefreshButton();
    refreshButton.src = "Images/refreshButton.gif"; 
    tbCode.SetValue("");
...   
}

ASPX

<img id="refreshButton" src="Images/refreshButton.gif" alt="Show another code" title="" 
class="refreshButton" onclick="captcha.Refresh();" />
...
<dx:ASPxCaptcha ID="Captcha" runat="server" SkinID="dummy" ClientInstanceName="captcha" 
CodeLength="6">
    <ChallengeImage BackgroundColor="Transparent" ForegroundColor="#676767" BorderWidth="0"
        Height="72" />
    <ValidationSettings EnableValidation="False">
    </ValidationSettings>
    <TextBox Visible="False" />
    <RefreshButton Visible="False">
    </RefreshButton>
    <LoadingPanel Enabled="False" />
    <ClientSideEvents BeginCallback="OnCaptchaBeginCallback" 
        EndCallback="OnCaptchaEndCallback" />
</dx:ASPxCaptcha>
...
<dx:ASPxLabel ID="lblCode" runat="server" AssociatedControlID="tbCode" Text="Type the code">
</dx:ASPxLabel>
...
<dx:ASPxTextBox ID="tbCode" runat="server" Width="200px" AutoCompleteType="Disabled"
    BackColor="Transparent" ClientInstanceName="tbCode">
    <Border BorderWidth="0px" />
</dx:ASPxTextBox>
...
<dx:ASPxButton ID="btnSubmit" runat="server" Text="Submit" UseSubmitBehavior="true"
    AutoPostBack="true" Width="175px">
</dx:ASPxButton>