How to run client user interfaces in Blazor

Question

I just started playing with Blazor, and I already see the great potential of this new structure.

I am wondering how this will handle simple things like setting focus on an input control? For example, after handling a click event, I want to focus on a text input control. Should I use jQuery for something like this, or does Blazor have built-in methods for this kind of thing?

thanks

Update: I am doing this now until I learn more about Blazor. (This works, but I know that there will be better ways to handle such things when Blazor is ready for prime time.)

In my opinion, I have the following Script section:

<script> Blazor.registerFunction('FocusControl', (ctrl) => { document.getElementById(ctrl).focus(); return true; }); </script> 

Then in the Functions section, I have this function:

 private void FocusControl(string ctrl) { RegisteredFunction.Invoke<bool>("FocusControl", ctrl); } 

Then I call it from the Refresh method. (This is an example of the code provided by TalkingDotNet at http://www.talkingdotnet.com/create-a-crud-app-using-blazor-and-asp-net-core/ )

 private async Task Refresh() { todos = await Http.GetJsonAsync<ToDoList[]>("/api/ToDo"); FocusControl("todoName"); StateHasChanged(); } 

Answer 1

Blazor is just a replacement (more precisely, "adding a value") with javascript. This solution is only for the client side (but may be with some easy connections with ASP.Net in the future).

However, it is entirely based on html and CSS. C # replaces part of js with web build. This way, nothing has changed in the way you access / modify the html controls.

At the moment (version 0.1.0) you should rely on the HTML DOM focus() method to do what you intend to do (yes, you should use javascript at the moment :().

 // Not tested code // This is JavaScript. // Put this inside the index.html. Just below <script type="blazor-boot"></script> <script> Blazor.registerFunction('Focus', (controlId) => { return document.getElementById(controlId).focus(); }); </script> //and then wrap it for calls from .NET: // This is C# public static object Focus(string controlId) { return RegisteredFunction.Invoke<object>("Focus", controlId); //object type is used since Invoke does not have a overload for void methods. Don't know why. //this will return undifined according to js specs } 

see below for more information.

If you want to improve pashaging js neatly . you can do something like that. fooobar.com/questions/1276054 / ...

 public class BlazorExtensionScripts : Microsoft.AspNetCore.Blazor.Components.BlazorComponent { protected override void BuildRenderTree(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder) { builder.OpenElement(0, "script"); builder.AddContent(1, "Blazor.registerFunction('Focus', (controlId) => { document.getElementById(controlId).focus(); });"); builder.CloseElement(); } public static void Focus(string controlId) { RegisteredFunction.Invoke<object>("Focus", controlId); } } 

then add this component to the root directory. (App.cshtml)

 <BlazorExtensionScripts></BlazorExtensionScripts> <Router AppAssembly=typeof(Program).Assembly /> 

Answer 2

You cannot directly call a JavaScript function. You must first register your functions, for example,

 <script> Blazor.registerFunction('ShowControl', (item) => { var txtInput = document.getElementById("txtValue"); txtInput.style.display = ""; txtInput.value = item; txtInput.focus(); }); return true; </script> 

Then you need to declare a method in C # that calls this JavaScript function. How,

 private void CallJavaScript() { RegisteredFunction.Invoke<bool>("ShowControl", itemName); } 

You can call this C # method with the click of a button. How,

 <button id="btnShow" class="btn btn-primary" @onclick(CallJavaScript)>Show</button> 

This post Create a CRUD Application Using Blazor and ASP.NET Core shows a working demo of JavaScript calls from Blazor.