2017-08-09 10 views
1

私は現在、Webアプリケーションにレポートを埋め込むために埋め込みBIを使用していますが、ドロップダウンボックスを使用してグループ内のレポートを切り替える機能を作成したいとします。私は適切なデータをドロップダウンボックスに入力することができましたが、実際にレポートを切り替えるのに苦労しています。私は正常にそれを行うことができます私はサーバー側の呼び出しに数値をハードコードが、明らかにこれはスケーラビリティではなく、解決策ではありません。以下は私のcshtmlです。reportSelector.onchangeの "@Model"コールで、選択した変数を参照できるようにする方法が必要です。サーバサイドコールMVCでJavaScript変数を使用

@model TaskWebApp.Models.EmbedConfig[] 

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

@if (!string.IsNullOrEmpty(Model[0].ErrorMessage)) 
{ 
    <div id="errorWrapper"> 
     <h2> 
      Error 
     </h2> 
     @Model[0].ErrorMessage 
    </div> 

    return; 
} 

<div> 
    <p>Select report</p> 
    <select id="reportSelector"></select> 
</div> 
<div id="reportContainer"></div> 

<script> 
    // Read embed application token from Model 
    var accessToken = "@Model[0].EmbedToken.Token"; 

    // Read embed URL from Model 
    var embedUrl = "@Html.Raw(Model[0].EmbedUrl)"; 

    // Read report Id from Model 
    var embedReportId = "@Model[0].Id"; 

    // Get models. models contains enums that can be used. 
    var models = window['powerbi-client'].models; 

    // Embed configuration used to describe the what and how to embed. 
    // This object is used when calling powerbi.embed. 
    // This also includes settings and options such as filters. 
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details. 
    var config = { 
     type: 'report', 
     tokenType: models.TokenType.Embed, 
     accessToken: accessToken, 
     embedUrl: embedUrl, 
     id: embedReportId, 
     permissions: models.Permissions.All, 
     settings: { 
      filterPaneEnabled: true, 
      navContentPaneEnabled: true 
     } 
    }; 
    // Get a reference to the embedded report HTML element 
    var reportContainer = $('#reportContainer')[0]; 

    // Embed the report and display it within the div container. 
    var report = powerbi.embed(reportContainer, config); 

    var reportSelector = $('#reportSelector')[0]; 
    var optionString = "@Html.Action("PopulateDropdown", "Embed", Model[0].Reports)"; 
    reportSelector.onchange = function() { 
     var selected = this.selectedIndex; 
     var accessToken = "@Model[selected].EmbedToken.Token"; 

     // Read embed URL from Model 
     embedUrl = "@Html.Raw(Model[selected].EmbedUrl)"; 

     // Read report Id from Model 
     embedReportId = "@Model[selected].Id"; 

     // Get models. models contains enums that can be used. 
     models = window['powerbi-client'].models; 

     // Embed configuration used to describe the what and how to embed. 
     // This object is used when calling powerbi.embed. 
     // This also includes settings and options such as filters. 
     // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details. 
     config = { 
      type: 'report', 
      tokenType: models.TokenType.Embed, 
      accessToken: accessToken, 
      embedUrl: embedUrl, 
      id: embedReportId, 
      permissions: models.Permissions.All, 
      settings: { 
       filterPaneEnabled: true, 
       navContentPaneEnabled: true 
      } 
     }; 
     var report = powerbi.embed(reportContainer, config); 
    } 
    reportSelector.innerHTML = optionString; 
</script> 

モデルまたはコントローラを確認する必要がある場合はお知らせください。どのような助けにも感謝しています。私はMVCに若干新しく、必要な方法で変数を使用できないことに苦しんでいます。

編集:ドロップダウンを作成する関数:

public string PopulateDropdown(ODataResponseListReport reports) 
     { 
      foreach (Claim claim in ClaimsPrincipal.Current.Claims) 
      { 
       if (claim.Type == "extension_GroupID") 
       { 
        GroupId = claim.Value; 
       } 
      } 
      string retVal = ""; 
      for (int i = 0; i < reports.Value.Count; i++) 
      { 
       retVal += "<option>" + reports.Value.ElementAtOrDefault(i).Name + "</option>"; 
      } 
      return retVal; 
     } 
+0

を使用してアクセスすることができますか?そして '@Model'は、剃刀コードです - それはビューに送られる前にサーバー上で解析されます。 'selected'はその時点で存在しないjavascript変数であるため、' var accessToken = "@Model [selected] .EmbedToken.Token"; 'のようなコードは機能しません。 –

+0

iveはコントローラー内にあるドロップダウンを作成する関数を追加しました –

+0

はいiveその剃刀がコントローラメソッドまたはこの行に沿って何かにgreat –

答えて

2

@Modelはかみそりのコードであり、そのビューに送信する前に、サーバー上で解析されます。 var accessToken = "@Model[selected].EmbedToken.Token";などを使用すると、selectedはその時点では存在しないjavascript変数であるため、エラーがスローされます。スコープには含まれません。

あなたは

var model = var model = @Html.Raw(Json.Encode(Model)) 

を使用してjavascript配列にモデルを割り当て、あなたのインデクサ

何のDropDownList
var accessToken = model[selected].EmbedToken.Token; 
関連する問題