Heute erzählen wir über die Besonderheiten der Verwendung von einbettbarer Komponente Designer für Erstellen von Berichten und Dashboards in Angular-Anwendungen unter Server-Seite .NET Core und ASP.NET MVC (.NET Framework 4.7.2).

---

Einführung

Der Designer der Berichte und Dashboards ist entsprechend den Besonderheiten und Fähigkeiten der Plattform Angular entwickelt, unterstützt Thema-Auswahl und Schnittstelle-Lokalisierung, hat einen Satz von allen erforderlichen Ereignissen für die Arbeit mit Berichtskomponenten. Die Komponente ist mit allen aktuellen Versionen des Angular-Frameworks (im Moment das sind die Versionen 16, 17 und 18) kompatibel. Sie können den Berichtsdesigner hier herunterladen.

---

Erste Schritte

Am Anfang, muss man das npm-Paket für Designer installieren.

console

npm install stimulsoft-designer-angular

Außerdem, man muss NuGet-Paket Stimulsoft.Dashboards.Angular.NetCore oder Stimulsoft.Reports.Angular.NetCore für die Server-Seite des Projektes installieren.

console

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

---

Die Integration der Angular-Komponente

Nach der Installation der Pakete muss man zuerst die Stimulsoft-Komponenten in der Projekt-Datei app.module.ts importieren:

app.module.ts

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


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

Danach muss man der Parameter der Komponenten – Designer und Viewer – in der app.component.html-Datei festlegen.

app.component.html

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

Danach muss man die Anwendung ausführen.

---

Integration vom Designer in ASP.NET MVC-Anwendung unter .NET Framework 4.7.2

Um den Berichtsdesigner in die Anwendung zu integrieren, muss man zuerst die Skripts zu importieren:

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

...

und den Designer zu initialisieren:

...

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

Dann muss man den Bericht mit Hilfe vom folgenden Code laden:

...

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

	return StiMvcDesigner.GetReportResult(report);
}


...

und die Methode für Speichern vom Bericht erstellen:

...

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

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

	return StiMvcDesigner.SaveReportResult();
}

...

Sie können das Beispiel hier herunterladen.

---

Die Integration vom Designer in die Anwendung unter .NET Core

Das ist die Schritt-für-Schritt-Anleitung der Integration vom Berichtsdesigner für Angular-Anwendungen auf dem .NET Core-Server. In diesem Beispiel untersuchen wir die Verwendung von Ereignissen des Ladens und Speicherns vom Bericht.

Zuerst muss man den Controller mit der Beschreibung der Aktionen GetReport, SaveReport und der Angabe der speziellen Aktionen 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);
        }
    }
}

Sie können das Beispiel hier herunterladen.