Question

在我的Web应用程序中，我使用的是asp.net mvc5和angular1.5。所有视图都使用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

此方法可帮助您动态选择报表和数据。我试过了。

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

带有mvc和angular js的DevExpress报告

2 个答案: