C#•2y ago

❔ How to achieve databinding with render fragments? If at all possible

I know components are a little more suited for this, but this is something I really want to be able to do.

TextInput.razor

<input @bind="Value" @bind:event="oninput" placeholder="Enter text"/>

@code { 
    private string _value;
    [Parameter]
    public string Value
    {
        get => _value;
        set 
        {
            _value = value;
            if (ValueChanged is {HasDelegate: true})
                ValueChanged.InvokeAsync(_value);
        }
    }
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
}

TextInput.razor

<input @bind="Value" @bind:event="oninput" placeholder="Enter text"/>

@code { 
    private string _value;
    [Parameter]
    public string Value
    {
        get => _value;
        set 
        {
            _value = value;
            if (ValueChanged is {HasDelegate: true})
                ValueChanged.InvokeAsync(_value);
        }
    }
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
}

I want to be able to use this on a page but as a renderfragment.

//Can't be used with other two, causes infinite loop
@Example1(TestString1)
<p>@TestString1</p>
// ##################################################
@Example2(TestString2)
<p>@TestString2</p>
@Example3(x => TestString3 = x)
<p>@TestString3</p>
@code {
    private string TestString1 { get; set; }
    private string TestString2 { get; set; }
    private string TestString3 { get; set; }
    private RenderFragment Example1(string str)
    {
        return @<TextInput @bind-Value="str" ></TextInput>;
    }

    private RenderFragment Example2(string str)
    {
        var action = new Action<string>(value => str = value);
        return@<TextInput ValueChanged="action" ></TextInput>;
    }

    private RenderFragment Example3(Action<string> action)
    {
        return @<TextInput ValueChanged="action"  ></TextInput>;
    }
}

//Can't be used with other two, causes infinite loop
@Example1(TestString1)
<p>@TestString1</p>
// ##################################################
@Example2(TestString2)
<p>@TestString2</p>
@Example3(x => TestString3 = x)
<p>@TestString3</p>
@code {
    private string TestString1 { get; set; }
    private string TestString2 { get; set; }
    private string TestString3 { get; set; }
    private RenderFragment Example1(string str)
    {
        return @<TextInput @bind-Value="str" ></TextInput>;
    }

    private RenderFragment Example2(string str)
    {
        var action = new Action<string>(value => str = value);
        return@<TextInput ValueChanged="action" ></TextInput>;
    }

    private RenderFragment Example3(Action<string> action)
    {
        return @<TextInput ValueChanged="action"  ></TextInput>;
    }
}

Currently only Test3 "works". It appears as if the references to the str in Test1 and Test2 are lost. It would be best if I could put the <input/> directly in the RenderFragment and just bind the value to it but I had to create a component to show that it works with ValueChanged

3 Replies

ConnorOP•2y ago

Maybe passing a string into bind=" " isn't correct. Is there such thing a like a Property<string>? Something with a getter and a setter that could be passed in.

ConnorOP•2y ago

See https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-7.0#define-reusable-renderfragments-in-code

ASP.NET Core Blazor performance best practices

Tips for increasing performance in ASP.NET Core Blazor apps and avoiding common performance problems.

Accord•2y ago

Looks like nothing has happened here. I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ How to achieve databinding with render fragments? If at all possible