In a nutshell, how can I make this code better:

@if( this.OnClick_Async is not null ) {
    <div component-name="TermDisplay" class="basic"
            @onclick=@(async e => await this.OnClick_Async(e))
            onmouseover="if(@(this.Term.Context is not null) == true && @(this.Term.Context.Context is not null) == true) { window.DisplayMousePopup(event, `@this.Term.Context.Context.Term`); }">
        @this.Term.ToString()
    </div>
} else {
    <div component-name="TermDisplay" class="basic"
            onmouseover="if(@(this.Term.Context is not null) == true && @(this.Term.Context.Context is not null) == true) { window.DisplayMousePopup(event, `@this.Term.Context.Context.Term`); }">
        @this.Term.ToString()
    </div>
}

Because the attributes use Blazor, I'm not sure if I can simply cop out with attribute splatting.

Edit: I realize I may be asking the wrong question for the given code, but the main question remains.

In a nutshell, how can I make this code better:

@if( this.OnClick_Async is not null ) {
    <div component-name="TermDisplay" class="basic"
            @onclick=@(async e => await this.OnClick_Async(e))
            onmouseover="if(@(this.Term.Context is not null) == true && @(this.Term.Context.Context is not null) == true) { window.DisplayMousePopup(event, `@this.Term.Context.Context.Term`); }">
        @this.Term.ToString()
    </div>
} else {
    <div component-name="TermDisplay" class="basic"
            onmouseover="if(@(this.Term.Context is not null) == true && @(this.Term.Context.Context is not null) == true) { window.DisplayMousePopup(event, `@this.Term.Context.Context.Term`); }">
        @this.Term.ToString()
    </div>
}

Because the attributes use Blazor, I'm not sure if I can simply cop out with attribute splatting.

Edit: I realize I may be asking the wrong question for the given code, but the main question remains.

• asp-core
• blazor
• -8.0

Share Improve this question Follow edited Nov 17, 2024 at 18:51 hamstar asked Nov 17, 2024 at 5:35 hamstarhamstar 30922 silver badges1010 bronze badges 7

• Shorter: @onclick=@(e => this.OnClick_Async(e)), eliding async/await – Henk Holterman Commented Nov 17, 2024 at 8:18
• Shorter: "if(@(this.Term.Context?.Context is not null) == true)" using ?. – Henk Holterman Commented Nov 17, 2024 at 8:19
• @HenkHolterman doesn't removing the async specification affect the synchronicity? though i do think using @onclick=this.OnClick_Async ought to work... – hamstar Commented Nov 17, 2024 at 15:30
• No, it won't change the awaitability. It is a little smaller and faster. Google 'eliding async await' . – Henk Holterman Commented Nov 17, 2024 at 16:11
• After your update the question is really unclear. Post better code. – Henk Holterman Commented Nov 17, 2024 at 19:16

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 1

On the assumption that OnClick_Async is probably a parameter Func or EventCallback, here's how you can change your specific case.

I simplified the onmouseover to provide a Minimal Reproducible Example. You'll need to add your code back in.

<div component-name="TermDisplay" class="basic"
     @onclick="this.OnButtonClick"
     onmouseover="window.DisplayMousePopup(event, `@_value`);">
    @_value
</div>

@code {
    [Parameter] public Func<MouseEventArgs, Task>? OnClick_Async { get; set; }
    [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }

    private string _value = "Hello Blazor";

    private async Task OnButtonClick(MouseEventArgs e)
    {
        // if using a Event
        await this.OnClick.InvokeAsync(e);

        // If using a Func
        if (this.OnClick_Async is not null)
            await this.OnClick_Async.Invoke(e);

        // or if there's nothing to await
        this.OnClick_Async?.Invoke(e);
    }
}

The alternative in more complex situations is to build a RenderFragment using the RenderTreeBuilder. Here's the MS Docs article on the subject:

https://learn.microsoft/en-us/aspnet/core/blazor/advanced-scenarios?view=aspnetcore-8.0