ASP.NET コアビューではBlazorの画像キャプチャを使用します

クズども · 掲載地 2020/04/07 11:15:36

Blazorは.NETを用いてインタラクティブなクライアントWeb UIを構築するためのフレームワークです:

JavaScriptの代わりにC#を使って、豊かでインタラクティブなUIを作成しましょう。
サーバーサイドとクライアントサイドのアプリロジックを.NETで共有します。
UIをHTMLやCSSとしてレンダリングし、モバイルブラウザを含む多くのブラウザをサポートします。

Blazorは、WebAssemblyベースの.NETランタイム(Blazor WebAssembly)でブラウザ上でクライアントサイドで動作するか、ASP.NET Coreのサーバーサイド(Blazor server)上で動作するよう設計されたウェブフレームワークです。管理モデルはどれも同じです。

ブレイザーサーバー

Blazorサーバーホスティングモデルを使って、ASP.NET Coreアプリからサーバー上でアプリを実行しましょう。UIの更新、イベント処理、JavaScript呼び出しは以下の方法で行われますシグナルRプロセスへの接続。

Blazorサーバーホスティングモデルは以下の利点を提供します:

ダウンロードサイズはBlazor WebAssemblyアプリよりかなり小さく、アプリの読み込みもはるかに速いです。
アプリは.NET Core互換APIの使用を含め、サーバー機能を最大限に活用できます。
サーバー上の.NET Coreでアプリを動かすため、既存の.NETツール(デバッグなど)は期待通りに動作します。
シンクライアントもサポートしています。例えば、BlazorサーバーアプリはWebAssemblyをサポートしないブラウザやリソース制約の少ないデバイスに適しています。
アプリのコンポーネントコードを含む.NET/C#コードベースはクライアントでは動作しません。

Blazorサーバーのホスティングには以下の欠点があります:

レイテンシーは通常もっと高くなります。すべてのユーザー操作にはネットワークホップが伴います。
オフラインでの作業はサポートされていません。クライアント接続が失敗すると、アプリは動作しなくなります。
複数のユーザーがいる場合、アプリのスケーラビリティに課題があります。サーバーは複数のクライアント接続を管理し、クライアントの状態を処理しなければなりません。
ASP.NET Coreサーバーはアプリケーションに対応する必要があります。サーバーレス展開シナリオ(例:CDN経由でアプリケーションをサービスする方法)は現実的ではありません。

チュートリアル開始:

1. まず、vs2019を使って新しいBlazor Appプロジェクトを作成します。以下のように示されています。

2. 以下のコードで新しいRazorコンポーネントを作成する:

base64のキャプチャを生成し、nugetでインストールするにはSkiaSharpパッケージが必要です:

ログインが見えます。

3. プロジェクト開始、訪問:ハイパーリンクのログインが見えます。

生成されたHTMLコードは以下の通りです:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ブレイザーアプリ1</title>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
      
      <div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
      <span class="navbar-toggler-icon"></span>
</button>
</div>

<div class="collapse">
<ul class="nav flex-column">
      <li class="nav-item px-3">
         <a href="" class="nav-link">
            <span class="oi oi-home" aria-hidden="true"></span> ホーム
         </a>
      </li>
      <li class="nav-item px-3">
         <a href="counter" class="nav-link">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
         </a>
      </li>
      <li class="nav-item px-3">
         <a href="fetchdata" class="nav-link">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
         </a>
      </li>
</ul>
</div>
</div>

<div class="main">
<div class="top-row px-4">
      <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>

<div class="content px-4">
      <h3>検証</h3>

<p>
(ブレイザー) 検証コードの表示方法と検証方法のサンプルです。
</p>

<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>更新</button>
<hr>
<div>画像の数字を入力してください</div>
<form>
<input type="text" style="padding:5px" />
<button>チェック</button>
</form>
<hr>
<button>テストクリック</button>
</div>
</div>

</app>

<div id="blazor-error-ui">
         処理されていない例外が発生しました。詳細はブラウザ開発ツールをご覧ください。

      <a href="" class="reload">Reload</a>
</div>

<script src="_framework/blazor.server.js"></script>
</body>
</html>

ボタンをクリックしてみてください。ボタンイベントトリガーはSignalRを通じて伝達されており、WebSocketやポーリングなどに基づいています。以下の図に示されています。

参考リンク:

ハイパーリンクのログインが見えます。

クズども · 掲載地 2020/04/07 11:45:47

ログインが見えます。

つまり、双方向のバインディングが少し必要だということです

HHB353897079 · 掲載地 2022/11/15 10:51:42

しかし、それがこのサイトがその見解に同意し、その真正性に責任を負うという意味ではありません

クズども · 掲載地 2023/10/12 20:02:48

JSウェブフレームワークベンチマークの公式結果

ハイパーリンクのログインが見えます。
ハイパーリンクのログインが見えます。

GitHubアドレス:ハイパーリンクのログインが見えます。

[ASP.NET] ASP.NET コアビューではBlazorの画像キャプチャを使用します

関連記事

閲覧したセクション