Интеграция с ASP.NET Core 3.1
1. | Создайте ASP.NET Core Empty приложение; |
2. | Добавьте пакет Stimulsoft.Forms.Web в это приложение используя менеджер пакетов NuGet; |
3. | В файле проекта Startup.cs, настройте приложение для использования контроллера: |
Startup.cs |
public void ConfigureServices(IServiceCollection services) { services.AddControllers(); }
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); }
app.UseDefaultFiles(); app.UseStaticFiles();
app.UseRouting();
app.UseCors(builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Forms}/{action=Action}"); }); }
|
4. | Создайте папку Controllers; |
5. | Добавьте новый контроллер FormsController.cs в папку Controllers, в котором будут обрабатываться запросы от Stimulsoft Forms компонента: |
FormsController.cs |
public class FormsController : Controller { [HttpPost] public IActionResult Action() { try { var data = JObject.Parse(this.HttpContext.Request.Form["data"]); var action = data["action"].ToString(); switch (action) { case "Initialize": var initData = StiWebForm.Initialize(data, null); return Json(initData.Content);
default: var result = StiWebForm.ProcessRequest(data); return result.ContentType switch { "application/pdf" => new FileContentResult(result.Content as byte[], result.ContentType), _ => Json(result.Content), }; } } catch (Exception e) { return new ContentResult() { Content = e.Message, ContentType = "text/plain" }; } } }
|
6. | Внутри папки приложения, выполните команду в консоли для создания нового Angular приложения без routing и CSS стилей: |
console |
ng new sti-forms-designer --routing false --style css
|
7. | Переименуйте папку sti-forms-designer в ClientApp; |
8. | В файле package.json, добавьте зависимости для Stimulsoft Forms и необходимых компонентов: |
package.json |
"stimulsoft-forms": "^2023.2.4", "ngx-color-picker": "^13.0.0", "primeicons": "^6.0.1", "primeng": "^14.1.2", "resize-observer-polyfill": "^1.5.1", "rxjs": "~6.5.0"
|
9. | В файле angular.json, добавьте пути стилей и увеличьте максимальный допустимый размер budgets: |
angular.json |
"build": { "options": { "styles": [ "src/styles.css", "node_modules/primeicons/primeicons.css", "node_modules/primeng/resources/primeng.min.css", "node_modules/stimulsoft-forms/theme.css" ]},
"configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "5mb" }] } } } } }
|
10. | В файле ClientApp\src\app\app.module.ts добавьте необходимые импорты: |
app.module.ts |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from "@angular/forms"; import { HttpClientModule } from "@angular/common/http"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { DropdownModule } from "primeng/dropdown"; import { StimulsoftFormsModule } from 'stimulsoft-forms'; import { AppComponent } from './app.component';
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, FormsModule, BrowserAnimationsModule, DropdownModule, StimulsoftFormsModule ], providers: [], bootstrap: [AppComponent] })
|
11. | В файле ClientApp\src\app\app.component.ts, добавьте импорт StimulsoftFormsService, определите параметры компонента и добавьте конструктор в класс AppComponent: |
app.component.ts |
import { Component } from '@angular/core'; import { StimulsoftFormsService } from 'stimulsoft-forms';
@Component({ selector: 'app-root', template: ` <stimulsoft-forms [requestUrl]="'http://localhost:7536/Forms/Action'" /*URL to Forms controller, you can find this url in launchSettings.json file of the project*/ [form]="form" /*StiForm object to use to create form object using StimulsoftFormsService*/ [style.width]="'100%'" [style.height]="'100%'"> </stimulsoft-forms> ` })
export class AppComponent { public form!: any;
constructor(public formService: StimulsoftFormsService) { this.form = this.formService.createElement("Form"); } }
|
12. | Измените ClientApp\src\app\index.html файл, добавив настройки стилей для тега <html> и <body>: |
index.html |
<!doctype html> <html lang="en" style="position: fixed;width:100%;height:100%"> <head> <meta charset="utf-8"> <title>StiFormsDesigner</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body style="width:100%;height:100%"> <app-root></app-root> </body> </html>
|
13. | Перейдите в папку ClientApp; |
14. | Выполните команду для установки Angular компонента: |
console |
npm i --force
|
15. | Выполните команду сборки Angular приложения: |
console |
ng build --output-hashing none
|
16. | Добавьте папку wwwroot в корень проекта; |
17. | Скопируйте все файлы из папки ClientApp\dist\sti-forms-designer\ в папку wwwroot; |
18. | Запустите проект. |