Captcha Mvc [Изменяем шаблон капчи используя partial-view]

Вы здесь: Open Source / Captcha Mvc /Настройка/ Изменяем шаблон капчи используя partial-view

Мы уже рассмотрели как создавать капчу, но что если мы хотим использовать свой шаблон для отображения капчи?
Для этого мы можем использовать partial-view доступные в MVC, здесь я коротко расскажу, как это сделать.
Для начала рассмотрим методы, которые позволяют использовать partial-view:

Html.Captcha(int, string, ViewDataDictionary = null, params ParameterModel[]) - количество символ капчи равно первому аргументу, второй аргумент принимает название partial-view для отображения капчи. Третий аргумент принимает экземпляр класса ViewDataDictionary для partial-view.
Html.Captcha(int, string, string, ViewDataDictionary = null, params ParameterModel[]) - количество символ капчи равно первому аргументу, второй аргумент принимает название partial-view для отображения капчи, третий аргумент принимает название partial-view для отображения скриптов для капчи. Четвертый аргумент принимает экземпляр класса ViewDataDictionary для partial-view.
Html.MathCaptcha(string, ViewDataDictionary = null, params ParameterModel[]) - первый аргумент принимает название partial-view для отображения капчи. Второй аргумент принимает экземпляр класса ViewDataDictionary для partial-view.
Html.MathCaptcha(string, string, ViewDataDictionary = null, params ParameterModel[]) - первый аргумент принимает название partial-view для отображения капчи, второй аргумент принимает название partial-view для отображения скриптов для капчи. Третий аргумент принимает экземпляр класса ViewDataDictionary для partial-view.

Все что от нас требуется это создать partial-view, и вызвать один из методов выше, передав в него имя partial-view.
Пример того как выглядит partial-view для обычной капчи по умолчанию:

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

Пример того как выглядит partial-view для математической капчи по умолчанию:

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

Вы можете изменять их, как вам нужно, но форма, где содержится капча всегда должна содержать поле для ввода символов, с именем Model.InputElementId, и поле со значением токена Model.TokenValue с именем Model.TokenElementId.