带有 mvc 和 Angular js 的 DevExpress 报告

Posted 2023-04-12

【中文标题】带有 mvc 和 Angular js 的 DevExpress 报告

【英文标题】：DevExpress report with mvc and angular js

【发布时间】：2017-07-21 23:53:39

【问题描述】：

在我的 Web 应用程序中，我使用的是 asp.net mvc5 和 angular1.5。所有视图都使用 ui-view 呈现为部分视图。 我需要将 DevExpress 报告与 mvc5 和 angular js 集成。 有谁知道我如何将 DevExpress 报告与 mvc5 和 angularjs 1.5 集成。

【参考方案1】：

请查看以下链接以了解您的问题，当前的解决方案是为报告查看器提供单独的页面，您可以使用 iframe 在您的应用程序中显示它

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

编码愉快:)

【参考方案2】：

这种方法将帮助您动态选择报告和数据。我试过了。

角度视图。

<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# 类以进行报告。

用于反序列化 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;