diff --git a/docs/en/cli/index.md b/docs/en/cli/index.md index 3fd8eee2f4..9acb0bb2e8 100644 --- a/docs/en/cli/index.md +++ b/docs/en/cli/index.md @@ -70,6 +70,7 @@ Here, is the list of all available commands before explaining their details: * **`clear-download-cache`**: Clears the templates download cache. * **`check-extensions`**: Checks the latest version of the ABP CLI extensions. * **`install-old-cli`**: Installs old ABP CLI. +* **`generate-razor-page`**: Generates a page class that you can use it in the ASP NET Core pipeline to return an HTML page. ### help @@ -964,6 +965,118 @@ Usage: abp install-old-cli [options] ``` +### generate-razor-page + +`generate-razor-page` command to generate a page class and then use it in the ASP NET Core pipeline to return an HTML page. + +Usage: + +1. Create a new `Razor Page(MyPage.cshtml)` that inherits from `AbpCompilationRazorPageBase` in `Views` folder. +2. Create a `MyPageModel` class in the same folder. +3. Create a `MyPage.js` and `MyPage.css` files in the same folder. +4. Add the following code to the `MyPage.cshtml`, `MyPage.css` and `MyPage.js` files. + +```cs +public class MyPageModel +{ + public string Message { get; set; } + + public MyPageModel(string message) + { + Message = message; + } +} +``` + +```cs +@using System.Globalization +@using Volo.Abp.AspNetCore.RazorViews +@inherits AbpCompilationRazorPageBase +@{ + Response.ContentType = "text/html; charset=utf-8"; + Response.StatusCode = 200; +} + +@functions{ + public MyPage(MyPageModel model) + { + Model = model; + } + + public MyPageModel Model { get; set; } +} + + + + + + @HtmlEncoder.Encode(Model.Message) + + +

@HtmlEncoder.Encode(Model.Message)

+ + + + + + +``` + +```css +body { + background-color: #65b2ff; + color: #495057; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +``` + +```js +console.log('MyPage.js loaded!'); +``` + +5. Finally, run the `generate-razor-page` command under the `Views` folder: + +```bash +> abp generate-razor-page + +Generating code files for pages in /MyProject/Views + Generating code file for page MyPage.cshtml ... + Inlining file MyPage.css + Inlining file MyPage.js + Done! +1 files successfully generated. +``` + +The output will be like in the above command output, and `MyPage.Designer.cs` file will be created in the same folder. It's a standard C# class that you can use it in the pipeline to return an HTML page: + +```cs +app.Use(async (httpContext, next) => +{ + if (true) // Your condition + { + var page = new MyPage(new MyPageModel("Test message")); + await page.ExecuteAsync(httpContext); + } + else + { + await next(); + } +}); +``` + +![Razor Page](./../images/abp-generate-razor-page.png) + #### Options * ```--version``` or ```-v```: Specifies the version for ABP CLI to be installed. diff --git a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-custom-content-above-filter.png b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-custom-content-above-filter.png index 0feab57342..ac81a885ec 100644 Binary files a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-custom-content-above-filter.png and b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-custom-content-above-filter.png differ diff --git a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-form.png b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-form.png index ef469a3d9d..d0827ed369 100644 Binary files a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-form.png and b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-with-form.png differ diff --git a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-without-form.png b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-without-form.png index 18b7780008..3c3707a857 100644 Binary files a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-without-form.png and b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters-without-form.png differ diff --git a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters.png b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters.png index 3f381a1cc6..5ae22b56a4 100644 Binary files a/docs/en/framework/ui/angular/images/angular-advanced-entity-filters.png and b/docs/en/framework/ui/angular/images/angular-advanced-entity-filters.png differ diff --git a/docs/en/framework/ui/angular/images/manage-profile-page-new-tab.png b/docs/en/framework/ui/angular/images/manage-profile-page-new-tab.png index 2700ccbe90..6d3145ccd4 100644 Binary files a/docs/en/framework/ui/angular/images/manage-profile-page-new-tab.png and b/docs/en/framework/ui/angular/images/manage-profile-page-new-tab.png differ diff --git a/docs/en/framework/ui/angular/images/manage-profile-page.png b/docs/en/framework/ui/angular/images/manage-profile-page.png index 3df5c0f395..a699c29743 100644 Binary files a/docs/en/framework/ui/angular/images/manage-profile-page.png and b/docs/en/framework/ui/angular/images/manage-profile-page.png differ diff --git a/docs/en/images/abp-generate-razor-page.png b/docs/en/images/abp-generate-razor-page.png new file mode 100644 index 0000000000..59ed12c7fd Binary files /dev/null and b/docs/en/images/abp-generate-razor-page.png differ diff --git a/docs/en/images/abp-overall-diagram-1600.png b/docs/en/images/abp-overall-diagram-1600.png index f785fa0097..16d397466a 100644 Binary files a/docs/en/images/abp-overall-diagram-1600.png and b/docs/en/images/abp-overall-diagram-1600.png differ diff --git a/docs/en/images/abp-overall-diagram.png b/docs/en/images/abp-overall-diagram.png index d83f952c66..c81469b75f 100644 Binary files a/docs/en/images/abp-overall-diagram.png and b/docs/en/images/abp-overall-diagram.png differ