DevExpressレポートmvcと角度js

Question

私のWebアプリケーションでは、私はasp.net mvc5とangular1.5.Allビューを使用して、部分的にui-viewを使ってレンダリングしています。 DevExpressレポートをmvc5と角度jsと統合する必要があります。 DevExpressレポートをどのようにmvc5とangularjs 1.5と統合することができますか？

Answer 1

現在のソリューションは、レポートビューアのために別のページを持つことで、アプリ内

https://www.devexpress.com/Support/Center/Question/Details/T289424 https://www.devexpress.com/Support/Center/Question/Details/T422061

ハッピーコーディング、それを表示するためにはiframeを使用することができ、あなたの質問については、以下のリンクを確認してください。 ）

Answer 2

この方法は、レポートとデータを動的に選択するのに役立ちます。私はそれを試した。

Angularview。

<div ng-app="DemoApp" ng-controller="DemoController"> 
    <table style="width:100%;height:100%;"> 
    <tr> 
     <td style="background-color:gray;width:20%;vertical-align: top;text-align: left;"> 
     <h3>Select report tamplates</h3> 
      <ul> 
       <li ng-repeat="r in reports"><h6 ng-click="reportSelected(r.type)">{{r.type}}</h6></li> 
      </ul> 
     </td> 
     <td style="background-color:forestgreen;"> 
      <iframe src="/Home/Index" style="width:100%;height:800px" id="viewer"></iframe> 
     </td> 
    </tr> 
    </table> 
</div> 

ホームコントローラ。

public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
//i am getting some parameter from angular by query string and acordingli decide with report template and data need to add. 
      var type = Request.QueryString["Type"];//parameter from angular 
      if (type != null) 
      { 
       type.Trim(); 
      } 
      else { type = "Xm"; } 
      if (type.Equals("Pipe")) 
      { 
       ViewBag.Path = @"report path"; 
       ViewBag.Data = "data json in my case"; 
      } 
      else 
      { 
       ViewBag.Path = @"aspx report path";//you can specify this report at runtime 
       ViewBag.Data = //json data in my case,you can add any data wicht impliments ILIST or related interfaces; 
      } 

      return View(); 
     } 
    } 

インデックスビュー（レポートを生成する）。

@{ 
    ViewBag.Title = "Home Page"; 
} 


@Html.DevExpress().WebDocumentViewer(settings => 
{ 
    settings.Name = "WebDocumentViewer"; 
}).Bind((new DXWebApplication1.Reports.Class1(@ViewBag.Path, @ViewBag.Data)).getReport()).GetHtml() 
//(DXWebApplication1.Reports.Class) this class is created to return report 

レポートを表示するクラス。

DXWebApplication1.Reports.Class 。

public class Class1 
    { 
     public DevExpress.XtraReports.UI.XtraReport report { get; set; } 

     public Class1(string filepath, string datasource) 
     { 
      this.report = new DevExpress.XtraReports.UI.XtraReport(); 
      this.report.LoadLayout(filepath); 
      this.report.DataSource = JsonConvert.DeserializeObject<List<JobCode>>(datasource); 
     } 

     public DevExpress.XtraReports.UI.XtraReport getReport() 
     { 
      return this.report; 
    } 

as rest serviceを使用しています。私はjsonからc＃のクラスをレポートのために逆シリアル化しています。

jsonデータをデシリアライズするC＃クラス。

class JobCode 
{ 
    [JsonProperty("Description")] 
    public string Description { get; set; } 
    [JsonProperty("Size")] 
    public int Size { get; set; } 
    [JsonProperty("Weight")] 
    public int Weight { get; set; } 
    [JsonProperty("name")] 
    public string Name { get; set; } 
}