About .NET, ASP.NET, MVC, C#, WPF, WCF and everything related to .NET and more.

Captcha Mvc [Change the default layout]

We have already considered how to create a captcha, but what if we want to use our template to render a captcha? For do this we can use a partial-view that available in MVC, in an article I show how to do it. First, consider methods to create captcha that lead to use a partial-view:

  • Html.Captcha(int, string, ViewDataDictionary = null, params ParameterModel[]) - the length of characters will be equal to the first parameter. Second parameter takes a partial-view to render captcha. Third parameter takes a ViewDataDictionary for the partial-view.
  • Html.Captcha(int, string, string, ViewDataDictionary = null, params ParameterModel[]) - the length of characters will be equal to the first parameter. Second parameter takes a partial-view to render captcha. Third parameter takes a partial-view to render scripts of captcha. Fourth parameter takes a ViewDataDictionary for the partial-view.
  • Html.MathCaptcha(string, ViewDataDictionary = null, params ParameterModel[]) - first parameter takes a partial-view to render captcha. Second parameter takes a ViewDataDictionary for the partial-view.
  • Html.MathCaptcha(string, string, ViewDataDictionary = null, params ParameterModel[]) - first parameter takes a partial-view to render captcha. Second parameter takes a partial-view to render scripts of captcha. Third parameter takes a ViewDataDictionary for the partial-view.
Now all you have to do is create a partial-view and call one of the methods above passing in the name of a partial-view.
Example of partial-view for a plain captcha:
@model CaptchaMvc.Models.DefaultBuildInfoModel
<img id="@Model.ImageElementId" src="@Model.ImageUrl" />
@Html.Hidden(Model.TokenElementId, Model.TokenValue)
<br />
@{
    string id = Guid.NewGuid().ToString("N");
    string functionName = string.Format("______{0}________()", Guid.NewGuid().ToString("N"));
    <script type="text/javascript">

        $(function () {
            $('#@id').show();
    });


    function @functionName {
            $('#@id').hide();
        $.post("@Model.RefreshUrl", { @Model.TokenParameterName: $('#@Model.TokenElementId').val() }, 
            function () {
                $('#@id').show();
            });
        return false;
    }
    </script>

    <a href="#@Model.InputElementId" id="@id" onclick="@functionName" style="display: none;">@Model.RefreshButtonText</a> 
}

<br />
@Model.InputText
<br />
@if (Model.IsRequired)
{
    @Html.TextBox(Model.InputElementId, null, new Dictionary<string, object>
                                                  {
                                                      {"data-val", "true"},
                                                      {"data-val-required", Model.RequiredMessage}
                                                  })
}
else
{
    @Html.TextBox(Model.InputElementId)
}
@Html.ValidationMessage(Model.InputElementId)
Example of partial-view for a mathematical captcha:
@model CaptchaMvc.Models.MathBuildInfoModel

<img id="@Model.ImageElementId" src="@Model.ImageUrl" />
@Html.Hidden(Model.TokenElementId, Model.TokenValue)
<br />
@{
    string id = Guid.NewGuid().ToString("N");
    string functionName = string.Format("______{0}________()", Guid.NewGuid().ToString("N"));
   <script type="text/javascript">

    $(function () {
        $('#@id').show();
    });


    function @functionName {
        $('#@id').hide();
        $.post("@Model.RefreshUrl", { @Model.TokenParameterName: $('#@Model.TokenElementId').val(), 
@Model.MathParamterName: "0" }, 
            function () {  $('#@id').show();
        });
        return false;
    }
</script>

<a href="#@Model.InputElementId" id="@id" onclick="@functionName" style="display: none;">@Model.RefreshButtonText</a> 
}

<br />
@Model.InputText
<br />
@if (Model.IsRequired)
{
    @Html.TextBox(Model.InputElementId, null, new Dictionary<string, object>
                                                  {
                                                      { "data-val", "true" }, 
                                                      { "data-val-required", Model.RequiredMessage }
                                                  })
}
else
{
    @Html.TextBox(Model.InputElementId)   
}
@Html.ValidationMessage(Model.InputElementId)
You can change them as you need, but form that contains a captcha should always contain a fields to input symbols with name Model.InputElementId and field with a value of Model.TokenValue with name Model.TokenElementId.

Comments

Verification code of this page there are other models, if the model verification code in Canada, it is a view of the two models, how to submit ah

@model CaptchaMvc.Models.MathBuildInfoModel
System.NullReferenceException

Here's how you include multiple captchas of CaptchaMvc in 1 page:
The image:

<img id="@Model.ImageElementId" src="@Model.ImageUrl" class="captcha @(id + "-img")" />
The post to the server:
$.post("@Model.RefreshUrl", { @Model.TokenParameterName: $('#@Model.TokenElementId').val() },
                function (data) {
                    var script = data.replace("#@Model.ImageElementId", ".@(id + "-img")");
                    eval(script);
                    $('#@id').show();
                }, "text");

My jQuery script is included on the bottom of my page. What should I do? I get an error that the $ is not defined.

Hi

what is value of : CaptchaUtils.ImageGenerator.Background

tks

does not work in Chrome ver. 38.0.2125.104, downloaded mvc 5 samples from https://captchamvc.codeplex.com/releases/view/114341, when running MVC 5 examples in VS 2013 and Chrome, the captcha is no rendered correctly

Hi Leon,
I checked all examples using Chrome ver. 38.0.2125.104 with VS 2013 and everything works fine.
Can you provide more information about the problem?

why there are no examples?
cant you provide simple chtml and cs files so we know what exactly to write and where to write?
i created partial view and pasted your script. ok but then what? what i have to do next?

Hi John,

You can download an example from this link.

Can you please provide an example, showing the use of custom controls with ajax?

How to change value of InputText, RefreshButtonText, RequiredMessage, ... when using partial view for a mathematical captcha Html.MathCaptcha(string, ViewDataDictionary = null, params ParameterModel[])?

Is there any way I can modify the color of captcha? like background color or text color?


thanks

Leave a Reply
*bold*
_italics_
+underline+
* Bullet List
** Bullet List 2
# Number List
## Number List 2
{"Do not apply formatting"}
{code:language} code here {code:language}.
Supports: aspx c#, c#, c++, html, sql, xml
[url:http://www.example.com]