Captcha in ListView InsertItemTemplate

[Tom]

Can the RadCaptcha work in the InsertItemTemplate of a ListView?

When I try to insert a record the ErrorMessage is displayed.  I'm guessing I'll have to move the fields to insert a new record out of the ListView, but I thought I'd check to see if there's a workaround.

Thanks!

[Marin Bratanov]

Hi Tom,

You can validate an external textbox and manually check the previous text from the capcha against the user input:

protected void RadListView1_ItemCommand(object sender, RadListViewCommandEventArgs e)
{
    if (e.CommandName == RadListView.PerformInsertCommandName)
    {
        RadCaptcha captcha = e.ListViewItem.FindControl("RadCaptcha1") as RadCaptcha;
        TextBox textbox = e.ListViewItem.FindControl("Textbox1") as TextBox;
        if (captcha != null && textbox != null)
        {
            if (captcha.CaptchaImage.PreviousText.ToLowerInvariant() == Request.Form[textbox.UniqueID])
            {
                captcha.IsValid = true;
            }
            Label1.Text = "Captcha is valid: " + captcha.IsValid;
        }
    }
}

<InsertItemTemplate>
    <fieldset>
        <legend>Company:
            <asp:TextBox ID="txtBoxCompany" runat="server" Text='<%# Bind("CompanyName") %>'></asp:TextBox>
            <asp:RequiredFieldValidator ID="rvCompany" runat="server" ControlToValidate="txtBoxCompany"
                ErrorMessage="Please enter company" Display="Dynamic"></asp:RequiredFieldValidator>
        </legend>
        <telerik:RadCaptcha ID="RadCaptcha1" runat="server" CaptchaImage-RenderImageOnly="true" ValidatedTextBoxID="Textbox1">
        </telerik:RadCaptcha>
        <asp:TextBox ID="Textbox1" runat="server" />
        <table cellpadding="0" cellspacing="0" width="95%">
            <tr>
                <td style="width: 75%">
                    <table cellpadding="1" cellspacing="0">
                        <tr>
                            <td style="width: 25%">
                                Name:
                            </td>
                            <td style="width: 75%">
                                <asp:TextBox ID="txtBoxName" runat="server" Text='<%# Bind("ContactName") %>'></asp:TextBox>
                                <asp:RequiredFieldValidator ID="rvName" runat="server" ControlToValidate="txtBoxName"
                                    ErrorMessage="Please enter name" Display="Dynamic"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Title:
                            </td>
                            <td>
                                <asp:TextBox ID="txtBoxTitle" runat="server" Text='<%# Bind("ContactTitle") %>'></asp:TextBox>
                                <asp:RequiredFieldValidator ID="rvTitle" runat="server" ControlToValidate="txtBoxTitle"
                                    ErrorMessage="Please enter title" Display="Dynamic"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                City:
                            </td>
                            <td>
                                <asp:TextBox ID="txtBoxCity" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
                                <asp:RequiredFieldValidator ID="rvCity" runat="server" ControlToValidate="txtBoxCity"
                                    ErrorMessage="Please enter city" Display="Dynamic"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Country:
                            </td>
                            <td>
                                <asp:TextBox ID="txtBoxCountry" runat="server" Text='<%# Bind("Country") %>'></asp:TextBox>
                                <asp:RequiredFieldValidator ID="rvCountry" runat="server" ControlToValidate="txtBoxCountry"
                                    ErrorMessage="Please enter country" Display="Dynamic"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Phone:
                            </td>
                            <td>
                                <asp:TextBox ID="txtBoxPhone" runat="server" Text='<%# Bind("Phone") %>'></asp:TextBox>
                                <asp:RequiredFieldValidator ID="rvPhone" runat="server" ControlToValidate="txtBoxPhone"
                                    ErrorMessage="Please enter phone" Display="Dynamic"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="vertical-align: top; text-align: right; width: 25%;">
                    <asp:Button ID="btnPerformInsert" runat="server" Text="Insert" CommandName="PerformInsert"
                        Width="70px"></asp:Button>
                    <asp:Button ID="BtnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false"
                        Width="70px"></asp:Button>
                </td>
            </tr>
        </table>
    </fieldset>
</InsertItemTemplate>

I am also adding here a simple page I used for testing and a short video that shows proper behavior. Note that this is a simple example and does not have the actual functionality related to the listview (e.g. actual datasource update, exiting insert mode after successful update). The listview is taken from this demo.

If this still does not work for you, you can move the insert form out of the listview and manually update the datasource.

Regards,
Marin Bratanov
Telerik