RazorページでBlazorコンポーネントを使用する

投稿日: 2023年3月7日 作成者: takezou

Blazorプロジェクト中のRazorページ(.cshtml)等でBlazorコンポーネントを使用したい場合には、どうすればよいのかチョット気になったので調べてみた。

結果としてはTagHelperライブラリの<component>タグを用いるらしい。
詳細はこちらを参照。

componentタグにはレンダリングするTypeとレンダリングの方法を指定する。
(パラメータも指定可能)

おなじみのCounterコンポーネントを使ってみる

@page
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
@using blazorApp7.Pages

<html>
    <head>
        <title>Razorコンポーネントテスト</title>
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <script type="text/javascript" src="~/scripts/project.js"></script>
    </head>
    <body>
        <div class="areabody">
        <h3>CSHTMLからBlazorコンポーネントは使えるのか?</h3><br/>
            <div class="component-area">
                <component type="typeof(Counter)" render-mode="ServerPrerendered"/>
            </div>
        </div>
        <br/>
        <hr/>
        <div class="areabody">
            結論から言うと、Blazor用のJavaScriptおよびその他コンポーネント実行に必要なJavascriptとCSSを読み込めば大丈夫な模様。<br/>
            BlazorServerの場合は"_framework/blazor.server.js"<br/>
            <script src="_framework/blazor.server.js"></script>
        </div>
    </body>
</html>
実行例

Blazorサーバーの場合はサーバーとの通信がNGになると、ページ全体がダメになるのは仕方ないよね・・・

サーバー止めた

用途として、動的View的なものに使えないかと思ったけど、Razorページからコンポーネントへのリアルタイム通知ができないとダメだね。無理やり作ろうと思えばできないことは無いけど、やはり単純にBlazor内で完結させた方がよさそうだ。

takezou について

ソフトウェア開発会社(ITと言う言葉は大嫌い)で働く、元技術者。 未だに、社内システム位は作ってますが・・・ プログラミング言語はC#が好き。 好きなことだけ拾って投稿しているので、内容にはあまり期待しないでねw
カテゴリー: .NET, asp.net core, Blazor, C#, 技術系 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。