DevExpress報告與mvc和角js

Question

在我的web應用程序中，我使用的是asp.net mvc5和angular1.5.All視圖使用ui-view呈現爲部分。 我需要將DevExpress報告與mvc5和角度js集成。 有沒有人有想法如何我可以將DevExpress報告與mvc5和angularjs 1.5集成。

Answer 1

請查看您的問題下面的鏈接，目前的解決方案是有單獨的頁面，報表查看器，你可以使用iframe來展示其應用內的

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

快樂編碼： ）

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; 
    } 

作爲使用休息服務，我正在序列化JSON到C＃類的報告。

C＃類用於反序列化json數據。

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; } 
}