Blazor WebAssemblyアプリケーション

このトピックでは、Blazor WebAssemblyアプリケーションにBlazorデザイナコンポーネントを加する方法を紹介します。このプロジェクトでは、レポートサーバーを使用しています。

1. Visual Studio 2026を開きます。

2. 空の「Blazor WebAssembly アプリ」を選択し、［次へ］をクリックします。

3. プロジェクト名を入力し、［作成］をクリックします。

4. 次のパッケージをプロジェクトに追加します。

   MESCIUS.ActiveReports.Blazor.Designer.ja

5. Pages/Index.razorページにBlazorデザイナコンポーネントを追加します。

   @page "/"
   @using GrapeCity.ActiveReports.Blazor.Designer;
   @inject IJSRuntime JSRuntime
   <div style="height:100vh;width:100%"
       <ReportDesigner @ref="_designer" Server="@_server" Document="@_document" />
   </div>
   @code {
       private ReportDesigner _designer;
       private Server _server = new Server()
       {
           Url = "http://localhost:5098"
       };
       private Document _document = new Document()
           {
               Id = "List.rdlx",
               Type = SupportedDocumentType.cpl
           };
   }

6. レポートサーバーを実行します。

7. アプリケーションを実行します。