Skip to content

Add interop API to ElementReference #61488

@oroztocil

Description

@oroztocil

Summary

Consider adding interop (extension) methods such as InvokeAsync and SetValueAsync to ElementReference. This would make it easier to manipulate DOM elements from .NET without wrapper JS code.

Motivation and goals

For .NET 10, we are extending the API for the Blazor JS interop (as discussed in #31151) in order to reduce the need to write wrapper JS code. To further support this goal, could we add similar (extension) methods that the IJSObjectReference has to the ElementReference?

Currently, there is a special baked-in support for focusing the element implemented as the extension method FocusAsync. To access other functions and properties of a DOM element, one needs to write a JS function that takes the ElementReference as an argument, and invoke such function using InvokeAsync on IJSRuntime or IJSObjectReference. (See offical docs or community tutorials.)

This workflow could be streamlined by adding support for calling InvokeAsync as well as the new GetValueAsync and SetValueAsync methods directly on the ElementReference instance.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-blazorIncludes: Blazor, Razor Componentsdesign-proposalThis issue represents a design proposal for a different issue, linked in the descriptionenhancementThis issue represents an ask for new feature or an enhancement to an existing onefeature-blazor-jsinteropThis issue is related to JSInterop in Blazor

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions