.NET Tips and Tricks

Blog archive

An Ad Hoc Approach to Passing Elements from Blazor to JavaScript

In a previous column I described an architectural, design-pattern-based approach to integrating JavaScript and Blazor code. However, if you just need to pass one element from your Blazor page to some JavaScript functions, that approach might be overkill.

Instead of adopting my approach, when you declare an HTML element in Blazor, you can add a ref attribute to the element in order to assign a "Blazor-accessible" name to the element. This HTML, for example, assigns the name mytextbox to a textbox:

<input type="text" id="atextbox" ref="mytextbox" value="Peter" />

You can now, in your Blazor code, declare a field as an ElementRef object with the same name you used in the ref attribute -- Blazor will automatically bind that ElementRef field to the HTML element. You can't do much with an ElementRef variable in Blazor ... except pass it to a JavaScript function. This code, for example, passes the textbox to a JavaScript function called SetName:

@functions 
{
  ElementRef mytextbox;

  protected override Task OnInitAsync()
  {
    await JSRuntime.Current.InvokeAsync<string>("SetName", mytextbox );

Within the JavaScript function you can treat the element as an HtmlElement and access its properties. As an example, this JavaScript code sets the textbox's value property to "Vogel":

function SetName(textbox) {
  textbox.value = "Vogel";
}

Once you have the element you can, of course, also use it with jQuery. This code also sets the element's value to "Vogel" but does it using jQuery's val function:

function SetName(textbox) {
  $(textbox).val("Vogel");
}

Posted by Peter Vogel on 12/06/2018 at 2:53 PM


Featured

  • Stone Steps Graphic

    Microsoft Research's SandDance Data Visualization Tool Goes Open Source

    A data visualization tool some four years in the making from Microsoft Research has been open sourced, available for use as an extension for Visual Studio Code or Azure Data Studio.

  • Writing the Code for a gRPC Service and Client in ASP.NET Core 3.0

    Once you've got a contract that describes a gRPC service, creating the service itself and a client that can call the service is easy. In fact, Visual Studio will do most of the work for you ... once you've got your projects set up correctly, that is.

  • Microsoft Doubles Down on Instructional Videos: Xamarin and Python

    After Microsoft's Scott Hanselman introduced a bunch of new beginner-level instructional videos for .NET, Xamarin guru James Montemagno wanted to remind mobile developers that similar resources are available for them.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events