带有 mvc 和 Angular js 的 DevExpress 报告答案

【问题标题】：DevExpress report with mvc and angular js带有 mvc 和 Angular js 的 DevExpress 报告
【发布时间】：2017-07-21 23:53:39
【问题描述】：

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

【问题讨论】：

标签： devexpress devexpress-mvc

【解决方案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; }
}

【讨论】：