I'm trying to create custom Input in Blazor 8 Server. This is what im doing:

@inject HttpClient HttpClient
@inject IConfiguration Configuration

<InputText hidden @bind-Value=Value id="recaptcha-token" />
<div class="g-recaptcha" data-sitekey="site key"></div>

<script>
const input = document.getElementById('recaptcha-token');
input.value = "";
function onRecaptchaSuccess(token) {
const input = document.getElementById('recaptcha-token');
input.value = token;
}
</script>
<script src=".js? 
onload=onloadCallback&render=explicit" async defer></script>
<script>
var onloadCallback = function () {
grecaptcha.render(document.querySelector('.g-recaptcha'), {
sitekey: 'site key',
callback: onRecaptchaSuccess
});
};
</script>

@code {
[SupplyParameterFromForm]
private string Value { get; set; }

public async Task<bool> Validate()
{
    Console.WriteLine(Value);
    if (Value == string.Empty)
    {
        Value = string.Empty;
        return false;
    }
    var values = new Dictionary<string, string>
    {
        { "secret", "secret" },
        { "response", Value }
    };
    var content = new FormUrlEncodedContent(values);

    var response = await HttpClient.PostAsync(";, content);
    var responseString = await response.Content.ReadAsStringAsync();

    if (!responseString.Contains("true"))
    {
        return false;
    }

    Value = string.Empty;
    return true;
}

This is my custom component. I want to two way bind Values property into

<EditForm></EditForm>

But when I make my property a [Parameter], I'm getting this error:

ArgumentException: The renderer does not have a component with ID 28.

This is what I added to my custom component:

[Parameter] 
public string Value { get; set; }

[Parameter] 
public EventCallback<string> ValueChanged { get; set; }

And this is how I use it:

<GoogleRecaptcha @ref="googleRecaptcha" @bind-Value="recaptchaToken"></GoogleRecaptcha>

If anyone has any ideas - let me know. Maybe I didn't understand something fundamental, how the Blazor works, how it bind these values. This is in page without any interactivity. This kind of wrapper will be also usable when you want to have consistency and don't want to write the same code multiple times in certain situations.

I'm trying to create custom Input in Blazor 8 Server. This is what im doing:

@inject HttpClient HttpClient
@inject IConfiguration Configuration

<InputText hidden @bind-Value=Value id="recaptcha-token" />
<div class="g-recaptcha" data-sitekey="site key"></div>

<script>
const input = document.getElementById('recaptcha-token');
input.value = "";
function onRecaptchaSuccess(token) {
const input = document.getElementById('recaptcha-token');
input.value = token;
}
</script>
<script src="https://www.google/recaptcha/api.js? 
onload=onloadCallback&render=explicit" async defer></script>
<script>
var onloadCallback = function () {
grecaptcha.render(document.querySelector('.g-recaptcha'), {
sitekey: 'site key',
callback: onRecaptchaSuccess
});
};
</script>

@code {
[SupplyParameterFromForm]
private string Value { get; set; }

public async Task<bool> Validate()
{
    Console.WriteLine(Value);
    if (Value == string.Empty)
    {
        Value = string.Empty;
        return false;
    }
    var values = new Dictionary<string, string>
    {
        { "secret", "secret" },
        { "response", Value }
    };
    var content = new FormUrlEncodedContent(values);

    var response = await HttpClient.PostAsync("https://www.google/recaptcha/api/siteverify", content);
    var responseString = await response.Content.ReadAsStringAsync();

    if (!responseString.Contains("true"))
    {
        return false;
    }

    Value = string.Empty;
    return true;
}

This is my custom component. I want to two way bind Values property into

<EditForm></EditForm>

But when I make my property a [Parameter], I'm getting this error:

ArgumentException: The renderer does not have a component with ID 28.

This is what I added to my custom component:

[Parameter] 
public string Value { get; set; }

[Parameter] 
public EventCallback<string> ValueChanged { get; set; }

And this is how I use it:

<GoogleRecaptcha @ref="googleRecaptcha" @bind-Value="recaptchaToken"></GoogleRecaptcha>

If anyone has any ideas - let me know. Maybe I didn't understand something fundamental, how the Blazor works, how it bind these values. This is in page without any interactivity. This kind of wrapper will be also usable when you want to have consistency and don't want to write the same code multiple times in certain situations.

• -core
• blazor
• blazor-server-side

Share Improve this question Follow edited Mar 25 at 9:31 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Mar 25 at 8:13 furybgfurybg 2355 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

It isn't obvious [to me] from your code where the problem is: possibly in code you aren't showing. Someone else may spot the problem!

To track it down, strip your component down to basics.

Here's a very basic GoogleRecaptcha component and a test page where the binding works. Start with this, build in your functionality, and test along the way.

<div class="mb-2">
    <button class="btn btn-primary" @onclick="OnButtonClick">Click me</button>
</div>

@code {
    [Parameter] public string? Value { get; set; }

    [Parameter] public EventCallback<string> ValueChanged { get; set; }

    private async Task OnButtonClick()
    {
        Value = "Button clicked";
        await ValueChanged.InvokeAsync($"Time:{DateTime.Now.ToLongTimeString()}");
    }
}

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<EditForm Model="_model">
    <GoogleRecaptcha @bind-Value="_model.Value" />
</EditForm>

<div class="alert alert-secondary">
    <pre>Value: @_model.Value</pre>
</div>

@code {
    private Model _model = new Model();

    public class Model
    {
        public string? Value { get; set; }
    }
}