DevExpress report with mvc and angular js

Question

In my web application,i am using asp.net mvc5 and angular1.5.All views are rendered as partial using ui-view. I need to integrate DevExpress reporting with mvc5 and angular js. Does anyone have Idea how i can integrate DevExpress report with mvc5 and angularjs 1.5.

Answer 1

please review the following links for your question, the current solution is to have separate page for the report viewer and you can use iframe to show it inside your app

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

Happy coding :)

Answer 2

This approach will help you to select report and data dynamically. i have tried it.

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>

home controller.

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

Index view (which generate report ).

@{
    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 which retuns report to view.

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

as am using rest services i am de-serializing json to c# classes for report.

C# class to de-serialize json data.

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