Skip to content

Commit

Permalink
Merge pull request #219 from aspnetzero/devexpress-reporting-document…
Browse files Browse the repository at this point in the history
…ation

add DevExpress-Reporting-Implementation.md
  • Loading branch information
ismcagdas authored Mar 3, 2021
2 parents 087da5b + 431b0d2 commit 312f292
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 0 deletions.
156 changes: 156 additions & 0 deletions docs/en/DevExpress-Reporting-Implementation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
# DevExpress Reporting

In this document, we will integrate [DevExpress Reporting](https://www.devexpress.com/subscriptions/reporting/) to ASP.NET Zero (ASP.NET Core version) step by step.

1. Download [DevExpress Reporting](https://www.devexpress.com/subscriptions/reporting/).

2. Open your ASP.NET Zero project.

3. Import `DevExpress.AspNetCore.Reporting` package to `[YOURAPPNAME].Web.Mvc` project.

4. Then go to `Startup.cs` and add these code parts:

```csharp
public IServiceProvider ConfigureServices(IServiceCollection services)
{
//...
services.AddDevExpressControls(); //add this line
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILoggerFactory loggerFactory)
{
//...
app.UseDevExpressControls(); //add this line
}
```



5. Now, you can create a sample report to test if it all works. Go to `[YOURAPPNAME].Web.Mvc` and create a folder named `Reports`.
6. Right click on the `Reports` folder then click `Add` -> `New Item`, then select `DevExpress Report` item.
7. Select `Blank` report in the opening wizard, and create new empty report named SampleReport.

![blank-selection](images/devexpress-reporting-blank-selection.png)

*(Design your report as you wish)*

8. Go to `package.json` and add following dependencies. (It is located in `[YOURAPPNAME].Web.Mvc` project)

```json
dependencies: [
"devextreme": "20.2.5",
"@devexpress/analytics-core": "20.2.5",
"devexpress-reporting": "20.2.5",
"jquery-ui-dist": "1.12.1"
]
```

*Note: Version of the nuget and npm packages should match*

![nuget-package-version](images/devexpress-reporting-nuget-package-version.png)

9. Go to `bundles.json` in mvc project and add following bundles.

```json
{
"scripts": [
{
"output": "view-resources/Areas/App/Views/_Bundles/sample-report-min.js",
"input": [
"node_modules/jquery-ui-dist/jquery-ui.js",
"node_modules/knockout/build/output/knockout-latest.js",
"node_modules/devextreme/dist/js/dx.all.js",
"node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.js",
"node_modules/devexpress-reporting/dist/js/dx-webdocumentviewer.js"
]
}
],
"styles": [
{
"output": "/view-resources/Areas/App/Views/_Bundles/sample-report.min.css",
"input": [
"node_modules/jquery-ui-dist/jquery-ui.css",
"node_modules/devextreme/dist/css/dx.common.css",
"node_modules/devextreme/dist/css/dx.light.css",
"node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
"node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
"node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
]
}
]
}
```

10. Go to `_Layout.cshtml` located in `[YOURAPPNAME].Web.Mvc\Areas\App\Views\Layout\_Layout.cshtml` and add new render section named `HeaderScripts` as nonrequired.

![header-scripts](images/devexpress-reporting-header-scripts.png)

11. Create new controller named `SampleReportController` in MVC project's Areas/App folder.

```csharp
[Area("App")]
public class SampleReportController : Zerov1002CoreMvcDemoControllerBase
{
public IActionResult Index()
{
return View();
}
}
```

12. Create `Index.cshtml` and add following code into it.

```cshtml
@using DevExpress.AspNetCore
@using Zerov1002CoreMvcDemo.Web.Reports;

@section Styles
{
<link rel="stylesheet" abp-href="/view-resources/Areas/App/Views/_Bundles/sample-report.css" asp-append-version="true" />
}

@section HeaderScripts
{
<script abp-src="/view-resources/Areas/App/Views/_Bundles/app-layout-libs.js" asp-append-version="true"></script>

<script abp-src="/view-resources/Areas/App/Views/_Bundles/sample-report.js" asp-append-version="true"></script>
}

<div class="content d-flex flex-column flex-column-fluid">
<abp-page-subheader title="@L("SampleReport")">
</abp-page-subheader>

<div class="@(await GetContainerClass())">
<div class="card card-custom gutter-b">
<div class="card-body">
@(Html.DevExpress().WebDocumentViewer("DocumentViewer")
.Height("1000px")
.Bind(new SampleReport())
)
</div>
</div>
</div>
</div>
```

Your reporting file is ready to use.

Note: If you get a reference error about `WebDocumentViewerController`, `QueryBuilderController` or `ReportDesignerController`, you can follow the solution below:

* Go to you `[YOURAPPNAME]WebMvcModule` .

* Add following code into `PreInitialize` function

```csharp
public override void PreInitialize()
{
//...
IocManager.Register(typeof(WebDocumentViewerController), DependencyLifeStyle.Transient);
IocManager.Register(typeof(QueryBuilderController), DependencyLifeStyle.Transient);
IocManager.Register(typeof(ReportDesignerController), DependencyLifeStyle.Transient);
}
```



You can visit **/App/SampleReport** URL under your website to see your report.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions docs/en/nav-aspnet-core-mvc.json
Original file line number Diff line number Diff line change
Expand Up @@ -595,6 +595,10 @@
{
"text": "Sign In Without Specifying Tenant",
"path": "Core-Mvc-Sign-In-Without-Specifying-Tenant.md"
},
{
"test": "Using DevExpress Reporting with ASP.NET Zero",
"path": "DevExpress-Reporting-Implementation.md"
}
]
},
Expand Down

0 comments on commit 312f292

Please sign in to comment.