Captcha in ListView InsertItemTemplate

2 posts, 0 answers
  1. Tom
    Tom avatar
    9 posts
    Member since:
    Aug 2012

    Posted 21 Oct 2013 Link to this post

    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!
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3808 posts

    Posted 24 Oct 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top