- ...widgets
-
-````
-
-`data-widget-filter` attribute relates the form with the widgets. Whenever the form is submitted, all the widgets are automatically refreshed with the form fields as the filter.
-
-Instead of the `data-widget-filter` attribute, you can use the `filterForm` parameter of the `WidgetManager` constructor. Example:
-
-````js
-var myWidgetManager = new abp.WidgetManager({
- wrapper: '#MyDashboardWidgetsArea',
- filterForm: '#MyDashboardFilterForm'
-});
-````
-
-##### Filter Callback
-
-You may want to have a better control to provide filters while initializing and refreshing the widgets. In this case, you can use the `filterCallback` option:
-
-````js
-var myWidgetManager = new abp.WidgetManager({
- wrapper: '#MyDashboardWidgetsArea',
- filterCallback: function() {
- return $('#MyDashboardFilterForm').serializeFormToObject();
- }
-});
-````
-
-This example shows the default implementation of the `filterCallback`. You can return any JavaScript object with fields. Example:
-
-````js
-filterCallback: function() {
- return {
- 'startDate': $('#StartDateInput').val(),
- 'endDate': $('#EndDateInput').val()
- };
-}
-````
-
-The returning filters are passed to all widgets on `init` and `refresh`.
-
-### Widget JavaScript API
-
-A widget can define a JavaScript API that is invoked by the `WidgetManager` when needed. The code sample below can be used to start to define an API for a widget.
-
-````js
-(function () {
- abp.widgets.NewUserStatisticWidget = function ($wrapper) {
-
- var getFilters = function () {
- return {
- ...
- };
- }
-
- var refresh = function (filters) {
- ...
- };
-
- var init = function (filters) {
- ...
- };
-
- return {
- getFilters: getFilters,
- init: init,
- refresh: refresh
- };
- };
-})();
-````
-
-`NewUserStatisticWidget` is the name of the widget here. It should match the widget name defined in the server side. All of the functions are optional.
-
-#### getFilters
-
-If the widget has internal custom filters, this function should return the filter object. Example:
-
-````js
-var getFilters = function() {
- return {
- frequency: $wrapper.find('.frequency-filter option:selected').val()
- };
-}
-````
-
-This method is used by the `WidgetManager` while building filters.
-
-#### init
-
-Used to initialize the widget when needed. It has a filter argument that can be used while getting data from server. `init` method is used when `WidgetManager.init()` function is called. It is also called if your widget requires a full re-load on refresh. See the `RefreshUrl` widget option.
-
-#### refresh
-
-Used to refresh the widget when needed. It has a filter argument that can be used while getting data from server. `refresh` method is used whenever `WidgetManager.refresh()` function is called.
-
-## Authorization
-
-Some widgets may need to be available only for authenticated or authorized users. In this case, use the following properties of the `Widget` attribute:
-
-* `RequiresAuthentication` (`bool`): Set to true to make this widget usable only for authentication users (user have logged in to the application).
-* `RequiredPolicies` (`List
-
-```
-
-> We've used [PrimeNG table](https://www.primefaces.org/primeng/#/table) in this component.
-
-The resulting books page is shown below:
-
-
-
-And this is the folder & file structure by the end of this tutorial:
-
-
-
-
-
-
-
- - Books -
-
-
-
-
- Book name
- Book type
- Publish date
- Price
-
-
-
-
- {%{{{ data.name }}}%}
- {%{{{ booksType[data.type] }}}%}
- {%{{{ data.publishDate | date }}}%}
- {%{{{ data.price }}}%}
-
-
-
-
-
-
-> This tutorial follows the [Angular Style Guide](https://angular.io/guide/styleguide#file-tree).
-
-### Next Part
-
-See the [next part](Part-II.md) of this tutorial.
+* [With ASP.NET Core MVC / Razor Pages UI](../Part-1?UI=MVC)
+* [With Angular UI](../Part-1?UI=NG)
diff --git a/docs/en/Tutorials/Angular/Part-II.md b/docs/en/Tutorials/Angular/Part-II.md
index 6d1c563600..65a7dc5714 100644
--- a/docs/en/Tutorials/Angular/Part-II.md
+++ b/docs/en/Tutorials/Angular/Part-II.md
@@ -1,587 +1,6 @@
-## Angular Tutorial - Part II
+# Tutorials
-### About this Tutorial
+## Application Development
-This is the second part of the Angular tutorial series. See all parts:
-
-- [Part I: Create the project and a book list page](Part-I.md)
-- **Part II: Create, Update and Delete books (this tutorial)**
-- [Part III: Integration Tests](Part-III.md)
-
-You can access to the **source code** of the application from the [GitHub repository](https://github.com/abpframework/abp/tree/dev/samples/BookStore-Angular-MongoDb).
-
-### Creating a New Book
-
-In this section, you will learn how to create a new modal dialog form to create a new book.
-
-#### Type Definition
-
-Create an interface, named `CreateUpdateBookInput` in the `books.ts` as shown below:
-
-```js
-export namespace Books {
- //...
- export interface CreateUpdateBookInput {
- name: string;
- type: BookType;
- publishDate: string;
- price: number;
- }
-}
-```
-
-`CreateUpdateBookInput` interface matches the `CreateUpdateBookDto` in the backend.
-
-#### Service Method
-
-Open the `books.service.ts` and add a new method, named `create` to perform an HTTP POST request to the server:
-
-```js
-create(createBookInput: Books.CreateUpdateBookInput): ObservableNew Book
-
-
-```
-
-Open the `book-list.component.ts` and add `isModalOpen` variable and `createBook` method to show/hide the modal.
-
-```js
-isModalOpen = false;
-
-//...
-
-createBook() {
- this.isModalOpen = true;
-}
-```
-
-
-
-#### Create a Reactive Form
-
-> [Reactive forms](https://angular.io/guide/reactive-forms) provide a model-driven approach to handling form inputs whose values change over time.
-
-Add a `form` variable and inject a `FormBuilder` service to the `book-list.component.ts` as shown below (remember add the import statement).
-
-```js
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-
-form: FormGroup;
-
-constructor(
- //...
- private fb: FormBuilder
-) {}
-```
-
-> The [FormBuilder](https://angular.io/api/forms/FormBuilder) service provides convenient methods for generating controls. It reduces the amount of boilerplate needed to build complex forms.
-
-Add the `buildForm` method to create book form.
-
-```js
-buildForm() {
- this.form = this.fb.group({
- name: ['', Validators.required],
- type: [null, Validators.required],
- publishDate: [null, Validators.required],
- price: [null, Validators.required],
- });
-}
-```
-
-- The `group` method of `FormBuilder` (`fb`) creates a `FormGroup`.
-- Added `Validators.required` static method that validates the related form element.
-
-Modify the `createBook` method as shown below:
-
-```js
-createBook() {
- this.buildForm();
- this.isModalOpen = true;
-}
-```
-
-#### Create the DOM Elements of the Form
-
-Open `book-list.component.html` and add the form in the body template of the modal.
-
-```html
-
-
- - Books -
-
-
-
-
-
-
-
-
-
- {%{{{ selectedBook.id ? 'Edit' : 'New Book' }}}%}
-
- ...
-
-
-```
-
-The final actions dropdown UI looks like below:
-
-
-
-#### Delete Confirmation Dialog
-
-Open `book-list.component.ts` and inject the `ConfirmationService`.
-
-```js
-import { ConfirmationService } from '@abp/ng.theme.shared';
-//...
-constructor(
- //...
- private confirmationService: ConfirmationService
-)
-```
-
-> `ConfirmationService` is a simple service provided by ABP framework that internally uses the PrimeNG.
-
-Add a delete method to the `BookListComponent`:
-
-```js
-import { ... , DeleteBook } from '../../store/actions';
-import { ... , Toaster } from '@abp/ng.theme.shared';
-//...
-delete(id: string, name: string) {
- this.confirmationService
- .error(`${name} will be deleted. Do you confirm that?`, 'Are you sure?')
- .subscribe(status => {
- if (status === Toaster.Status.confirm) {
- this.store.dispatch(new DeleteBook(id));
- }
- });
-}
-```
-
-The `delete` method shows a confirmation popup and subscribes for the user response. `DeleteBook` action dispatched only if user clicks to the `Yes` button. The confirmation popup looks like below:
-
-
-
-### Next Part
-
-See the [next part](Part-III.md) of this tutorial.
+* [With ASP.NET Core MVC / Razor Pages UI](../Part-1?UI=MVC)
+* [With Angular UI](../Part-1?UI=NG)
diff --git a/docs/en/Tutorials/Angular/Part-III.md b/docs/en/Tutorials/Angular/Part-III.md
index 6601bfb938..65a7dc5714 100644
--- a/docs/en/Tutorials/Angular/Part-III.md
+++ b/docs/en/Tutorials/Angular/Part-III.md
@@ -1,178 +1,6 @@
-## Angular Tutorial - Part III
+# Tutorials
-### About this Tutorial
+## Application Development
-This is the third part of the Angular tutorial series. See all parts:
-
-- [Part I: Create the project and a book list page](Part-I.md)
-- [Part II: Create, Update and Delete books](Part-II.md)
-- **Part III: Integration Tests (this tutorial)**
-
-This part covers the **server side** tests. You can access to the **source code** of the application from the [GitHub repository](https://github.com/abpframework/abp/tree/dev/samples/BookStore-Angular-MongoDb).
-
-### Test Projects in the Solution
-
-There are multiple test projects in the solution:
-
-
-
-Each project is used to test the related application project. Test projects use the following libraries for testing:
-
-* [xunit](https://xunit.github.io/) as the main test framework.
-* [Shoudly](http://shouldly.readthedocs.io/en/latest/) as an assertion library.
-* [NSubstitute](http://nsubstitute.github.io/) as a mocking library.
-
-### Adding Test Data
-
-Startup template contains the `BookStoreTestDataSeedContributor` class in the `Acme.BookStore.TestBase` project that creates some data to run tests on.
-
-Change the `BookStoreTestDataSeedContributor` class as show below:
-
-````C#
-using System;
-using System.Threading.Tasks;
-using Volo.Abp.Data;
-using Volo.Abp.DependencyInjection;
-using Volo.Abp.Domain.Repositories;
-using Volo.Abp.Guids;
-
-namespace Acme.BookStore
-{
- public class BookStoreTestDataSeedContributor
- : IDataSeedContributor, ITransientDependency
- {
- private readonly IRepositoryBooks
-```` - -* This code changes the default inheritance of the Razor View Page Model so it **inherits** from the `BookStorePage` class (instead of `PageModel`). The `BookStorePage` class which comes with the startup template and provides some shared properties/methods used by all pages. -* Ensure that the `IndexModel` (*Index.cshtml.cs)* has the `Acme.BookStore.Web.Pages.Books` namespace, or update it in the `Index.cshtml`. - -#### Add Books Page to the Main Menu - -Open the `BookStoreMenuContributor` class in the `Menus` folder and add the following code to the end of the `ConfigureMainMenuAsync` method: - -````c# -context.Menu.AddItem( - new ApplicationMenuItem("BooksStore", l["Menu:BookStore"]) - .AddItem(new ApplicationMenuItem("BooksStore.Books", l["Menu:Books"], url: "/Books")) -); -```` - -#### Localizing the Menu Items - -Localization texts are located under the `Localization/BookStore` folder of the `Acme.BookStore.Domain.Shared` project: - - - -Open the `en.json` file and add localization texts for `Menu:BookStore` and `Menu:Books` keys to the end of the file: - -````json -{ - "culture": "en", - "texts": { - "Menu:BookStore": "Book Store", - "Menu:Books": "Books" - } -} -```` - -* ABP's localization system is built on [ASP.NET Core's standard localization](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization) system and extends it in many ways. See the [localization document](../../Localization.md) for details. -* Localization key names are arbitrary. You can set any name. We prefer to add `Menu:` prefix for menu items to distinguish from other texts. If a text is not defined in the localization file, it **fallbacks** to the localization key (ASP.NET Core's standard behavior). - -Run the application and see the new menu item has been added to the top bar: - - - -When you click to the Books menu item, you are redirected to the new Books page. - -#### Book List - -We will use the [Datatables.net](https://datatables.net/) JQuery plugin to show list of tables on the page. Datatables can completely work via AJAX, it is fast and provides a good user experience. Datatables plugin is configured in the startup template, so you can directly use it in any page without including any style or script file to your page. - -##### Index.cshtml - -Change the `Pages/Books/Index.cshtml` as following: - -````html -@page -@inherits Acme.BookStore.Web.Pages.BookStorePage -@model Acme.BookStore.Web.Pages.Books.IndexModel -@section scripts -{ -@L["Books"]
-@L["Books"]
-Books
+```` + +* This code changes the default inheritance of the Razor View Page Model so it **inherits** from the `BookStorePage` class (instead of `PageModel`). The `BookStorePage` class which comes with the startup template, provides some shared properties/methods used by all pages. + +* Set the `IndexModel`'s namespace to `Acme.BookStore.Pages.Books` in `Index.cshtml.cs`. + + + +**Index.cshtml.cs:** + +```csharp +using Microsoft.AspNetCore.Mvc.RazorPages; + +namespace Acme.BookStore.Web.Pages.Books +{ + public class IndexModel : PageModel + { + public void OnGet() + { + + } + } +} +``` + +#### Add books page to the main menu + +Open the `BookStoreMenuContributor` class in the `Menus` folder and add the following code to the end of the `ConfigureMainMenuAsync` method: + +````csharp +//... +namespace Acme.BookStore.Web.Menus +{ + public class BookStoreMenuContributor : IMenuContributor + { + private async Task ConfigureMainMenuAsync(MenuConfigurationContext context) + { + //<-- added the below code + context.Menu.AddItem( + new ApplicationMenuItem("BooksStore", l["Menu:BookStore"]) + .AddItem( + new ApplicationMenuItem("BooksStore.Books", l["Menu:Books"], url: "/Books") + ) + ); + //--> + } + } +} +```` + +{{end}} + +#### Localize the menu items + +Localization texts are located under the `Localization/BookStore` folder of the `Acme.BookStore.Domain.Shared` project: + + + +Open the `en.json` (*English translations*) file and add the below localization texts to the end of the file: + +````json +{ + "Culture": "en", + "Texts": { + "Menu:Home": "Home", + "Welcome": "Welcome", + "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.", + + "Menu:BookStore": "Book Store", + "Menu:Books": "Books", + "Actions": "Actions", + "Edit": "Edit", + "PublishDate": "Publish date", + "NewBook": "New book", + "Name": "Name", + "Type": "Type", + "Price": "Price", + "CreationTime": "Creation time", + "AreYouSureToDelete": "Are you sure you want to delete this item?" + } +} +```` + +* ABP's localization system is built on [ASP.NET Core's standard localization](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization) system and extends it in many ways. See the [localization document](https://docs.abp.io/en/abp/latest/Localization) for details. +* Localization key names are arbitrary. You can set any name. As a best practice, we prefer to add `Menu:` prefix for menu items to distinguish from other texts. If a text is not defined in the localization file, it **fallbacks** to the localization key (as ASP.NET Core's standard behavior). + +{{if UI == "MVC"}} + +Run the project, login to the application with the username `admin` and password `1q2w3E*` and see the new menu item has been added to the menu. + + + +When you click to the Books menu item under the Book Store parent, you are being redirected to the new Books page. + +#### Book list + +We will use the [Datatables.net](https://datatables.net/) jQuery plugin to show the book list. [Datatables](https://datatables.net/) can completely work via AJAX, it is fast, popular and provides a good user experience. [Datatables](https://datatables.net/) plugin is configured in the startup template, so you can directly use it in any page without including any style or script file to your page. + +##### Index.cshtml + +Change the `Pages/Books/Index.cshtml` as following: + +````html +@page +@inherits Acme.BookStore.Web.Pages.BookStorePage +@model Acme.BookStore.Web.Pages.Books.IndexModel +@section scripts +{ +@L["Books"]
+
+
+```
+
+* We added HTML code of book list page.
+
+Now you can see the final result on your browser:
+
+
+
+The file system structure of the project:
+
+
+
+In this tutorial we have applied the rules of official [Angular Style Guide](https://angular.io/guide/styleguide#file-tree).
+
+{{end}}
+
+### Next Part
+
+See the [part 2](part-2.md) for creating, updating and deleting books.
diff --git a/docs/en/Tutorials/Part-2.md b/docs/en/Tutorials/Part-2.md
new file mode 100644
index 0000000000..08e17e0e3f
--- /dev/null
+++ b/docs/en/Tutorials/Part-2.md
@@ -0,0 +1,1446 @@
+## ASP.NET Core {{UI_Value}} Tutorial - Part 2
+````json
+//[doc-params]
+{
+ "UI": ["MVC","NG"]
+}
+````
+
+{{
+if UI == "MVC"
+ DB="ef"
+ DB_Text="Entity Framework Core"
+ UI_Text="mvc"
+else if UI == "NG"
+ DB="mongodb"
+ DB_Text="MongoDB"
+ UI_Text="angular"
+else
+ DB ="?"
+ UI_Text="?"
+end
+}}
+
+### About this tutorial
+
+This is the second part of the ASP.NET Core {{UI_Value}} tutorial series. All parts:
+
+* [Part I: Creating the project and book list page](part-1.md)
+* **Part II: Creating, updating and deleting books (this tutorial)**
+* [Part III: Integration tests](part-3.md)
+
+*You can also watch [this video course](https://amazingsolutions.teachable.com/p/lets-build-the-bookstore-application) prepared by an ABP community member, based on this tutorial.*
+
+{{if UI == "MVC"}}
+
+### Creating a new book
+
+In this section, you will learn how to create a new modal dialog form to create a new book. The modal dialog will look like in the below image:
+
+
+
+#### Create the modal form
+
+Create a new razor page, named `CreateModal.cshtml` under the `Pages/Books` folder of the `Acme.BookStore.Web` project.
+
+
+
+##### CreateModal.cshtml.cs
+
+Open the `CreateModal.cshtml.cs` file (`CreateModalModel` class) and replace with the following code:
+
+````C#
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Acme.BookStore.Web.Pages.Books
+{
+ public class CreateModalModel : BookStorePageModel
+ {
+ [BindProperty]
+ public CreateUpdateBookDto Book { get; set; }
+
+ private readonly IBookAppService _bookAppService;
+
+ public CreateModalModel(IBookAppService bookAppService)
+ {
+ _bookAppService = bookAppService;
+ }
+
+ public async Task
+
+
+
+
+
+
+ + {%{{{ "::Menu:Books" | abpLocalization }}}%} +
+
+
+
+
+
+ {%{{{ "::Name" | abpLocalization }}}%}
+ {%{{{ "::Type" | abpLocalization }}}%}
+ {%{{{ "::PublishDate" | abpLocalization }}}%}
+ {%{{{ "::Price" | abpLocalization }}}%}
+
+
+
+
+ {%{{{ data.name }}}%}
+ {%{{{ booksType[data.type] }}}%}
+ {%{{{ data.publishDate | date }}}%}
+ {%{{{ data.price }}}%}
+
+
+
+