.NET Tips and Tricks

Blog archive

A Blazor Tip You Should Almost Certainly Ignore

In another column, I describe how you can, from JavaScript, call methods on C# objects defined in Blazor pages. As that sentence implies, however, there's no way to access properties on those objects ... at least, no official, documented way.

It can be done, however. To make a method on a class accessible from JavaScript, you decorate the method with the JSInvokable attribute. You can, it turns out, do the same thing with properties, like this:

public string FirstName { [JSInvokable] get; [JSInvokable] set; }

Once you've done that, you can read and set the FirstName property from a JavaScript function by treating the property's getter and setter like methods. This JavaScript code, for example, sets the FirstName property to "Jan" and then reads the value back out of the property (see that earlier column for all the ugly details):

cust.invokeMethod("set_FirstName", "Jan");
var fullName = cust.invokeMethod("get_FirstName");

While I've an auto-implemented property here, this also works with "fully implemented properties" with explicit getters and setters.

The Blazor documentation doesn't mention this "feature," which may mean that it's just a "happy accident" (it certainly seems to depend on the internal implementation of properties). As such it may be wiped out in the next release of Blazor or replaced with some better, slicker syntax.

But if you're working with Blazor and really want to access properties, there it is.

Posted by Peter Vogel on 10/10/2018 at 11:02 AM


comments powered by Disqus

Featured

  • Microsoft's Tools to Fight Solorigate Attack Are Now Open Source

    Microsoft open sourced homegrown tools it used to check its systems for code related to the recent massive breach of supply chains that the company has named Solorigate.

  • Microsoft's Lander on Blazor Desktop: 'I Don't See a Grand Unified App Model in the Future'

    For all of the talk of unifying the disparate ecosystem of Microsoft-centric developer tooling -- using one framework for apps of all types on all platforms -- Blazor Desktop is not the answer. There isn't one.

  • Firm Automates Legacy Web Forms-to-ASP.NET Core Conversions

    Migration technology uses the Angular web framework and Progress Kendo UI user interface elements to convert ASP.NET Web Forms client code to HTML and CSS, with application business logic converted automatically to ASP.NET Core.

  • New TypeScript 4.2 Tweaks Include Project Explainer

    Microsoft shipped TypeScript 4.2 -- the regular quarterly update to the open source programming language that improves JavaScript with static types -- with a host of tweaks including a way to explain why files are included in a project.

Upcoming Events