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.
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)
@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)
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:
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