使用 mvc 和 angular js 的 DevExpress 报告

Question

在我的网络应用程序中，我使用 asp.net mvc5 和 angular1。5.All 视图使用 ui-view 呈现为部分视图。我需要将 DevExpress 报告与 mvc5 和 angular 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

此方法将帮助您 select 动态报告和数据。我试过了。

角度视图。

<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

class 返回报告查看。

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# classes 以供报告。

C# class 反序列化 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; }
}

使用 mvc 和 angular js 的 DevExpress 报告

DevExpress report with mvc and angular js

devexpress

devexpress-mvc