Сегодня мы расскажем об особенностях использования встраиваемого компонента Дизайнер для создания отчетов и дашбордов в Angular- приложениях под управлением серверной стороны .NET Core и ASP.NET MVC (.NET Framework 4.7.2).

---

Введение

Дизайнер отчетов и дашбордов разработан с учетом особенностей фреймворка Angular, поддерживает темирование, локализацию интерфейса, имеет набор всех необходимых событий для полноценной работы с компонентами отчетности. Компонент совместим со всеми актуальными версиями фреймворка Angular (на момент написания этого текста, это версии 16, 17, 18). Скачать дизайнер отчетов можно здесь.

---

Начало работы

Для начала следует установить npm-пакет для дизайнера.

console

npm install stimulsoft-designer-angular

Кроме этого, для серверной стороны проекта необходимо установить NuGet пакет Stimulsoft.Dashboards.Angular.NetCore или Stimulsoft.Reports.Angular.NetCore.

console

dotnet add package Stimulsoft.Dashboards.Angular.NetCore
dotnet add package Stimulsoft.Reports.Angular.NetCore

---

Интеграция Angular компонента

После установки пакетов, сначала импортируем Stimulsoft-компоненты в файле проекта app.module.ts:

app.module.ts

...
	
import { StimulsoftDesignerModule } from 'stimulsoft-designer-angular';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    
  StimulsoftDesignerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Затем, в файле app.component.html определим параметры компонентов – вьювера и дизайнера.

app.component.html

<stimulsoft-designer-angular
  #designer
  [requestUrl]="'http://localhost:60801/api/designer'"
  [height]="'100%'"
  [width]="'100%'">
  Loading designer...
</stimulsoft-designer-angular>

После этого выполним запуск приложения.

---

Интеграция дизайнера в ASP.NET MVC-приложение под .NET Framework 4.7.2

Чтобы интегрировать дизайнер отчетов в приложение для начала нужно импортировать скрипты:

using Stimulsoft.Report;
using Stimulsoft.Report.Mvc;
using Stimulsoft.Report.Web;

...

и инициализировать дизайнер:

...

[AllowCrossSiteJson]
public ActionResult Get()
{
	var requestParams = StiMvcDesigner.GetRequestParams();

	if (requestParams.Action == StiAction.Undefined)
	{
		var options = new StiMvcDesignerOptions();
		return StiMvcDesigner.GetAngularScriptsResult(requestParams, options);
	}

	if (requestParams.ComponentType == StiComponentType.Designer)
	{
		switch (requestParams.Action)
		{
			case StiAction.GetReport:
				return GetReport();

			case StiAction.SaveReport:
				return SaveReport();
		}
	}

	return StiMvcDesigner.ProcessRequestResult();
}
		
...

После этого загружаем отчет с помощью следующего кода:

...

public ActionResult GetReport()
{
	var report = StiReport.CreateNewReport();
	var path = Server.MapPath("~/Reports/MasterDetail.mrt");
	report.Load(path);

	return StiMvcDesigner.GetReportResult(report);
}


...

и создаем метод для сохранения отчета:

...

public ActionResult SaveReport()
{
	var report = StiMvcDesigner.GetReportObject();

	var path = Server.MapPath("~/Reports/MasterDetail.mrt");
	report.Save(path);

	return StiMvcDesigner.SaveReportResult();
}

...

Скачать пример можно здесь.

---

Интеграция дизайнера в приложение под .NET Core

Представляем пошаговый гайд интеграции дизайнера отчетов для Angular-приложений на сервере .NET Core. В примере, будет рассмотрен случай использования событий загрузки и сохранения отчета.

Создадим контроллер для дизайнера с описанием действий GetReport, SaveReport и указанием специальных действий Get, Post.

DesignerController.cs

namespace Designer.Controllers
{
    [Produces("application/json")]
    [Route("api/designer")]
    public class DesignerController : Controller
    {
        static DesignerController()
        {
            // How to Activate
            //Stimulsoft.Base.StiLicense.Key = "6vJhGtLLLz2GNviWmUTrhSqnO...";
            //Stimulsoft.Base.StiLicense.LoadFromFile("license.key");
            //Stimulsoft.Base.StiLicense.LoadFromStream(stream);
        }

        [HttpGet]
        public IActionResult Get()
        {
            // Setting the required options on the server side
            var requestParams = StiAngularDesigner.GetRequestParams(this);
            if (requestParams.Action == StiAction.Undefined)
            {
                var options = new StiAngularDesignerOptions();
                options.Height = Unit.Percentage(100);
                return StiAngularDesigner.DesignerDataResult(requestParams, options);
            }

            return StiAngularDesigner.ProcessRequestResult(this);
        }

        [HttpPost]
        public IActionResult Post()
        {
            var requestParams = StiAngularDesigner.GetRequestParams(this);
            if (requestParams.ComponentType == StiComponentType.Designer)
            {
                switch (requestParams.Action)
                {
                    case StiAction.GetReport:
                        return GetReport();

                    case StiAction.SaveReport:
                        return SaveReport();
                }
            }

            return StiAngularDesigner.ProcessRequestResult(this);
        }

        public IActionResult GetReport()
        {
            var report = StiReport.CreateNewReport();
            var path = StiAngularHelper.MapPath(this, "Reports/HotelRevenue.mrt");
            report.Load(path);

            return StiAngularDesigner.GetReportResult(this, report);
        }

        public IActionResult SaveReport()
        {
            var report = StiAngularDesigner.GetReportObject(this);

            var path = StiAngularHelper.MapPath(this, "Reports/HotelRevenue.mrt");
            report.Save(path);

            return StiAngularDesigner.SaveReportResult(this);
        }
    }
}

Скачать пример можно здесь.