ReportViewer コントロールを使用した Reporting Services の統合 - 概要Integrating Reporting Services Using the Report Viewer Controls - Get Started

Report Viewer コントロールを使用して、Reporting Services の RDL レポートを WebForms アプリと WinForms アプリに統合できます。The Report Viewer controls can be used to integrate Reporting Services RDL reports into WebForms and WinForms apps. 最新の更新プログラムの詳細については、changelog を参照してください。For detailed information about recent updates see the changelog.

新しい Web プロジェクトに ReportViewer コントロールを追加するAdding the Report Viewer control to a new web project

  1. 新しい [ASP.NET 空の Web サイト] を作成するか、既存の ASP.NET プロジェクトを開きます。Create a new ASP.NET Empty Web Site or open an existing ASP.NET project.

    ssRS-Create-New-ASPNET-Project

  2. NuGet パッケージ マネージャー コンソールから ReportViewer 2016 コントロール NuGet パッケージをインストールします。Install the Report Viewer control NuGet package via the NuGet package manager console.

    Install-Package Microsoft.ReportingServices.ReportViewerControl.WebForms
    
  3. 新しい .aspx パッケージをプロジェクトに追加し、ページ内で使用できるように ReportViewer コントロール アセンブリを登録します。Add a new .aspx page to the project and register the Report Viewer control assembly for use within the page.

    <%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>
    
  4. ページに ScriptManagerControl を追加します。Add a ScriptManagerControl to the page.

  5. ページに ReportViewer コントロールを追加します。Add the Report Viewer control to the page. リモート レポート サーバーでホストされているレポートを参照するように次のスニペットを更新することができます。The snippet below can be updated to reference a report hosted on a remote report server.

    <rsweb:ReportViewer ID="ReportViewer1" runat="server" ProcessingMode="Remote">
      <ServerReport ReportPath="" ReportServerUrl="" />
    </rsweb:ReportViewer>
    

最終的なページは次のようになります。The final page should look like the following.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Sample" %>

<%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server"></asp:ScriptManager>        
        <rsweb:ReportViewer ID="ReportViewer1" runat="server" ProcessingMode="Remote">
            <ServerReport ReportServerUrl="https://AContosoDepartment/ReportServer" ReportPath="/LatestSales" />
        </rsweb:ReportViewer>
    </form>
</body>
</html>

ReportViewer コントロールを使用するように既存のプロジェクトを更新するUpdating an existing project to use the Report Viewer control

すべてのアセンブリ参照がバージョン 15.0.0.0 に更新されていることを確認します。ビューア― コントロールを参照しているプロジェクトの web.config とすべての .aspx ページも含めて確認してください。Make sure to update any assembly references to version 15.0.0.0, including the project's web.config and all .aspx pages that reference the viewer control.

サンプル web.config の変更Sample web.config changes

<?xml version="1.0"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  https://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5.2">
      <assemblies>
        <!-- All assemblies updated to version 15.0.0.0. -->
        <add assembly="Microsoft.ReportViewer.Common, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91"/>
        <add assembly="Microsoft.ReportViewer.DataVisualization, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91"/>
        <add assembly="Microsoft.ReportViewer.Design, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91"/>
        <add assembly="Microsoft.ReportViewer.ProcessingObjectModel, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91"/>
        <add assembly="Microsoft.ReportViewer.WebDesign, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91"/>
        <add assembly="Microsoft.ReportViewer.WebForms, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91"/>
        <add assembly="Microsoft.ReportViewer.WinForms, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91"/>
      </assemblies>
      <buildProviders>
        <!-- Version updated to 15.0.0.0. -->
        <add extension=".rdlc"
          type="Microsoft.Reporting.RdlBuildProvider, Microsoft.ReportViewer.WebForms, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91"/>
      </buildProviders>
    </compilation>
    <httpRuntime targetFramework="4.5.2"/>
    <httpHandlers>
      <!-- Version updated to 15.0.0.0 -->
      <add path="Reserved.ReportViewerWebControl.axd" verb="*"
        type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91"
        validate="false"/>
    </httpHandlers>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules runAllManagedModulesForAllRequests="true"/>
    <handlers>
      <!-- Version updated to 15.0.0.0 -->
      <add name="ReportViewerWebControlHandler" verb="*" path="Reserved.ReportViewerWebControl.axd" preCondition="integratedMode"
        type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91"/>
    </handlers>
  </system.webServer>
</configuration>

サンプル .aspxSample .aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SampleAspx" %>

<!-- Update version to 15.0.0.0 -->
<%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>

<!DOCTYPE html>

新しい Windows フォーム プロジェクトに ReportViewer コントロールを追加するAdding the Report Viewer control to a new Windows Forms project

  1. 新しい Windows フォーム アプリケーションを作成するか、既存のプロジェクトを開きます。Create a new Windows Forms Application or open an existing project.

    ssRS-Create-New-winforms-Project

  2. NuGet パッケージ マネージャー コンソールから ReportViewer 2016 コントロール NuGet パッケージをインストールします。Install the Report Viewer control NuGet package via the NuGet package manager console.

    Install-Package Microsoft.ReportingServices.ReportViewerControl.WinForms
    
  3. コードから新しいコントロールを追加するか、コントロールをツールボックスに追加します。Add a new control from code or add the control to the toolbox.

    private Microsoft.Reporting.WinForms.ReportViewer reportViewer1;
    
    private void InitializeComponent()
    {
        this.reportViewer1 = new Microsoft.Reporting.WinForms.ReportViewer();
        this.SuspendLayout();
        // 
        // reportViewer1
        // 
        this.reportViewer1.Location = new System.Drawing.Point(168, 132);
        this.reportViewer1.Name = "reportViewer1";
        this.reportViewer1.ServerReport.BearerToken = null;
        this.reportViewer1.Size = new System.Drawing.Size(396, 246);
        this.reportViewer1.TabIndex = 0;
        // 
        // Form1
        // 
        this.Controls.Add(this.reportViewer1);
    }
    

ReportViewer コントロールで 100% の高さを設定する方法How to set 100% height on the Report Viewer control

ビューア― コントロールの高さが 100% に設定されている場合、親要素は定義済みの高さであるか、すべての祖先はパーセントによって定義される高さである必要があります。If setting the height of the viewer control to 100% the parent element is required to have a defined height, or all ancestors are required to have percentage heights.

すべての先祖の高さを 100% に設定Setting the height of all the ancestors to 100%

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style>
        html,body,form,#div1 {
            height: 100%; 
        }
    </style>
   </head>
<body>
    <form id="form1" runat="server">
    <div id="div1" >
            <asp:ScriptManager runat="server"></asp:ScriptManager>
        <rsweb:ReportViewer ID="ReportViewer1" runat="server" ProcessingMode="Remote" Height="100%" Width="100%">
            <ServerReport ReportServerUrl="https://test/ReportServer" ReportPath="/testreport" />
        </rsweb:ReportViewer>
    </div>
    </form>
</body>
</html>

親の height 属性を設定Setting the parent's height attribute

ビューポートの割合の長さについては、「Viewport-percentage lengths」(ビューポートの割合の長さ) を参照してください。For more information about viewport percentage lengths, see Viewport-percentage lengths.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
    <div style="height:100vh;">
            <asp:ScriptManager runat="server"></asp:ScriptManager>
        <rsweb:ReportViewer ID="ReportViewer1" runat="server" ProcessingMode="Remote" Height="100%" Width="100%">
            <ServerReport ReportServerUrl="https://test/ReportServer" ReportPath="/testreport" />
        </rsweb:ReportViewer>
    </div>
    </form>
</body>
</html>

Visual Studio ツール バーにコントロールを追加するAdding control to Visual Studio toolbar

Report Viewer コントロールは NuGet パッケージとして出荷されるようになったため、既定では Visual Studio ツールボックスに表示されません。The Report Viewer Control is now shipped as a NuGet package and no longer shows in the Visual Studio toolbox by default. コントロールをツールボックスに手動で追加できます。You can add the control to the toolbox manually.

  1. 前述のように、WinForms または WebForms 用の NuGet パッケージをインストールします。Install the NuGet package for either the WinForms or WebForms as mentioned above.

  2. ツールボックスに表示されている ReportViewer コントロールを削除します。Remove the Report Viewer Control that is listed in the toolbox.

    ssRS-remove-old-rvcontrol-toolbox

  3. ツールボックス内のいずれかの場所を右クリックし、 [アイテムの追加] を選択します。Right-click in anywhere in the toolbox and then select Choose Items....

    ssRS-toolbox-choose-item

  4. [.NET Framework コンポーネント][参照] を選択します。On the .NET Framework Components, select Browse.

    ssRS-toolbox-browse

  5. インストールされた NuGet パッケージから Microsoft.ReportViewer.WinForms.dll または Microsoft.ReportViewer.WebForms.dll を選択します。Select the Microsoft.ReportViewer.WinForms.dll or Microsoft.ReportViewer.WebForms.dll from the NuGet package you installed.

    注意

    NuGet パッケージは、プロジェクトのソリューション ディレクトリにインストールされます。The NuGet package will be installed in the solution directory of your project. dll のパスは、{Solution Directory}\packages\Microsoft.ReportingServices.ReportViewerControl.Winforms.{version}\lib\net40 または {Solution Directory}\packages\Microsoft.ReportingServices.ReportViewerControl.WebForms.{version}\lib\net40 のようになります。The path to the dll will be similar to the following: {Solution Directory}\packages\Microsoft.ReportingServices.ReportViewerControl.Winforms.{version}\lib\net40 or {Solution Directory}\packages\Microsoft.ReportingServices.ReportViewerControl.WebForms.{version}\lib\net40.

  6. ツールボックス内に新しいコントロールが表示されます。The new control should display within the toolbox. 必要に応じて、ツールボックス内の別のタブに移動することができます。You can then move it to another tab within the toolbox if you wish.

    ssRS-toolbox-rvcontrol

一般的な問題Common issues

ビューアー コントロールは、モダン ブラウザー向けに設計されています。The viewer control is designed for modern browsers. IE 互換モードを使用してブラウザーにページを表示すると、コントロールが想定どおりに動作しない場合があります。The control may not work as expected if the browser renders the page using IE compatibility mode. イントラネット サイトでは、既定のブラウザーの動作をオーバーライドするメタ タグが必要な場合があります。Intranet sites may require a meta tag to override default browser behavior.

```
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
```
  

フィードバックFeedback

問題が発生した場合は、Reporting Services フォーラム でチームにお知らせください。Let the team know about issues on the Reporting Services forums.

参照See also

Report Viewer コントロールのデータ コレクションData collection in the Report Viewer control
その他の質問More questions? Reporting Services のフォーラムにアクセスしますTry the Reporting Services forum