What's New?

[CLOSED] ReCaptcha Example

  1. #1
    Mar 07, 2017, 12:02 PM

    [CLOSED] ReCaptcha Example

    Hi,

    I've been looking for an example of how I can show a recaptcha control inside an EXT View.

    If the view is pure ASP.NET we have no problems, but we can't get it to work inside of EXT.

    Thanks!
    Last edited by fabricio.murta; Mar 24, 2017 at 3:50 PM.
  2. #2
    Mar 07, 2017, 1:02 PM
    Hello @dlanza!

    I don't think there should be a problem using captcha with Ext.NET, can you provide us a simplified code illustrating the way you are trying to integrate the captcha to your page so we can suggest you how to do this based on your scenario?

    Please refer to these forum threads if in doubt how to come up with runnable code sample:

    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Mar 07, 2017, 2:58 PM
    Hi,

    thanks for the response.

    We tried inserting the control inside the Content attribute of and ext panel, but we couldn't make it work.

    Also we tried pasting directly the HTML code that would result in showing the captcha and again we came up short. In this case, the captcha doesn't show but if we resize the browser window it appers. We added and Ext.onReady event to update the layout, but it is not until we resize the window the the captcha shows up.
  4. #4
    Mar 07, 2017, 3:56 PM
    Hello @dlanza!

    We can't reproduce the issue here. Adding a re-captcha inside a panel's Content block results in no error at all. Please provide a runnable test case so we can reproduce your issue here and advise you on how to properly do it if there's some mistake, or open an issue if the way you using it triggers a bug.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Mar 07, 2017, 4:12 PM
    Hi,

    and how do you do that? I mean inserting the captcha in the panel's content block.

    I'll try to upload the sample.

    Thanks!
  6. #6
    Mar 07, 2017, 4:17 PM
    Alright, we are looking forward to your sample code!

    Please don't forget to follow the guidelines on the threads linked here to post your sample code!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Mar 07, 2017, 4:41 PM
    After adding Ext.NET MVC and this package to the project https://www.nuget.org/packages/RecaptchaNet/

    Is necessary to add this three keys in the web.config

    <add key="recaptchaPublicKey" value="aaaaa" />
<add key="recaptchaPrivateKey" value="bbbbb" />
<add key="recaptchaApiVersion" value="2" />
    This view, without EXT.NET renders without problems in IE11:

    @using Recaptcha.Web.Mvc;
<html>
<head>
    <title>Test</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    @Html.Recaptcha()
</body>
</html>

    But this one doesn't:

    @using Recaptcha.Web.Mvc;

@{
    var X = Html.X();
}
<html>
<head>
    <title>Test</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    @X.ResourceManager().ShowWarningOnAjaxFailure(false)
    @(X.Viewport()
        .Layout(LayoutType.Border)
        .Items(
            X.Panel()
            .Region(Region.North)
            .Html("- TOP -"),
            X.Panel()
            .Region(Region.Center)
            .Html
            (
                Html.Recaptcha().ToHtmlString()
            )
        )
    )
</body>
</html>
    Here is a screen capture of what IE11 renders:
    Click image for larger version.  Name: IETest.JPG  Views: 60  Size: 19.5 KB  ID: 24889

    Hope this helps!
  8. #8
    Mar 07, 2017, 7:27 PM
    You should use a content block, not the Html setting which is not parsed.

    .Content
(
    @<text>
        @Html.Recaptcha()
    </text>
)
    Hope this helps!
  9. #9
    Mar 08, 2017, 7:45 AM
    That did the trick, thank you!
  10. #10
    Mar 08, 2017, 2:21 PM
    Hello @dlanza!

    Glad it helped, and thanks for the feedback! :)
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. Control with type 'Recaptcha.RecaptchaControl' cannot be handled by layout
    By xtremexploit in forum 2.x Help
    Replies: 2
    Last Post: Jun 06, 2012, 3:38 PM

Tags for this Thread

Posting Permissions