web-dev-qa-db-ja.com

Blazorでクライアント側のUIイベントを実行する方法

私はBlazorをいじり始めたばかりで、この新しいフレームワークの大きな可能性をすでに理解しています。

しかし、入力コントロールにフォーカスを設定するなどの簡単なことをどのように処理するのでしょうか？たとえば、クリックイベントを処理した後、テキスト入力コントロールにフォーカスを設定します。そのようなことのためにJQueryを使用する必要がありますか、それともBlazorにはそのようなことのためのいくつかの組み込みメソッドがありますか？

ありがとう

更新：.NetコードからJavaScript関数を呼び出して、コントロールにフォーカスを設定する方法の例を以下の回答に投稿しました。

現時点（Blazor 0.9.0）では、JavaScript関数をIndex.htmlで作成（またはIndex.htmlから参照）し、BlazorページまたはコンポーネントでJsRuntime.InvokeAsync（ "functionName"、parms）を呼び出します。

https://docs.Microsoft.com/en-us/aspnet/core/razor-components/javascript-interop

javascriptc#asp.net-coreblazorjavascript-interop
15
camainc

ボタンをクリックするなどのイベントの後に、JavaScript関数を呼び出してフォーカスを別のコントロールに設定する、より最新の（0.9.0時点の）サンプルを追加したいと思います。これは、Blazorを始めたばかりの人（私のような人）に役立つかもしれません。

この例は、Blazorドキュメント「Build Your First Blazor Components App」のサンプルコード https://docs.Microsoft.com/en-us/aspnet/core/tutorials/build-your-first- razor-components-app？view = aspnetcore-3.

まず、ドキュメントのすべての指示に従ってください。作業中のTo Doリストページがある場合、次を追加します。

  1. Index.htmlの下部、wwwrootの下、およびwebassembly.jsを読み込むスクリプトタグの下に、次のスクリプトを追加します。
<script>
        window.MySetFocus = (ctrl) => {
            document.getElementById(ctrl).focus();
            return true;
        }
</script>
  1. Todo.cshtmlページの上部に、次のusingステートメントを追加します。
@inject IJSRuntime JsRuntime;
  1. Todo.cshtmlページの@functionsセクションで、次の関数を追加します。
    async void Focus(string controlId)
    {
        var obj = JsRuntime.InvokeAsync<string>(
            "MySetFocus", controlId);
    }
  1. 「newToDo」変数を空の文字列に設定した行のすぐ下のAddToDo（）関数で、入力コントロールの文字列IDを渡して、Focus関数への呼び出しを追加します。 （ドキュメントの例では、入力コントロールにIDを割り当てていないので、自分でIDを追加するだけです。「todoItem」という名前を付けました）。

void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
            Focus("todoItem"); // this is the new code
        }
    }
  1. アプリをビルドして実行します。 [新しいアイテムの追加]ボタンをクリックすると、新しいアイテムがリストに追加され、入力コントロールが空白になり、フォーカスが入力コントロールに戻り、別のアイテムを追加できるようになります。
5
camainc

Blazorは、javascriptの単なる置き換え（より正確には "値の追加"）です。これはクライアント側のみのソリューションです（ただし、将来ASP.Netに簡単にバインドできる可能性があります）。

まだ完全にhtmlとCSSに基づいています。 C＃はWebアセンブリを使用してjsパーツを置き換えています。したがって、htmlコントロールへのアクセス方法や変更方法に変更はありません。

現在（バージョン0.1.0）、HTML DOM focus() Methodを使用して、意図したことを実行する必要があります（はいjavascript現在:(）。

// 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
}

詳細については、以下を参照してください。

jsのパッケージングをきれいに改善したい場合。このようなことができます。 https://stackoverflow.com/a/49521216/476609

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);
    }
}

次に、このコンポーネントをルートに追加します。 （App.cshtml）

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

JavaScript関数を直接呼び出すことはできません。次のような関数を最初に登録する必要があります。

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

次に、このJavaScript関数を呼び出すメソッドをC＃で宣言する必要があります。お気に入り、

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

ボタンをクリックすると、このC＃メソッドを呼び出すことができます。お気に入り、

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

この投稿 BlazorとASP.NET Coreを使用してCRUDアプリを作成する は、BlazorからJavaScriptを呼び出す実際のデモを示しています。

2
VirendraJ