ASP.NET Web API コントロール
手順1 : レポートサービスの構成
ComponentOne for Web API > WebAPIサービスのセキュリティ > 手順1 : レポートサービスの構成

レポートサービスWeb APIを構成する、およびフォルダにアクセスするためのカスタムJavaScriptファイルを追加するには、次の手順を実行します。

レポートサービスWeb APIアプリケーションの作成

Web APIのプロジェクトを構成するには、次の手順に従います。

  1. Visual Studioテンプレートで個別のユーザーアカウントを使用して新しいレポートサービスのアプリケーションを作成します。レポートサービスアプリケーションを作成する方法の詳細については、「標準のVisual Studio for Web APIテンプレートの使用」を参照してください。
  2. ログイン、ログアウト、ユーザー登録などの認証プロセスを作成します。詳細については、「Secure a Web API with Individual Accounts and Local Login in ASP.NET Web API」を参照してください。

先頭に戻る

レポートプロバイダのフォルダとレポートへのアクセス

上記の手順を完了したら、レポートプロバイダに指定したフォルダとレポートにアクセスするためにfiles.jsファイルを追加する必要があります。

  1. ソリューションエクスプローラーで、［Scripts］フォルダを右クリックし、［files.js］Javascriptファイルを追加します。
  2. レポートプロバイダのフォルダとレポートにアクセスするには、次のコードを追加します。

    files.js
    コードのコピー 
    $(function () {
    setFolder(folder);
});

function folderRefresh() {
    setFolder(folder);
}

function folderUp() {
    folder = folder || '/';
    var names = folder.split('/');
    if (names.length > 0 && !names[names.length - 1]) {
        names.splice(names.length - 1, 1);
    }

    if (names.length > 0) {
        names.splice(names.length - 1, 1);
    }

    var newFolder = names.join('/');
    setFolder(newFolder);
}

function setFolder(value) {
    value = value || '/';
    if (value[value.length - 1] != '/'){
        value += '/';
    }

    folder = value;
    var $folder = $('#folder');
    $folder.text(value);

    $('#upBtn').prop('disabled', value == '/');

    var $catalogItems = $('#catalogItems');
    $catalogItems.html('Loading');

    wijmo.viewer.ReportViewer.getReports(reportApi, value).

　　then(function (data) {
        $catalogItems.html('');
        data = data || {};
        var dataItems = data.items || [];
        var items = [];
        for (var i = 0, length = dataItems.length; i < length; i++) {
            var item = dataItems[i];
            if (item.type === wijmo.viewer.CatalogItemType.File) {
                items = items.concat(item.items);
                continue;
            }

            items.push(item);
        }

        for (var i = 0, length = items.length; i < length; i++) {
            var item = items[i], name = item.name, isReport = item.type === wijmo.viewer.CatalogItemType.Report;
            if (isReport) {
                var parts = item.path.split('/');
                name = parts[parts.length - 2] + '/' + p

　　　　arts[parts.length - 1];
            }

            var $item = $('<div>')
                .data('catalogItem', item)
                .addClass('catalog-item')
                .on('dblclick', function () {
                    var curItem = $(this);
                    var curData = curItem.data('catalogItem');
                    if (curData.type === wijmo.viewer.CatalogItemType.Report)

    {
                        showReport(curData.path);
                        return;
                    }

                    setFolder(curData.path);
                }),
                icon = $('<div>').addClass('glyphicon')
                .addClass(isReport ? 'glyphicon-file' : 　　　　　　'glyphicon-folder-close'),
                title = $('<div>').addClass('title').text(name);
            $item.append(icon).append(title);
            $catalogItems.append($item);
        }
    }).catch(function (xhr) {
        var message = xhr.status + ': ' + xhr.statusText;
        $catalogItems.html('<div class="error">' + message + '<br/>'
            + 'このフォルダに対するアクセス許可がありません。ネットワーク管理者にアクセス許可を要求してください。</div>' );
    });
}

function showReport(path) {
    var url = reportPageUrl + '?path=' + path;
    gotoUrl(url);
}

function gotoUrl(url) {
    window.location.href = url;
}

var httpRequest = wijmo.httpRequest;
wijmo.httpRequest = function (url, settings) {
    settings = settings || {};
    var token = sessionStorage.getItem(tokenKey);
    if (token) {
        var requestHeaders = settings.requestHeaders || {};
        requestHeaders['Authorization'] = 'Bearer ' + token;
        settings.requestHeaders = requestHeaders;
    }

    httpRequest(url, settings);
};

  3. ［Views］フォルダを右クリックし、［Files.cshtml］ビューを追加します。
    Files.cshtml
    コードのコピー 
    <div class="toolbar">
    <button id="upBtn" class="btn" onclick="folderUp()"><span class="glyphicon glyphicon-arrow-up"></span><span>上のフォルダへ</span></button>
    <button id="refreshBtn" class="btn" onclick="folderRefresh()"><span class="glyphicon glyphicon-refresh"></span><span>リフレッシュ</span></button>
    <span class="address">
        <span class="glyphicon glyphicon-folder-open"></span>
        <span>フォルダ：</span>
        <span id="folder"></span>
    </span>
</div>
<div id="catalogItems" class="catalog-items">
</div>
@section scripts{<script src="~/Scripts/files.js"></script>}

先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.