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

asp.net-core blazor c#

質問

私はBlazorを使い始めました。この新しいフレームワークの大きな可能性をすでに知ることができます。

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

ありがとう

アップデート: Blazorについてもっと学ぶまで、これは私が今やっている方法です。 (これはうまくいきますが、Blazorがプライムタイムの準備ができているとき、このようなことを処理するためのよりよい方法があることを知っています)。

私の見解では、私は次のスクリプトセクションを持っています:

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

次に、関数セクションに私はこの関数を持っています:

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

それから私はRefreshメソッドから呼び出します。 (これはTalkingDotNetが提供するサンプルコードを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();
}

受け入れられた回答

Blazorはjavascriptに代わるもの(より正確には「付加価値」)です。これはクライアント側の唯一の解決策です(ただし、将来的にはASP.Netに簡単にバインドされる可能性があります)。

まだ完全にhtmlとCSSに基づいています。 C#は、Webアセンブリを使用してjs部品を置き換えています。だからあなたはどのようにHTMLコントロールにアクセス/変更するかについては何も変わっていません。

現時点では、HTML DOM focus()メソッドを使用する必要があります(あなたは今のところ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のpakagingを改善したい場合 。このようなことをすることができます。 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 />

人気のある回答

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 Appを作成すると 、BlazorからJavaScriptを呼び出す作業デモを示しています。



ライセンスを受けた: CC-BY-SA with attribution
所属していない Stack Overflow
ライセンスを受けた: CC-BY-SA with attribution
所属していない Stack Overflow