Merge branch 'dev' into maliming/IdentityServer-v4

.github/ISSUE_TEMPLATES/feature.md

@@ -0,0 +1 @@
+Please describe the feature need!

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+name: "CodeQL"
+
+on:
+  push:
+    branches: [dev, rel-1.0, rel-1.1, rel-2.0, rel-2.1, rel-2.2, rel-2.3, rel-2.4, rel-2.5, rel-2.6, rel-2.7, rel-2.8, rel-2.9, rel-3.0, rel-3.1, rel-3.2]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [dev]
+  schedule:
+    - cron: '0 8 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['csharp', 'javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file. 
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.gitignore

@@ -303,4 +303,5 @@ modules/virtual-file-explorer/app/Volo.Abp.VirtualFileExplorer.DemoApp/Logs/
 /templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.HostWithIds/package-lock.json
 /templates/app/angular/package-lock.json
 /modules/client-simulation/demo/Volo.ClientSimulation.Demo/package-lock.json
-
+abp-build-config.json
+/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/Test/

abp_io/AbpIoLocalization/AbpIoLocalization/Admin/Localization/Resources/ar.json

@@ -41,6 +41,16 @@
     "ApplicationType": "نوع التطبيق",
     "Target": "استهداف",
     "TargetFilter": "استهداف",
+    "ModuleClass": "Module class",
+    "NugetPackageTarget.DomainShared": "Domain Shared",
+    "NugetPackageTarget.Domain": "Domain",
+    "NugetPackageTarget.Application": "Application",
+    "NugetPackageTarget.ApplicationContracts": "Application Contracts",
+    "NugetPackageTarget.HttpApi": "Http Api",
+    "NugetPackageTarget.HttpApiClient": "Http Api Client",
+    "NugetPackageTarget.Web": "Web",
+    "NugetPackageTarget.EntityFrameworkCore": "EntityFramework Core",
+    "NugetPackageTarget.MongoDB": "قاعدة بيانات مونجو",
     "Edit": "تعديل",
     "Delete": "حذف",
     "Refresh": "تحديث",
@@ -54,8 +64,8 @@
     "CreateAModule": "إنشاء وحدة",
     "CreateANugetPackage": "أنشاء حزمة Nuget",
     "AddNew": "اضف جديد",
-    "PackageAlreadyExist{0}": "",
-    "ModuleAlreadyExist{0}": "",
+    "PackageAlreadyExist{0}": "حزمة \"{0}\" تمت إضافتها من قبل.",
+    "ModuleAlreadyExist{0}": "وحدة \"{0}\" مضافة بالفعل.",
     "ClearCache": "مسح ذاكرة التخزين المؤقت",
     "SuccessfullyCleared": "تم محوه بنجاح",
     "Menu:NpmPackages": "حزم NPM",
@@ -93,7 +103,7 @@
     "MasterModules": "الوحدات الرئيسية",
     "OrganizationName": "اسم المنظمة",
     "CreationDate": "تاريخ الإنشاء",
-    "LicenseStart": "تاريخ بدء الرخصة",
+    "LicenseStartDate": "تاريخ بدء الترخيص",
     "LicenseEndDate": "تاريخ إنتهاء الرخصة",
     "OrganizationNamePlaceholder": "اسم المنظمة ...",
     "TotalQuestionCountPlaceholder": "إجمالي عدد الأسئلة ...",
@@ -156,6 +166,31 @@
     "TotalQuestionMustBeGreaterWarningMessage": "يجب أن يكون TotalQuestionCount أكبر من RemainingQuestionCount!",
     "QuestionCountsMustBeGreaterThanZero": "يجب أن يكون TotalQuestionCount و RemainingQuestionCount صفرًا أو أكبر من الصفر!",
     "UnlimitedQuestionCount": "عدد أسئلة غير محدود",
-    "Notes": "ملاحظات"
+    "Notes": "ملاحظات",
+    "Menu:Community": "المجتمع",
+    "Menu:Articles": "مقالات",
+    "Wait": "انتظر",
+    "Approve": "موافقة",
+    "Reject": "رفض",
+    "Details": "تفاصيل",
+    "Url": "عنوان الموقع",
+    "Title": "عنوان",
+    "ContentSource": "مصدر المحتوى",
+    "Status": "الحالة",
+    "ReadArticle": "إقرأ المقال",
+    "ArticleHasBeenWaiting": "تم إيقاف المقال",
+    "ArticleHasBeenApproved": "تم الموافقة على المقال",
+    "ArticleHasBeenRejected": "تم رفض المقال",
+    "Permission:Community": "المجتمع",
+    "Permission:CommunityArticle": "مقال",
+    "Link": "رابط",
+    "Enum:ContentSource:0": "Github",
+    "Enum:ContentSource:1": "خارجى",
+    "Enum:Status:0": "انتظار",
+    "Enum:Status:1": "مرفوض",
+    "Enum:Status:2": "تمت الموافقة",
+    "Summary": "مُلخص",
+    "AuthorName": "اسم المؤلف",
+    "CoverImage": "صورة الغلاف"
   }
 }

abp_io/AbpIoLocalization/AbpIoLocalization/Base/Localization/Resources/ar.json

@@ -0,0 +1,31 @@
+{
+  "culture": "ar",
+  "texts": {
+    "Volo.AbpIo.Domain:010004": "تم الوصول إلى الحد الأقصى لعدد الأعضاء!",
+    "Volo.AbpIo.Domain:010005": "تم الوصول إلى الحد الأقصى لعدد المالكين!",
+    "Volo.AbpIo.Domain:010006": "هذا المستخدم هو بالفعل مالك في هذه المنظمة!",
+    "Volo.AbpIo.Domain:010007": "هذا المستخدم هو بالفعل مطور في هذه المنظمة!",
+    "Volo.AbpIo.Domain:010008": "لا يمكن أن يكون عدد المطورين المسموح لهم أقل من عدد المطورين الحاليين!",
+    "Volo.AbpIo.Domain:010009": "لا يمكن أن يكون عدد المطورين المسموح لهم أقل من 0!",
+    "Volo.AbpIo.Domain:010010": "تم تجاوز الحد الأقصى لعدد عناوين mac!",
+    "Volo.AbpIo.Domain:010011": "لا يمكن أن تحتوي الرخصة الشخصية على أكثر من مطور واحد!",
+    "Volo.AbpIo.Domain:010012": "لا يمكن تمديد الترخيص بعد شهر واحد من انتهاء صلاحية الترخيص!",
+    "Volo.AbpIo.Domain:020001": "تعذر حذف حزمة NPM هذه لأن \"{NugetPackages}\" حزم Nuget تعتمد على هذه الحزمة.",
+    "Volo.AbpIo.Domain:020002": "تعذر حذف حزمة NPM هذه لأن \"{Modules}\" الوحدات النمطية تستخدم هذه الحزمة.",
+    "Volo.AbpIo.Domain:020003": "تعذر حذف حزمة NPM هذه لأن \"{Modules}\" الوحدات النمطية تستخدم هذه الحزمة و \"{NugetPackages}\" حزم Nuget تعتمد على هذه الحزمة.",
+    "Volo.AbpIo.Domain:020004": "تعذر حذف حزمة Nuget هذه لأن \"{Modules}\" الوحدات النمطية تستخدم هذه الحزمة.",
+    "WantToLearn?": "تريد أن تتعلم؟",
+    "ReadyToGetStarted?": "على استعداد للبدء؟",
+    "JoinOurCommunity": "انضم إلى مجتمعنا",
+    "GetStartedUpper": "دعنا نبدأ",
+    "ForkMeOnGitHub": "GitHub أعطنى تنبيه على",
+    "Features": "خصائص",
+    "GetStarted": "دعنا نبدأ",
+    "Documents": "وثائق",
+    "Community": "مجتمع",
+    "ContributionGuide": "دليل المساهمة",
+    "Blog": "المدونة",
+    "Commercial": "تجارى",
+    "SeeDocuments": "انظر للوثائق"
+  }
+}

abp_io/AbpIoLocalization/AbpIoLocalization/Commercial/Localization/Resources/ar.json

@@ -0,0 +1,35 @@
+{
+  "culture": "ar",
+  "texts": {
+    "OrganizationManagement": "إدارة المنظمة",
+    "OrganizationList": "قائمة المنظمات",
+    "Volo.AbpIo.Commercial:010003": "لست مالك هذه المنظمة!",
+    "OrganizationNotFoundMessage": "لا توجد أى منظمة!",
+    "DeveloperCount": "المحجوز / إجمالى المطورين",
+    "QuestionCount": "المتبقى / إجمالى الأسئلة",
+    "Unlimited": "غير محدود",
+    "Owners": "مُلاّك",
+    "AddMember": "تسجيل عضو",
+    "AddOwner": "تسجيل مالك",
+    "AddDeveloper": "تسجيل مطور",
+    "UserName": "اسم المستخدم",
+    "Name": "الاسم",
+    "EmailAddress": "البريد الإلكترونى",
+    "Developers": "مطورون",
+    "LicenseType": "نوع الرخصة",
+    "Manage": "إدارة",
+    "StartDate": "تاريخ البداية",
+    "EndDate": "تاريخ الإنتهاء",
+    "Modules": "Modules",
+    "LicenseExtendMessage": "تم تمديد تاريخ انتهاء الترخيص الخاص بك إلى {0}",
+    "LicenseUpgradeMessage": "تمت ترقية ترخيصك إلى {0}",
+    "LicenseAddDeveloperMessage": "تمت إضافة {0} من المطورين إلى ترخيصك",
+    "Volo.AbpIo.Commercial:010004": "لا يمكن العثور على المستخدم المحدد! يجب أن يكون المستخدم قد سجل بالفعل.",
+    "MyOrganizations": "منظماتى",
+    "ApiKey": "مفتاح API",
+    "UserNameNotFound": "لا يوجد مستخدم باسم {0}",
+    "SuccessfullyAddedToNewsletter": "شكرا لك على الاشتراك في النشرة الإخبارية لدينا!",
+    "MyProfile": "ملفي",
+    "EmailNotValid": "من فضلك أدخل بريد أليكترونى صحيح."
+  }
+}

abp_io/AbpIoLocalization/AbpIoLocalization/Community/Localization/Resources/ar.json

@@ -0,0 +1,68 @@
+{
+  "culture": "ar",
+  "texts": {
+    "Permission:CommunityArticle": "مقالة المجتمع",
+    "Permission:Edit": "تعديل",
+    "Waiting": "انتظار",
+    "Approved": "تمت الموافقة",
+    "Rejected": "مرفوض",
+    "Wait": "انتظر",
+    "Approve": "موافق",
+    "Reject": "رفض",
+    "ReadArticle": "إقرأ المقال",
+    "Status": "الحالة",
+    "ContentSource": "مصدر المحتوى",
+    "Details": "التفاصيل",
+    "Url": "عنوان الموقع",
+    "Title": "العنوان",
+    "CreationTime": "وقت الإنشاء",
+    "Save": "حفظ",
+    "SameUrlAlreadyExist": "نفس عنوان الموقع موجود بالفعل إذا كنت تريد إضافة هذه المقالة ، يجب عليك تغيير عنوانها!",
+    "UrlIsNotValid": "عنوان الموقع غير صحيح.",
+    "UrlNotFound": "عنوان الموقع غير موجود.",
+    "UrlContentNotFound": "محتوى الموقع غير موجود.",
+    "Summary": "الخلاصة",
+    "MostRead": "الأكثر قراءة",
+    "Latest": "آخر",
+    "ContributeAbpCommunity": "المساهمة في مجتمع ABP",
+    "SubmitYourArticle": "إرسال مقالتك",
+    "ContributionGuide": "دليل المساهمة",
+    "BugReport": "الإبلاغ عن خطأ",
+    "SeeAllArticles": "انظر جميع المقالات",
+    "WelcomeToABPCommunity!": "مرحبًا بك في مجتمع ABP!",
+    "MyProfile": "ملفى",
+    "MyOrganizations": "منظماتي",
+    "EmailNotValid": "من فضلك أدخل بريد أليكترونى صحيح.",
+    "FeatureRequest": "طلب خاصية جديدة",
+    "CreateArticleTitleInfo": "عنوان المقال الذي سيظهر في قائمة المقالات.",
+    "CreateArticleUrlInfo": "الأصل GitHub / عنوان URL خارجي للمقالة.",
+    "CreateArticleSummaryInfo": "ملخص قصير للمقال ليتم عرضه في قائمة المقالات.",
+    "CreateArticleCoverInfo": "لإنشاء مقال فعال ، أضف صورة غلاف. لن يتم قبول سوى صور بنسبة عرض إلى ارتفاع تبلغ 9:16!",
+    "ThisExtensionIsNotAllowed": "امتداد الملف غير مسموح.",
+    "TheFileIsTooLarge": "مسار الملف طويل جداً",
+    "GoToTheArticle": "الذهاب للمقال",
+    "Contribute": "ساهم",
+    "OverallProgress": "التقدم الكلى",
+    "Done": "تم",
+    "Open": "افتح",
+    "Closed": "أُغلق",
+    "LatestQuestionOnThe": "آخر سؤال فى",
+    "Stackoverflow": "Stackoverflow",
+    "Votes": "تصويتات",
+    "Answer": "إجابة",
+    "Views": "مشاهدة",
+    "Answered": "تمت الإجابة عنه",
+    "WaitingForYourAnswer": "بانتظار إجابتك",
+    "Asked": "تم السؤال",
+    "AllQuestions": "كل الأسئلة",
+    "NextVersion": "الإصدار القادم",
+    "MilestoneErrorMessage": "تعذر الحصول على تفاصيل المعالم الحالية من Github.",
+    "QuestionItemErrorMessage": "تعذر الحصول على أحدث تفاصيل السؤال من Stackoverflow.",
+    "Oops": "عفواً!",
+    "CreateArticleSuccessMessage": "تم تقديم المقال بنجاح. سيتم نشره بعد مراجعة من إدارة الموقع.",
+    "ChooseCoverImage": "اختر صورة الغلاف...",
+    "CoverImage": "صورة الغلاف",
+    "ShareYourExperiencesWithTheABPFramework": "شارك خبراتك مع إطار عمل برنامج ABP!",
+    "Optional": "اختيارى"
+  }
+}

abp_io/AbpIoLocalization/AbpIoLocalization/Community/Localization/Resources/en.json

@@ -82,6 +82,7 @@
     "SeeAllAnnouncements": "See All Announcements",
     "LatestBlogPost": "Latest Blog Post",
     "Edit": "Edit",
-    "ProfileImageChange": "Change the profile image"
+    "ProfileImageChange": "Change the profile image",
+    "BlogItemErrorMessage": "Could not get the latest blog post details from ABP."
   }
 }

abp_io/AbpIoLocalization/AbpIoLocalization/Www/Localization/Resources/ar.json

@@ -0,0 +1,161 @@
+{
+  "culture": "ar",
+  "texts": {
+    "GetStarted": "ابدأ - قوالب بدء التشغيل",
+    "Create": "إنشاء",
+    "NewProject": "مشروع جديد",
+    "DirectDownload": "تحميل مباشر",
+    "ProjectName": "اسم المشروع",
+    "ProjectType": "نوع المشروع",
+    "DatabaseProvider": "مزود قاعدة البيانات",
+    "NTier": "N- الطبقة",
+    "IncludeUserInterface": "تشمل واجهة المستخدم",
+    "CreateNow": "إنشاء جديد",
+    "TheStartupProject": "مشروع بدء التشغيل",
+    "Tutorial": "الدورة التعليمية",
+    "UsingCLI": "باستخدام CLI",
+    "SeeDetails": "انظر التفاصيل",
+    "AbpShortDescription": "ABP Framework بنية أساسية كاملة لإنشاء تطبيقات ويب حديثة باتباع أفضل ممارسات واتفاقيات تطوير البرامج.",
+    "SourceCodeUpper": "شفرة المصدر",
+    "LatestReleaseLogs": "أحدث سجلات الإصدار",
+    "Infrastructure": "البنية التحتية",
+    "Architecture": "الهيكلة",
+    "Modular": "معياري",
+    "DontRepeatYourself": "لا تكرر نفسك",
+    "DeveloperFocused": "تركيز المطور",
+    "FullStackApplicationInfrastructure": "البنية التحتية الكاملة للتطبيق.",
+    "DomainDrivenDesign": "Domain Driven Design",
+    "DomainDrivenDesignExplanation": "تم تصميمه وتطويره بناءً على أنماط ومبادئ DDD. يوفر نموذجًا متعدد الطبقات لتطبيقك.",
+    "Authorization": "تفويض",
+    "AuthorizationExplanation": "إذن متقدم مع نظام أذونات مستخدم ودور ودقيق. مبني على مكتبة هوية Microsoft.",
+    "MultiTenancy": "متعدد الايجار",
+    "MultiTenancyExplanationShort": "جعلت تطبيقات SaaS سهلة! متعدد الإيجارات المتكاملة من قاعدة البيانات إلى واجهة المستخدم.",
+    "CrossCuttingConcerns": "اهتمامات مشتركة",
+    "CrossCuttingConcernsExplanationShort": "بنية تحتية كاملة للتفويض والتحقق من الصحة ومعالجة الاستثناءات والتخزين المؤقت وتسجيل التدقيق وإدارة المعاملات والمزيد.",
+    "BuiltInBundlingMinification": "تجميع وتصغير مدمج",
+    "BuiltInBundlingMinificationExplanation": "لا حاجة لاستخدام أدوات خارجية للتجميع والتصغير. تقدم ABP طريقة أبسط وديناميكية وقوية ومتكاملة ومدمجة!",
+    "VirtualFileSystem": "نظام الملفات الافتراضي",
+    "VirtualFileSystemExplanation": "قم بتضمين العروض والنصوص والأنماط والصور ... في الحزم / المكتبات وإعادة استخدامها في تطبيقات مختلفة.",
+    "Theming": "تصميم",
+    "ThemingExplanationShort": "استخدم وتخصيص سمة واجهة المستخدم القياسية القائمة على التمهيد أو قم بإنشاء سمة خاصة بك.",
+    "BootstrapTagHelpersDynamicForms": "أدوات مساعدة علامة التمهيد والنماذج الديناميكية",
+    "BootstrapTagHelpersDynamicFormsExplanation": "بدلاً من كتابة التفاصيل المتكررة لمكونات التمهيد يدويًا ، استخدم مساعدي علامات ABP لتبسيطها والاستفادة من التحسس. أنشئ نماذج واجهة مستخدم بسرعة استنادًا إلى نموذج C # باستخدام مساعد علامة النموذج الديناميكي.",
+    "HTTPAPIsDynamicProxies": "HTTP APIs & Dynamic Proxies",
+    "HTTPAPIsDynamicProxiesExplanation": "كشف خدمات التطبيقات تلقائيًا على أنها واجهات برمجة تطبيقات HTTP بنمط REST ، واستهلكها باستخدام وكلاء JavaScript و C # الديناميكيين.",
+    "CompleteArchitectureInfo": "هندسة معمارية حديثة لإنشاء حلول برمجية قابلة للصيانة.",
+    "DomainDrivenDesignBasedLayeringModelExplanation": "يساعدك على تنفيذ بنية طبقات تستند إلى DDD وبناء قاعدة رمز قابلة للصيانة.",
+    "DomainDrivenDesignBasedLayeringModelExplanationCont": "يوفر قوالب بدء التشغيل ، والملخصات ، والفئات الأساسية ، والخدمات ، والوثائق والأدلة لمساعدتك على تطوير تطبيقك بناءً على أنماط ومبادئ DDD.",
+    "MicroserviceCompatibleModelExplanation": "تم تصميم إطار العمل الأساسي ووحدات ما قبل الإنشاء مع مراعاة بنية الخدمات المصغرة.",
+    "MicroserviceCompatibleModelExplanationCont": "يوفر البنية التحتية وعمليات الدمج والعينات والوثائق لتنفيذ حلول الخدمات المصغرة بشكل أسهل ، في حين أنه لا يجلب تعقيدًا إضافيًا إذا كنت تريد تطبيقًا مترابطًا.",
+    "ModularInfo": "يوفر ABP نظام وحدة نمطية يسمح لك بتطوير وحدات تطبيق قابلة لإعادة الاستخدام ، والربط بأحداث دورة حياة التطبيق ، والتعبير عن التبعيات بين الأجزاء الأساسية في نظامك.",
+    "PreBuiltModulesThemes": "الوحدات والسمات المبنية مسبقًا",
+    "PreBuiltModulesThemesExplanation": "الوحدات والسمات مفتوحة المصدر والتجارية جاهزة للاستخدام في تطبيق عملك.",
+    "NuGetNPMPackages": "حزم NuGet و NPM",
+    "NuGetNPMPackagesExplanation": "توزع كحزم NuGet و NPM. سهل التركيب والترقية.",
+    "ExtensibleReplaceable": "قابل للتوسيع / قابل للاستبدال",
+    "ExtensibleReplaceableExplanation": "تم تصميم جميع الخدمات والوحدات النمطية في الاعتبار قابلية التوسع. يمكنك استبدال الخدمات والصفحات والأنماط والمكونات.",
+    "CrossCuttingConcernsExplanation2": "اجعل قاعدة الشفرة أصغر حتى تتمكن من التركيز على الكود الخاص بنشاطك التجاري.",
+    "CrossCuttingConcernsExplanation3": "لا ترسل وقتًا لتنفيذ متطلبات التطبيق المشتركة في مشاريع متعددة.",
+    "AuthenticationAuthorization": "المصادقة والتفويض",
+    "ExceptionHandling": "معالجة الاستثناء",
+    "Validation": "التحقق من الصحة",
+    "DatabaseConnection": "اتصال قاعدة البيانات",
+    "TransactionManagement": "إدارة المعاملات",
+    "AuditLogging": "تدوين التسجيل",
+    "Caching": "التخزين المؤقت",
+    "Multitenancy": "التعددية",
+    "DataFiltering": "تصفية البيانات",
+    "ConventionOverConfiguration": "اتفاقية على التكوين",
+    "ConventionOverConfigurationExplanation": "تنفذ ABP اصطلاحات التطبيق الشائعة افتراضيًا باستخدام الحد الأدنى من التكوين أو صفر.",
+    "ConventionOverConfigurationExplanationList1": "التسجيل التلقائى للخدمات المعروفة بحقن التبعية.",
+    "ConventionOverConfigurationExplanationList2": "يعرض خدمات التطبيقات على أنها واجهات برمجة تطبيقات HTTP من خلال اصطلاحات التسمية.",
+    "ConventionOverConfigurationExplanationList3": "يقوم بإنشاء وكلاء عميل HTTP ديناميكي لـ C # و JavaScript.",
+    "ConventionOverConfigurationExplanationList4": "يوفر المستودعات الافتراضية للكيانات الخاصة بك.",
+    "ConventionOverConfigurationExplanationList5": "إدارة وحدة العمل حسب طلب الويب أو طريقة خدمة التطبيق.",
+    "ConventionOverConfigurationExplanationList6": "ينشر إنشاء وتحديث وحذف الأحداث للكيانات الخاصة بك.",
+    "BaseClasses": "الفئات الأساسية",
+    "BaseClassesExplanation": "فئات أساسية مسبقة الصنع لأنماط التطبيق الشائعة.",
+    "DeveloperFocusedExplanation": "ABP للمطورين.",
+    "DeveloperFocusedExplanationCont": "يهدف إلى تبسيط عملية تطوير البرامج اليومية مع عدم تقييدك من كتابة رمز منخفض المستوى.",
+    "SeeAllFeatures": "انظر جميع الميزات",
+    "CLI_CommandLineInterface": "CLI (واجهة سطر الأوامر)",
+    "CLI_CommandLineInterfaceExplanation": "يتضمن CLI لمساعدتك على أتمتة إنشاء مشاريع جديدة وإضافة وحدات نمطية جديدة.",
+    "StartupTemplates": "قوالب بدء التشغيل",
+    "StartupTemplatesExplanation": "توفر قوالب بدء التشغيل المختلفة حلاً مهيئًا بالكامل لبدء التطوير السريع.",
+    "BasedOnFamiliarTools": "بناءاً على أدوات معروفة",
+    "BasedOnFamiliarToolsExplanation": "مصمم ومتكامل مع الأدوات الشائعة التي تعرفها بالفعل. منحنى تعليمي منخفض ، سهل التكيف ، تنمية مريحة.",
+    "ORMIndependent": "ORM مستقل",
+    "ORMIndependentExplanation": "الإطار الأساسي هو ORM / قاعدة البيانات مستقل ويمكن أن يعمل مع أي مصدر بيانات. يتوفر مقدمو Entity Framework Core و MongoDB بالفعل.",
+    "Features": "استكشف ميزات إطار عمل ABP",
+    "ABPCLI": "ABP CLI",
+    "Modularity": "النمطية",
+    "BootstrapTagHelpers": "مساعدي علامة التمهيد",
+    "DynamicForms": "شاشات ديناميكية",
+    "BundlingMinification": "التجميع والتصغير",
+    "BackgroundJobs": "وظائف الخلفية",
+    "DDDInfrastructure": "البنية التحتية DDD",
+    "DomainDrivenDesignInfrastructure": "البنية التحتية للتصميم يحركها المجال",
+    "AutoRESTAPIs": "واجهات برمجة تطبيقات Auto REST",
+    "DynamicClientProxies": "وكلاء العميل الديناميكي",
+    "DistributedEventBus": "حافلة الحدث الموزعة",
+    "DistributedEventBusWithRabbitMQIntegration": "حافلة الحدث الموزعة مع تكامل RabbitMQ",
+    "TestInfrastructure": "اختبار البنية التحتية",
+    "AuditLoggingEntityHistories": "سجل التدقيق وتاريخ الكيان",
+    "ObjectToObjectMapping": "مطابقة كائن إلى كائن",
+    "EmailSMSAbstractions": "التجريد من البريد الإلكتروني والرسائل النصية القصيرة",
+    "EmailSMSAbstractionsWithTemplatingSupport": "تجريدات البريد الإلكتروني والرسائل النصية القصيرة مع دعم القوالب",
+    "Localization": "التعريب",
+    "SettingManagement": "إدارة الإعدادات",
+    "ExtensionMethods": "طرق التمديد",
+    "ExtensionMethodsHelpers": "طرق التمديد والمساعدين",
+    "AspectOrientedProgramming": "البرمجة الموجهة",
+    "DependencyInjection": "حقن التبعية",
+    "DependencyInjectionByConventions": "حقن التبعية بالاتفاقيات",
+    "ABPCLIExplanation": "ABP CLI (واجهة سطر الأوامر) هي أداة سطر أوامر لإجراء بعض العمليات الشائعة للحلول المستندة إلى ABP.",
+    "ModularityExplanation": "يوفر ABP بنية أساسية كاملة لبناء وحدات التطبيق الخاصة بك والتي قد تحتوي على كيانات وخدمات وتكامل قواعد البيانات وواجهات برمجة التطبيقات ومكونات واجهة المستخدم وما إلى ذلك ..",
+    "MultiTenancyExplanation": "لا يدعم إطار عمل ABP تطوير التطبيقات متعددة المستأجرين فحسب ، بل يجعل الكود الخاص بك في الغالب غير مدرك للتعددية المستأجرة.",
+    "MultiTenancyExplanation2": "يمكن تحديد المستأجر الحالي تلقائيًا ، وعزل بيانات المستأجرين المختلفين عن بعضهم البعض.",
+    "MultiTenancyExplanation3": "يدعم قاعدة بيانات واحدة وقاعدة بيانات لكل مستأجر ونهج مختلطة.",
+    "MultiTenancyExplanation4": "أنت تركز على رمز عملك وتدع إطار العمل للتعامل مع عقود الإيجار المتعددة نيابة عنك.",
+    "BootstrapTagHelpersExplanation": "بدلاً من كتابة التفاصيل المتكررة لمكونات التمهيد يدويًا ، استخدم مساعدي علامات ABP لتبسيطها والاستفادة من التحسس. يمكنك بالتأكيد استخدام Bootstrap متى احتجت إليه.",
+    "DynamicFormsExplanation": "يمكن لمساعدي النموذج الديناميكي وعلامات الإدخال إنشاء النموذج الكامل من فئة C # كنموذج.",
+    "AuthenticationAuthorizationExplanation": "خيارات المصادقة والترخيص الغنية المدمجة في ASP.NET Core Identity & IdentityServer4. يوفر نظام إذن موسع ومفصل.",
+    "CrossCuttingConcernsExplanation": "لا تكرر نفسك لتنفيذ كل هذه الأشياء الشائعة مرارًا وتكرارًا. ركز على رمز عملك ودع برنامج ABP يقوم بأتمتة ذلك من خلال الاتفاقيات.",
+    "DatabaseConnectionTransactionManagement": "اتصال قاعدة البيانات وإدارة المعاملات",
+    "CorrelationIdTracking": "تتبع معرف الارتباط",
+    "BundlingMinificationExplanation": "تقدم ABP نظام تجميع وتقليل بسيط وديناميكي وقوي ونمطي ومدمج.",
+    "VirtualFileSystemnExplanation": "يتيح نظام الملفات الظاهري إدارة الملفات غير الموجودة فعليًا على نظام الملفات (القرص). يتم استخدامه بشكل أساسي لتضمين ملفات (js ، css ، image ، cshtml ...) في التجميعات واستخدامها مثل الملفات الفعلية في وقت التشغيل.",
+    "ThemingExplanation": "يسمح نظام Theming بتطوير سمة التطبيق والوحدات النمطية الخاصة بك بشكل مستقل عن طريق تحديد مجموعة من المكتبات الأساسية المشتركة والتخطيطات ، بناءً على أحدث إطار عمل Bootstrap.",
+    "DomainDrivenDesignInfrastructureExplanation": "بنية تحتية كاملة لإنشاء تطبيقات متعددة الطبقات بناءً على أنماط ومبادئ التصميم المدفوع بالمجال ؛",
+    "Specification": "تخصيص",
+    "Repository": "مخزن",
+    "DomainService": "خدمة المجال",
+    "ValueObject": "كائن القيمة",
+    "ApplicationService": "خدمة التطبيق",
+    "DataTransferObject": "كائن نقل البيانات",
+    "AggregateRootEntity": "تجميع الجذر والكيان",
+    "AutoRESTAPIsExplanation": "يمكن لـ ABP تكوين خدمات التطبيقات الخاصة بك تلقائيًا كوحدات تحكم API حسب الاصطلاح.",
+    "DynamicClientProxiesExplanation": "استهلك واجهات برمجة التطبيقات الخاصة بك بسهولة من عملاء JavaScript و C#.",
+    "DistributedEventBusWithRabbitMQIntegrationExplanation": "انشر واستهلك الأحداث الموزعة بسهولة باستخدام ناقل الأحداث الموزع المدمج مع توفر تكامل RabbitMQ.",
+    "TestInfrastructureExplanation": "تم تطوير إطار العمل واختبار الوحدة والتكامل في الاعتبار. يوفر لك الفئات الأساسية لتسهيل الأمر. تأتي قوالب بدء التشغيل مع تكوين مسبق للاختبار.",
+    "AuditLoggingEntityHistoriesExplanation": "تسجيل تدقيق مدمج للتطبيقات المهمة للأعمال. الطلب والخدمة وتسجيل التدقيق على مستوى الطريقة وتاريخ الكيان مع تفاصيل مستوى الملكية.",
+    "EmailSMSAbstractionsWithTemplatingSupportExplanation": "تفصل تجريدات IEmailSender و ISmsSender منطق التطبيق الخاص بك عن البنية التحتية. يسمح نظام قوالب البريد الإلكتروني المتقدم بإنشاء قوالب البريد الإلكتروني وتعريبها واستخدامها بسهولة عند الحاجة.",
+    "LocalizationExplanation": "يسمح نظام التعريب بإنشاء موارد في ملفات JSON عادية واستخدامها لتعريب واجهة المستخدم الخاصة بك. وهو يدعم السيناريوهات المتقدمة مثل الوراثة والإضافات وتكامل JavaScript بينما يتوافق تمامًا مع نظام توطين AspNet Core.",
+    "SettingManagementExplanation": "حدد إعدادات التطبيق الخاص بك واحصل على القيم في وقت التشغيل بناءً على التكوين الحالي والمستأجر والمستخدم.",
+    "ExtensionMethodsHelpersExplanation": "لا تكرر نفسك حتى مع أجزاء التعليمات البرمجية البسيطة. الإضافات والمساعدات للأنواع القياسية تجعل التعليمات البرمجية أكثر وضوحًا وسهولة في الكتابة.",
+    "AspectOrientedProgrammingExplanation": "يوفر بنية تحتية مريحة لإنشاء وكلاء ديناميكيين وتنفيذ البرمجة الموجهة نحو الجانب. اعترض أي فئة وقم بتنفيذ التعليمات البرمجية الخاصة بك قبل وبعد تنفيذ كل طريقة.",
+    "DependencyInjectionByConventionsExplanation": "لا حاجة لتسجيل فصولك في حقن التبعية يدويًا. يسجل تلقائيًا أنواع الخدمات الشائعة حسب الاصطلاح. بالنسبة لأنواع الخدمات الأخرى ، يمكنك استخدام الواجهات والسمات لتسهيل الأمر ووضعه في مكانه.",
+    "DataFilteringExplanation": "تحديد واستخدام عوامل تصفية البيانات التي يتم تطبيقها تلقائيًا عند الاستعلام عن الكيانات من قاعدة البيانات. يتم توفير مرشحات Soft Delete & MultiTenant خارج الصندوق عند تنفيذ واجهات بسيطة.",
+    "PublishEvents": "نشر الأحداث",
+    "HandleEvents": "معالجة الأحداث",
+    "AndMore": "وأكثر من ذلك ...",
+    "Code": "شفرة",
+    "Result": "النتيجة",
+    "SeeTheDocumentForMoreInformation": "راجع الـ <a href=\"{1}\">{0} الوثيقة</a> لمزيد من المعلومات",
+    "IndexPageHeroSection": "<span class=\"first-line shine\"><strong>فتح المصدر</strong></span><span class=\"second-line text-uppercase\">تطبيق الويب<br />إطار </span><span class=\"third-line shine2\"><strong>لـ asp.net core</strong></span>",
+    "UiFramework": "إطار عمل واجهة المستخدم",
+    "EmailAddress": "البريد الإلكترونى",
+    "Mobile": "المحمول",
+    "ReactNative": "React Native"
+  }
+}

common.props

@@ -1,7 +1,7 @@
 <Project>
   <PropertyGroup> 
     <LangVersion>latest</LangVersion> 
-    <Version>3.2.0</Version>
+    <Version>3.3.0</Version>
     <NoWarn>$(NoWarn);CS1591;CS0436</NoWarn>
     <PackageIconUrl>https://abp.io/assets/abp_nupkg.png</PackageIconUrl>
     <PackageProjectUrl>https://abp.io/</PackageProjectUrl>

docs/en/.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "grammarly.userWords": [
+    "api",
+    "apiName",
+    "cli",
+    "defaultProject",
+    "formatter",
+    "md",
+    "monorepo",
+    "ngsw",
+    "npx",
+    "pwa",
+    "rootNamespace"
+  ]
+}

docs/en/API/Dynamic-CSharp-API-Clients.md

@@ -162,4 +162,4 @@ context.Services.AddHttpClientProxies(
 
 Using `asDefaultServices: false` may only be needed if your application has already an implementation of the service and you do not want to override/replace the other implementation by your client proxy.
 
-> If you disable `asDefaultServices`, you can only use `IHttpClientProxy<T>` interface to use the client proxies (see the related section above).
+> If you disable `asDefaultServices`, you can only use `IHttpClientProxy<T>` interface to use the client proxies. See the *IHttpClientProxy Interface* section above.

docs/en/AspNet-Boilerplate-Migration-Guide.md

@@ -364,9 +364,9 @@ ABP Framework doesn't have the same service. Instead, use `ICurrentUser` and `IC
 
 ABP Framework extends the [ASP.NET Core Authorization](https://docs.microsoft.com/en-us/aspnet/core/security/authorization/introduction) by adding **permissions** as auto [policies](https://docs.microsoft.com/en-us/aspnet/core/security/authorization/policies) and allowing the authorization system to be usable in the [application services](Application-Services.md) too.
 
-#### AbpAutorize vs Autorize
+#### AbpAuthorize vs Authorize
 
-Use the standard `[Autorize]` and `[AllowAnonymous]` attributes instead of ASP.NET Boilerplate's custom `[AbpAutorize]` and `[AbpAllowAnonymous]` attributes.
+Use the standard `[Authorize]` and `[AllowAnonymous]` attributes instead of ASP.NET Boilerplate's custom `[AbpAuthorize]` and `[AbpAllowAnonymous]` attributes.
 
 #### IPermissionChecker vs IAuthorizationService
 
@@ -672,9 +672,9 @@ It was like `abp.localization.localize(...)` in the ASP.NET Boilerplate.
 
 ### Navigation vs Menu
 
-In ASP.NET you create a class deriving from the `NavigationProvider` to define your menu elements. Menu items has `requiredPermissionName` attributes to restrict access to a menu element. Menu items were static and your class is executed only one time.
+In ASP.NET Boilerplate you create a class deriving from the `NavigationProvider` to define your menu elements. Menu items has `requiredPermissionName` attributes to restrict access to a menu element. Menu items were static and your class is executed only one time.
 
-Int the ABP Framework you need to create a class implements the `IMenuContributor` interface. Your class is executed whenever the menu needs to be rendered. So, you can conditionally add menu items.
+In the ABP Framework you need to create a class implements the `IMenuContributor` interface. Your class is executed whenever the menu needs to be rendered. So, you can conditionally add menu items.
 
 As an example, this is the menu contributor of the tenant management module:
 

docs/en/Blob-Storing.md

@@ -20,7 +20,7 @@ The ABP Framework has already the following storage provider implementations;
 * [Database](Blob-Storing-Database.md): Stores BLOBs in a database.
 * [Azure](Blob-Storing-Azure.md): Stores BLOBs on the [Azure BLOB storage](https://azure.microsoft.com/en-us/services/storage/blobs/).
 * [Aliyun](Blob-Storing-Aliyun.md): Stores BLOBs on the [Aliyun Storage Service](https://help.aliyun.com/product/31815.html).
-* [Ninio](Blob-Storing-Minio.md): Stores BLOBs on the [MinIO Object storage](https://min.io/).
+* [Minio](Blob-Storing-Minio.md): Stores BLOBs on the [MinIO Object storage](https://min.io/).
 * [Aws](Blob-Storing-Aws.md): Stores BLOBs on the[Amazon Simple Storage Service](https://min.io/).
 
 More providers will be implemented by the time. You can [request](https://github.com/abpframework/abp/issues/new) it for your favorite provider or [create it yourself](Blob-Storing-Custom-Provider.md) and [contribute](Contribution/Index.md) to the ABP Framework.

docs/en/Blog-Posts/2020-09-17 v3_2_Preview/POST.md

@@ -0,0 +1,262 @@
+# ABP Framework & ABP Commercial 3.2 RC With The New Blazor UI
+
+We are extremely excited today to release the [ABP Framework](https://abp.io/) Release Candidate (and the [ABP Commercial](https://commercial.abp.io/), as always). This release includes an early preview version of the **Blazor UI** for the ABP.IO Platform.
+
+## The Blazor UI
+
+While the Blazor UI **should be considered as experimental** for now, it is possible to start to develop your application today.
+
+### Fundamental Services
+
+Currently, implemented some important framework features;
+
+* **Authentication** through the MVC backend using the OpenId Connect authorization code flow. So, all the current login options (login, register, forgot password, external/social logins...) are supported.
+* **Authorization**, using the ABP Framework **permissions** as well as the standard authorization system.
+* **Localization** just works like the MVC UI.
+* **Basic Theme** with top main menu.
+* **Dynamic C# HTTP API proxies**, so you can directly consume your backend API by injecting the application service interfaces.
+* Some other **fundamental services** like `ISettingProvider`, `IFeatureChecker`, `ICurrentUser`...
+
+Also, the standard .net services are already available, like caching, logging, validation and much more. Since the ABP Framework is layered itself, all the non MVC UI related features are already usable for the Blazor UI.
+
+### Pre-Built Modules
+
+Some modules have been implemented;
+
+* **Identity** module is pre-installed and provides **user, role and permission management**.
+* **Profile management** page is implemented to allow to change password and personal settings.
+
+### About the Blazorise Library
+
+We've selected the [Blazorise](https://blazorise.com/) as a fundamental UI library for the Blazor UI. It already supports different HTML/CSS frameworks (like Bootstrap, Bulma, Ant Design...) and significantly increases the developer productivity.
+
+![blazorise-github](blazorise-github.png)
+
+We also have a good news: **[Mladen Macanović](https://github.com/stsrki)**, the creator of the Blazorise, is **joining to the core ABP Framework team** in the next weeks. We are excited to work with him to bring the power of these two successful projects together.
+
+### The Tutorial
+
+We've **updated** the [web application development tutorial](https://docs.abp.io/en/abp/3.2/Tutorials/Part-1?UI=Blazor) for the **Blazor UI**. You can start to develop applications today! The **source code** of the BookStore application developed with this tutorial is [here](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore).
+
+### Get started with the Blazor UI
+
+If you want to try the Blazor UI today, follow the instructions below.
+
+#### Upgrade the ABP CLI
+
+Install the latest [ABP CLI](https://docs.abp.io/en/abp/3.2/CLI) preview version:
+
+````bash
+dotnet tool update Volo.Abp.Cli -g --version 3.2.0-rc.2
+````
+
+#### Create a new Solution
+
+Then you can create a new solution using the *abp new* command:
+
+````bash
+abp new AbpBlazorDemo -u blazor --preview
+````
+
+Also specify the `-t app-pro` parameter if you are an ABP Commercial user.
+
+> See the ABP CLI documentation for the additional options, like MongoDB database or separated authentication server.
+
+#### Open the Solution
+
+Open the generated solution using the latest Visual Studio 2019. You will see a solution structure like the picture below:
+
+![visual-studio-solution-with-blazor](visual-studio-solution-with-blazor.png)
+
+#### Run the Application
+
+* Run the `DbMigrator` project to create the database and seed the initial data.
+* Run the `HttpApi.Host` project for the server side.
+* Run the `Blazor` project to start the Blazor UI.
+
+Use `admin` as the username and `1q2w3E*` as the password to login to the application.
+
+Here, a screenshot from the role management page of the Blazor UI:
+
+![blazor-role-management](blazor-role-management.png)
+
+## What's New with the ABP Framework 3.2
+
+Beside the Blazor UI, there are a lot of issues have been closed with [the milestone 3.2](https://github.com/abpframework/abp/milestone/39?closed=1). I will highlight some of the major features and changes released with this version.
+
+### MongoDB ACID Transactions
+
+[MongoDB integration](https://docs.abp.io/en/abp/3.2/MongoDB) now supports multi-document transactions that comes with the MongoDB 4.x.
+
+We've **disabled transactions** for solutions use the MongoDB, inside the `YourProjectMongoDbModule.cs` file in the MongoDB project. If your MongoDB server **supports transactions**, you should manually enable it in this class:
+
+```csharp
+Configure<AbpUnitOfWorkDefaultOptions>(options =>
+{
+    options.TransactionBehavior = UnitOfWorkTransactionBehavior.Auto;
+});
+```
+
+> Or you can delete this code since this is already the default behavior.
+
+#### Upgrade Notes
+
+If you are upgrading an existing solution and your MongoDB server doesn't support transactions, please disable it:
+
+```csharp
+Configure<AbpUnitOfWorkDefaultOptions>(options =>
+{
+    options.TransactionBehavior = UnitOfWorkTransactionBehavior.Disabled;
+});
+```
+
+See the [Unit Of Work document](https://docs.abp.io/en/abp/3.2/Unit-Of-Work) to learn more about UOW and transactions.
+
+Also, add [this file](https://github.com/abpframework/abp/blob/rel-3.2/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.MongoDB/MongoDb/MongoDbMyProjectNameDbSchemaMigrator.cs) into your MongoDB project (remember to change `MongoDbMyProjectNameDbSchemaMigrator` and `IMyProjectNameDbSchemaMigrator` with your own project name).
+
+#### Integration Tests
+
+> Transactions are also **disabled for automated integration tests** coming with the application startup template, since the [Mongo2Go](https://github.com/Mongo2Go/Mongo2Go) library (we use in the test projects) has a problem with the transactions. We've sent a [Pull Request](https://github.com/Mongo2Go/Mongo2Go/pull/101) to fix it and will enable the transactions again when they merge & release it.
+>
+> If you are upgrading an existing solution and using MongoDB, please disable transactions for the test projects just as described above.
+
+### Kafka Integration for the Distributed Event Bus
+
+ABP Framework's [distributed event system](https://docs.abp.io/en/abp/3.2/Distributed-Event-Bus) has been [integrated to RabbitMQ](https://docs.abp.io/en/abp/3.2/Distributed-Event-Bus-RabbitMQ-Integration) before. By the version 3.2, it has a Kafka integration package, named [Volo.Abp.EventBus.Kafka](https://www.nuget.org/packages/Volo.Abp.EventBus.Kafka).
+
+See the [Kafka integration documentation](https://docs.abp.io/en/abp/3.2/Distributed-Event-Bus-Kafka-Integration) to learn how to install and configure it.
+
+### Host Features
+
+[ABP Feature System](https://docs.abp.io/en/abp/3.2/Features) allows you to define features in your application. Then you can enable/disable a feature dynamically on the runtime. It is generally used in a [multi-tenant](https://docs.abp.io/en/abp/3.2/Multi-Tenancy) system to restrict features for tenants, so you can charge extra money for some features in a SaaS application.
+
+In some cases, you may want to use the same features in the host side (host is you as you are managing the tenants). For this case, we've added a "**Manage Host Features**" button to the Tenant Management page so you can open a modal dialog to select the features for the host side.
+
+![host-features](host-features.png)
+
+### AbpHttpClientBuilderOptions
+
+ABP Framework provides a system to dynamically create C# proxies to consume HTTP APIs from your client applications. `AbpHttpClientBuilderOptions` is a new option class to configure the `HttpClient`s used by the proxy system.
+
+**Example: Use the [Polly](https://github.com/App-vNext/Polly) library to retry up to 3 times for a failed HTTP request**
+
+````csharp
+public override void PreConfigureServices(ServiceConfigurationContext context)
+{
+    PreConfigure<AbpHttpClientBuilderOptions>(options =>
+    {
+        options.ProxyClientBuildActions.Add((remoteServiceName, clientBuilder) =>
+        {
+            clientBuilder.AddTransientHttpErrorPolicy(policyBuilder =>
+                policyBuilder.WaitAndRetryAsync(
+                    3,
+                    i => TimeSpan.FromSeconds(Math.Pow(2, i))
+                )
+            );
+        });
+    });
+}
+````
+
+See the issue [#5304](https://github.com/abpframework/abp/issues/5304) for the details.
+
+### ABP Build Command
+
+We are using **mono repository** approach and the [abp repository](https://github.com/abpframework/abp) has tens of solutions and hundreds of projects (the framework, modules, tooling, templates...) with all of them are referencing to each other.
+
+It gets a significant time to build the whole repository for every Git push. To **optimize** this process, we've created the **abp build** command in the [ABP CLI](https://docs.abp.io/en/abp/3.2/CLI):
+
+````bash
+abp build
+````
+
+We will use this command to build the abp repository or a solution inside it. However it is available to everyone in case of need.
+
+> **Most of the people will not need it**. If you need it, see the [ABP CLI](https://docs.abp.io/en/abp/3.2/CLI) document to learn all the details and options.
+
+### Other Features, Improvements and Changes
+
+* Introduced the `DynamicRangeAttribute` that can be used to determine the range values on runtime, just like the `DynamicStringLengthAttribute` was introduced before.
+* Improved the feature management modal for multi-tenant applications to group features on the UI and show hierarchically.
+* Added `--skip-cli-version-check` option to ABP CLI to improve the performance by bypassing the online version check.
+* Angular UI now redirect to MVC UI (the authentication server side) for profile management page, if the authorization code flow is used (which is the default).
+* Account module profile management page is now extensible. You can implement the `IProfileManagementPageContributor` interface and register it using the `ProfileManagementPageOptions` class.
+* Improvements and optimizations for the [Angular service proxy generation](https://blog.abp.io/abp/Introducing-the-Angular-Service-Proxy-Generation).
+
+And a lot of minor improvements and bug fixes. You can see [the milestone 3.2](https://github.com/abpframework/abp/milestone/39?closed=1) for all issues & PRs closed with this version.
+
+## What's New with the ABP Commercial 3.2
+
+### Breaking Changes
+
+The new *profile picture management* feature uses the [BLOB storing](https://docs.abp.io/en/abp/3.2/Blob-Storing) system, so it needs a Storage Provider. The new **startup template comes with the [Database BLOB Provider](https://docs.abp.io/en/abp/3.2/Blob-Storing-Database) pre-installed**. You can change it if you want to use another BLOB provider (like Azure, AWS or a simple file system).
+
+**Existing solutions must configure a BLOB provider** after upgrading to the version 3.2. Follow the [BLOB Storing document](https://docs.abp.io/en/abp/3.2/Blob-Storing#blob-storage-providers) to configure the provider yourself.
+
+### The Blazor UI
+
+The **experimental** Blazor UI is also available for the ABP Commercial. The [Lepton Theme](https://commercial.abp.io/themes) hasn't been implemented with this initial preview, however we are working on it with the highest priority.
+
+You can use the [ABP Suite](https://docs.abp.io/en/commercial/latest/abp-suite/index) or the following ABP CLI command to create a new solution with the Blazor UI:
+
+````bash
+abp new AbpBlazorDemo -u blazor -t app-pro --preview
+````
+
+Please try it and provide feedback to us. Thanks in advance.
+
+> See the instructions in the *Get started with the Blazor UI* section above to properly create and run your application.
+
+### File Management Angular UI
+
+Angular UI for the [File Management](https://commercial.abp.io/modules/Volo.FileManagement) module is available with the version 3.2. You can add it to your solution using the ABP Suite.
+
+![file-management-module-angular](file-management-module-angular.png)
+
+### Profile Picture Management
+
+We've added profile picture management for the account module, so a user can select one of the options below for her profile picture;
+
+* Use the default placeholder as the avatar.
+* Use [Gravatar](https://gravatar.com/) service to get the picture matching the email address of the user.
+* Upload a file as the profile picture.
+
+![account-profile-picture](account-profile-picture.jpg)
+
+### Two Factor Authentication Features
+
+Created [features](https://docs.abp.io/en/abp/3.2/Features) and [settings](https://docs.abp.io/en/abp/3.2/Settings) to disable, enable or force to use 2FA on login for the tenants and users.
+
+### Upgrading the ABP Suite
+
+You can use the following command to upgrade the ABP Suite to the latest preview version:
+
+````
+abp suite update --preview
+````
+
+## Other News
+
+### The ABP Community
+
+**ABP Community** web site is constantly being improved and new articles are added. We will add "**commenting**" and "**rating**" features to the articles soon to increase the interactivity between the people.
+
+![abp-community-20200917](abp-community-20200917.png)
+
+If you have something to share with the ABP community or want to follow the project progress, please check the **[community.abp.io](https://community.abp.io/)**!
+
+### CMS Kit Project
+
+We are silently working on a project, named [CMS Kit](https://github.com/abpframework/abp/tree/dev/modules/cms-kit), for a few months. CMS Kit is a set of reusable CMS (Content Management System) components based on the ABP Framework. Some of the components currently being developed:
+
+* **Comments**; Allows users to comment under something (a blog post, a document, an image... etc).
+* **Reactions**; Allows users to give reactions to something (a comment, a picture... etc.) using simple emoji icons.
+* **Rating**; Allows users to rate some content from 1 to 5.
+* **Newsletter**; Allows you to put a newsletter box to your web site to collect emails from users.
+* **Contact**; Put a form to get message from the web site visitors.
+
+There are more planned components like articles, tags, votes, favorites, portfolio, image gallery, FAQ... etc. We will document and deploy these components when they get matured and ready to use. Some of them will be open source & free while some of them are paid (included in the [ABP Commercial](https://commercial.abp.io/) license).
+
+## Feedback
+
+Please try the ABP Framework 3.2.0 RC and [provide feedback](https://github.com/abpframework/abp/issues/new) to help us to release a more stable version. The planned release date for the [3.2.0 final](https://github.com/abpframework/abp/milestone/43) version is October 01.

docs/en/Blog-Posts/2020-10-01 v3_2_Release_Stable/POST.md

@@ -0,0 +1,47 @@
+# ABP Framework 3.2 Final Has Been Released
+
+ABP Framework & ABP Commercial 3.2 have been released today.
+
+Since all the new features are already explained in details with the [3.2 RC Announcement Post](https://blog.abp.io/abp/ABP-Framework-ABP-Commercial-3.2-RC-With-The-New-Blazor-UI), I will not repeat all the details again. Please read [the RC post](https://blog.abp.io/abp/ABP-Framework-ABP-Commercial-3.2-RC-With-The-New-Blazor-UI) for **new feature and changes** you may need to do for your solution while upgrading to the version 3.2.
+
+## Creating New Solutions
+
+You can create a new solution with the ABP Framework version 3.2 by either using the `abp new` command or using the **direct download** tab on the [get started page](https://abp.io/get-started).
+
+> See the [getting started document](https://docs.abp.io/en/abp/latest/Getting-Started) for details.
+
+## How to Upgrade an Existing Solution
+
+### Install/Update the ABP CLI
+
+First of all, install the ABP CLI or upgrade to the latest version.
+
+If you haven't installed yet:
+
+````bash
+dotnet tool install -g Volo.Abp.Cli
+````
+
+To update an existing installation:
+
+```bash
+dotnet tool update -g Volo.Abp.Cli
+```
+
+### ABP UPDATE Command
+
+[ABP CLI](https://docs.abp.io/en/abp/latest/CLI) provides a handy command to update all the ABP related NuGet and NPM packages in your solution with a single command:
+
+````bash
+abp update
+````
+
+After the update command, check [the RC blog post](https://blog.abp.io/abp/ABP-Framework-ABP-Commercial-3.2-RC-With-The-New-Blazor-UI) to learn if you need to make any changes in your solution.
+
+> You may want to see the new [upgrading document](https://docs.abp.io/en/abp/latest/Upgrading).
+
+## About the Next Versions
+
+The next two versions (3.3 & 4.0) will be mostly related to completing the Blazor UI features and upgrading the ABP Framework & ecosystem to the .NET 5.0.
+
+The ultimate goal is to complete the version 4.0 with a stable Blazor UI with the fundamental features implemented and publish it just after the Microsoft lunches .NET 5 in this November.

docs/en/CLI-BuildCommand.md

@@ -0,0 +1,67 @@
+# Build Command
+
+Building a .NET project is hard when the project references a project reference outside of the solution or even from a different GIT repository. This command builds a GIT repository and it's depending repositories or a single .NET solution File. In order ```build``` command to work, its **executing directory** or passed ```--working-directory``` parameter's directory must contain one of;
+
+* A .NET solution file (*.sln)
+* abp-build-config.json
+
+When the executing directory  (or ```--working-directory``` parameter's directory) contains a .NET solution file, ```build``` command builds all the projects in the related solution file and all project references on building project files recursively. 
+
+When the executing directory  (or ```--working-directory``` parameter's directory) contains a ```abp-build-config.json```, ```build``` command builds all changed projects form its last build and all project references on building project files recursively. 
+
+# Build Command Config
+
+```abp-build-config.json``` contains properties below;
+
+* ```Name```: Name of the GIT repository. This can be friendly name of your GIT repository or any other unique string for the repository.
+* ```RootPath```: Root path of the repository which contains ```.git``` folder.
+* ```DependingRepositories```: Depending repository list of a repository. Each depending repository item contains same fields as a repository.
+* ```IgnoredDirectories```: Relative directory paths to ignore while building a GIT repository.
+
+A sample ```abp-build-config.json``` looks like for a Windows OS;
+
+````json
+{
+    "Name": "main-repository",
+    "RootPath": "D:\\GitHub\\main-repository",
+    "DependingRepositories": [{
+        "Name": "module-repository",
+        "RootPath": "D:\\GitHub\\module-repository"
+    }],
+    "IgnoredDirectories": [
+        "utils"
+    ]
+}
+````
+
+# Build Status
+
+ABP CLI stores a build status file for builds using the repository friendly names and current branch names in the;
+
+* ```%USERPROFILE%\.abp\build\``` for Windows.
+* ```$HOME/.abp/build/``` for Linux/macOS.
+
+and uses this file when building same repository next time and only builds affected projects and decreases the total build time. A sample build status file content looks like;
+
+````json
+{
+    "RepositoryName": "main-repository",
+    "BranchName": "dev",
+    "CommitId": "84ecde8ba275aeeb14d24a87ad46a1e941adf8ba",
+    "SucceedProjects": [{
+        "CsProjPath": "D:\\GitHub\\main-repository\\BookStore\\BookStore.Web.csproj",
+        "CommitId": "84ecde8ba275aeeb14d24a87ad46a1e941adf8ba"
+    }],
+    "DependingRepositories": [{
+        "RepositoryName": "module-repository",
+        "BranchName": "dev",
+        "CommitId": "0598b8e45af9507fc9ba8abf304e78fc7d434e04",
+        "SucceedProjects": [{
+            "CsProjPath": "D:\\GitHub\\module-repository\\identity-module\Identity\\Identity.Web.csproj",
+            "CommitId": "0598b8e45af9507fc9ba8abf304e78fc7d434e04"
+        }],
+        "DependingRepositories": []
+    }]
+}
+````
+

docs/en/CLI.md

@@ -31,6 +31,7 @@ Here, the list of all available commands before explaining their details:
 * **`update`**: Automatically updates all ABP related NuGet and NPM packages in a solution.
 * **`add-package`**: Adds an ABP package to a project.
 * **`add-module`**: Adds a [multi-package application module](https://docs.abp.io/en/abp/latest/Modules/Index) to a solution.
+* **`get-source`**: Downloads the source code of a module.
 * **`generate-proxy`**: Generates client side proxies to use HTTP API endpoints.
 * **`remove-proxy`**: Removes previously generated client side proxies.
 * **`switch-to-preview`**: Switches to the latest preview version of the ABP Framework.
@@ -39,6 +40,7 @@ Here, the list of all available commands before explaining their details:
 * **`translate`**: Simplifies to translate localization files when you have multiple JSON [localization](Localization.md) files in a source control repository.
 * **`login`**: Authenticates on your computer with your [abp.io](https://abp.io/) username and password.
 * **`logout`**: Logouts from your computer if you've authenticated before.
+* **`build`**: Builds a GIT repository and depending repositories or a single .NET solution.
 
 ### help
 
@@ -85,6 +87,8 @@ abp new Acme.BookStore
         * `--tiered`: Creates a tiered solution where Web and Http API layers are physically separated. If not specified, it creates a layered solution which is less complex and suitable for most scenarios.
       * `angular`: Angular. There are some additional options for this template:
         * `--separate-identity-server`: Separates the identity server application from the API host application. If not specified, you will have a single endpoint in the server side.
+      * `blazor`: Blazor. There are some additional options for this template:
+        * `--separate-identity-server`: Separates the identity server application from the API host application. If not specified, you will have a single endpoint in the server side.
       * `none`: Without UI. There are some additional options for this template:
         * `--separate-identity-server`: Separates the identity server application from the API host application. If not specified, you will have a single endpoint in the server side.
     * `--mobile` or `-m`: Specifies the mobile application framework. If not specified, no mobile application will be created. Available options:
@@ -176,7 +180,33 @@ abp add-module Volo.Blogging
 * `--solution` or `-s`: Specifies the solution (.sln) file path. If not specified, CLI tries to find a .sln file in the current directory.
 * `--skip-db-migrations`: For EF Core database provider, it automatically adds a new code first migration (`Add-Migration`) and updates the database (`Update-Database`) if necessary. Specify this option to skip this operation.
 * `-sp` or `--startup-project`: Relative path to the project folder of the startup project. Default value is the current folder.
-* `--with-source-code`: Add source code of the module instead of NuGet/NPM packages.
+* `--with-source-code`: Downloads the source code of the module to your solution folder and uses local project references instead of NuGet/NPM packages.
+* `--add-to-solution-file`: Adds the downloaded module to your solution file, so you will also see the projects of the module when you open the solution on a IDE. (only available when `--with-source-code` is used.)
+
+### get-source
+
+Downloads the source code of a module to your computer.
+
+Usage
+
+````bash
+abp get-source <module-name> [options]
+````
+
+Example:
+
+```bash
+abp get-source Volo.Blogging
+
+abp get-source Volo.Blogging --local-framework-ref --abp-path D:\GitHub\abp
+```
+
+#### Options
+
+* `--output-folder` or `-o`: Specifies the directory that source code will be downloaded in. If not specified, current directory is used.
+* `--version` or `-v`: Specifies the version of the  source code that will be downloaded. If not specified, latest version is used.
+* `--preview`: If no version option is specified, this option specifies if latest [preview version](Previews.md) will be used instead of latest stable version.
+* `-- local-framework-ref --abp-path`: Path of [ABP Framework GitHub repository](https://github.com/abpframework/abp) in your computer. This will be used for converting project references to your local system. If this is not specified, project references will be converted to NuGet references.
 
 ### generate-proxy
 
@@ -332,3 +362,31 @@ Logs you out by removing the session token from your computer.
 abp logout
 ```
 
+### build
+
+This command builds a GIT repository and it's depending repositories or a single .NET solution File. In order ```build``` command to work, its **executing directory** or passed ```--working-directory``` parameter's directory must contain one of;
+
+* A .NET solution file (*.sln)
+* abp-build-config.json (suggested to add this to .gitignore)
+
+Usage:
+
+````bash
+abp build [options]
+````
+
+Example:
+
+```
+abp build --build-name "prod" --dotnet-build-arguments "\"--no-dependencies\""
+```
+
+#### Options
+
+* ```--working-directory``` or ```-w```: Specifies the working directory. This option is useful when the command is executed outside of a GIT repository or when executing directory doesn't contain a .NET solution file.
+* ```--build-name``` or ```-n```: Specifies a name for the build. This option is useful when same repository is used for more than one different builds. 
+* ```--dotnet-build-arguments``` or ```-a```: Arguments to pass ```dotnet build``` when building project files.  This parameter must be passed like ```"\"{params}\""``` .
+* ```--force``` or ```-f```: Forces to build projects even they are not changed from the last successful build.
+
+For more details, see [build command documentation](CLI-BuildCommand.md).
+

docs/en/Caching.md

@@ -1,154 +1,167 @@
 # Caching
 
-ABP framework extends ASP.NET Core's distributed caching system.
+ABP Framework extends the [ASP.NET Core distributed cache](https://docs.microsoft.com/en-us/aspnet/core/performance/caching/distributed).
 
-## Volo.Abp.Caching Package
+## Installation
 
-> This package is already installed by default with the startup template. So, most of the time, you don't need to install it manually.
+> This package is already installed by default with the [application startup template](Startup-Templates/Application.md). So, most of the time, you don't need to install it manually.
 
-Volo.Abp.Caching is the core package of the caching system. Install it to your project using the package manager console (PMC):
+[Volo.Abp.Caching](https://www.nuget.org/packages/Volo.Abp.Caching) is the main package of the caching system. You can install it a project using the add-package command of the [ABP CLI](CLI.md):
 
 ```
-Install-Package Volo.Abp.Caching
+abp add-package Volo.Abp.Caching
 ```
 
-Then you can add **AbpCachingModule** dependency to your module:
+You need to run this command on a command line terminal in a folder containing a `csproj` file (see [other options](https://abp.io/package-detail/Volo.Abp.Caching) to install).
 
-```c#
-using Volo.Abp.Modularity;
-using Volo.Abp.Caching;
+## Usage
 
-namespace MyCompany.MyProject
-{
-    [DependsOn(typeof(AbpCachingModule))]
-    public class MyModule : AbpModule
-    {
-        //...
-    }
-}
-```
-
-## `IDistributedCache` Interface
+### `IDistributedCache` Interface
 
-ASP.NET Core defines the `IDistributedCache` interface to get/set cache values. But it has some difficulties:
+ASP.NET Core defines the `IDistributedCache` interface to get/set the cache values. But it has some difficulties:
 
 * It works with **byte arrays** rather than .NET objects. So, you need to **serialize/deserialize** the objects you need to cache.
 * It provides a **single key pool** for all cache items, so;
   * You need to care about the keys to distinguish **different type of objects**.
-  * You need to care about the cache items of **different tenants** (see [multi-tenancy](Multi-Tenancy.md)).
+  * You need to care about the cache items of **different tenants** in a [multi-tenant](Multi-Tenancy.md) system.
 
 > `IDistributedCache` is defined in the `Microsoft.Extensions.Caching.Abstractions` package. That means it is not only usable for ASP.NET Core applications, but also available to **any type of applications**.
 
-> Default implementation of the `IDistributedCache` interface is the `MemoryDistributedCache` which works **in-memory**. See [ASP.NET Core's documentation](https://docs.microsoft.com/en-us/aspnet/core/performance/caching/distributed) to see how to switch to **Redis** or another cache provider.
+> Default implementation of the `IDistributedCache` interface is the `MemoryDistributedCache` which works **in-memory**. See [ASP.NET Core's documentation](https://docs.microsoft.com/en-us/aspnet/core/performance/caching/distributed) to see how to switch to Redis or another cache provider. Also, see the [Redis Cache](Redis-Cache.md) document if you want to use the Redis as the distributed cache server.
 
 See [ASP.NET Core's distributed caching document](https://docs.microsoft.com/en-us/aspnet/core/performance/caching/distributed) for more information.
 
-## `IDistributedCache<TCacheItem>` Interface
+### `IDistributedCache<TCacheItem>` Interface
 
 ABP framework defines the generic `IDistributedCache<TCacheItem>` interface in the [Volo.Abp.Caching](https://www.nuget.org/packages/Volo.Abp.Caching/) package. `TCacheItem` is the type of the object stored in the cache. 
 
 `IDistributedCache<TCacheItem>` solves the difficulties explained above;
 
 * It internally **serializes/deserializes** the cached objects. Uses **JSON** serialization by default, but can be overridden by replacing the `IDistributedCacheSerializer` service in the [dependency injection](Dependency-Injection.md) system.
-* It automatically adds a **cache name** prefix to the cache keys based on the object type stored in the cache. Default cache name is the full name of the cache item class (`CacheItem` postfix is removed if your cache item class ends with it). You can use the `CacheName` attribute on the cache item class to set the cache name.
-* It automatically adds the **current tenant id** to the cache key to distinguish cache items for different tenants (only works if your application is [multi-tenant](Multi-Tenancy.md)). Define `IgnoreMultiTenancy` attribute on the cache item class to disable this if you want to share the cached objects among all tenants in a multi-tenant application.
-* Allows to define a **global cache key prefix** per application, so different applications can use their isolated key pools in a shared distributed cache source.
+* It automatically adds a **cache name** prefix to the cache keys based on the object type stored in the cache. Default cache name is the full name of the cache item class (`CacheItem` postfix is removed if your cache item class ends with it). You can use the **`CacheName` attribute** on the cache item class to set the cache name.
+* It automatically adds the **current tenant id** to the cache key to distinguish cache items for different tenants (if your application is [multi-tenant](Multi-Tenancy.md)). Define `IgnoreMultiTenancy` attribute on the cache item class to disable this if you want to share the cached objects among all tenants in a multi-tenant application.
+* Allows to define a **global cache key prefix** per application, so different applications can use their isolated key pools in a shared distributed cache server.
+* It **can tolerate errors** wherever possible and bypasses the cache. This is useful when you have temporary problems on the cache server.
+* It has methods like `GetManyAsync` and `SetManyAsync` which significantly improve the performance on **batch operations**.
 
-### Usage
-
-An example class to store an item in the cache:
+**Example: Store Book names and prices in the cache**
 
 ````csharp
-public class BookCacheItem
+namespace MyProject
 {
-    public string Name { get; set; }
+    public class BookCacheItem
+    {
+        public string Name { get; set; }
 
-    public float Price { get; set; }
+        public float Price { get; set; }
+    }
 }
 ````
 
-You can inject and use the `IDistributedCache<BookCacheItem>` service to get/set `BookCacheItem` objects.
-
-Example usage:
+You can inject and use the `IDistributedCache<BookCacheItem>` service to get/set `BookCacheItem` objects:
 
 ````csharp
-public class BookService : ITransientDependency
-{
-    private readonly IDistributedCache<BookCacheItem> _cache;
-
-    public BookService(IDistributedCache<BookCacheItem> cache)
-    {
-        _cache = cache;
-    }
-
-    public async Task<BookCacheItem> GetAsync(Guid bookId)
-    {
-        return await _cache.GetOrAddAsync(
-            bookId.ToString(), //Cache key
-            async () => await GetBookFromDatabaseAsync(bookId),
-            () => new DistributedCacheEntryOptions
-            {
-                AbsoluteExpiration = DateTimeOffset.Now.AddHours(1)
-            }
-        );
-    }
+using System;
+using System.Threading.Tasks;
+using Microsoft.Extensions.Caching.Distributed;
+using Volo.Abp.Caching;
+using Volo.Abp.DependencyInjection;
 
-    private Task<BookCacheItem> GetBookFromDatabaseAsync(Guid bookId)
+namespace MyProject
+{
+    public class BookService : ITransientDependency
     {
-        //TODO: get from database
+        private readonly IDistributedCache<BookCacheItem> _cache;
+
+        public BookService(IDistributedCache<BookCacheItem> cache)
+        {
+            _cache = cache;
+        }
+
+        public async Task<BookCacheItem> GetAsync(Guid bookId)
+        {
+            return await _cache.GetOrAddAsync(
+                bookId.ToString(), //Cache key
+                async () => await GetBookFromDatabaseAsync(bookId),
+                () => new DistributedCacheEntryOptions
+                {
+                    AbsoluteExpiration = DateTimeOffset.Now.AddHours(1)
+                }
+            );
+        }
+
+        private Task<BookCacheItem> GetBookFromDatabaseAsync(Guid bookId)
+        {
+            //TODO: get from database
+        }
     }
 }
 ````
 
-* This sample service uses the `GetOrAddAsync()` method to get a book item from the cache.
+* This sample service uses the `GetOrAddAsync()` method to get a book item from the cache. `GetOrAddAsync` is an additional method that was added by the ABP Framework to the standard ASP.NET Core distributed cache methods.
 * If the book was not found in the cache, it calls the factory method (`GetBookFromDatabaseAsync` in this case) to retrieve the book item from the original source.
 * `GetOrAddAsync` optionally gets a `DistributedCacheEntryOptions` which can be used to set the lifetime of the cached item.
 
-Other methods of the `IDistributedCache<BookCacheItem>` are same as ASP.NET Core's `IDistributedCache` interface, so you can refer [it's documentation](https://docs.microsoft.com/en-us/aspnet/core/performance/caching/distributed).
+`IDistributedCache<BookCacheItem>` supports the same methods of the ASP.NET Core's standard `IDistributedCache` interface, so you can refer [it's documentation](https://docs.microsoft.com/en-us/aspnet/core/performance/caching/distributed).
 
-## `IDistributedCache<TCacheItem, TCacheKey>` Interface
+### `IDistributedCache<TCacheItem, TCacheKey>` Interface
 
-`IDistributedCache<TCacheItem>` interface assumes that the type of your cache key is `string` (so, you need to manually convert your key to string if you need to use a different kind of cache key). `IDistributedCache<TCacheItem, TCacheKey>` can be used when your cache key type is not `string`.
+`IDistributedCache<TCacheItem>` interface assumes that the type of your **cache key** is `string` (so, you need to manually convert your key to string if you need to use a different kind of cache key). While this is not a big deal, `IDistributedCache<TCacheItem, TCacheKey>` can be used when your cache key type is not `string`.
 
-### Usage
-
-An example class to store an item in the cache:
+**Example: Store Book names and prices in the cache**
 
 ````csharp
-public class BookCacheItem
+using Volo.Abp.Caching;
+
+namespace MyProject
 {
-    public string Name { get; set; }
+    [CacheName("Books")]
+    public class BookCacheItem
+    {
+        public string Name { get; set; }
 
-    public float Price { get; set; }
+        public float Price { get; set; }
+    }
 }
 ````
 
-Example usage (assumes that your cache key type is `Guid`):
+* This example uses the `CacheName` attribute for the `BookCacheItem` class to set the cache name.
 
-````csharp
-public class BookService : ITransientDependency
-{
-    private readonly IDistributedCache<BookCacheItem, Guid> _cache;
+You can inject and use the `IDistributedCache<BookCacheItem, Guid>` service to get/set `BookCacheItem` objects:
 
-    public BookService(IDistributedCache<BookCacheItem, Guid> cache)
-    {
-        _cache = cache;
-    }
+````csharp
+using System;
+using System.Threading.Tasks;
+using Microsoft.Extensions.Caching.Distributed;
+using Volo.Abp.Caching;
+using Volo.Abp.DependencyInjection;
 
-    public async Task<BookCacheItem> GetAsync(Guid bookId)
-    {
-        return await _cache.GetOrAddAsync(
-            bookId, //Guid type used as the cache key
-            async () => await GetBookFromDatabaseAsync(bookId),
-            () => new DistributedCacheEntryOptions
-            {
-                AbsoluteExpiration = DateTimeOffset.Now.AddHours(1)
-            }
-        );
-    }
-    private Task<BookCacheItem> GetBookFromDatabaseAsync(Guid bookId)
+namespace MyProject
+{
+    public class BookService : ITransientDependency
     {
-        //TODO: get from database
+        private readonly IDistributedCache<BookCacheItem, Guid> _cache;
+
+        public BookService(IDistributedCache<BookCacheItem, Guid> cache)
+        {
+            _cache = cache;
+        }
+
+        public async Task<BookCacheItem> GetAsync(Guid bookId)
+        {
+            return await _cache.GetOrAddAsync(
+                bookId, //Guid type used as the cache key
+                async () => await GetBookFromDatabaseAsync(bookId),
+                () => new DistributedCacheEntryOptions
+                {
+                    AbsoluteExpiration = DateTimeOffset.Now.AddHours(1)
+                }
+            );
+        }
+        private Task<BookCacheItem> GetBookFromDatabaseAsync(Guid bookId)
+        {
+            //TODO: get from database
+        }
     }
 }
 ````
@@ -156,6 +169,8 @@ public class BookService : ITransientDependency
 * This sample service uses the `GetOrAddAsync()` method to get a book item from the cache.
 * Since cache explicitly implemented as using  `Guid` as cache key, `Guid` value passed to  `_cache_GetOrAddAsync()` method.
 
+#### Complex Types as the Cache Key
+
 `IDistributedCache<TCacheItem, TCacheKey>`  internally uses `ToString()` method of the key object to convert it to a string. If you need to use a complex object as the cache key, you need to override `ToString` method of your class.
 
 An example class that is used as a cache key:
@@ -192,7 +207,66 @@ public class BookService : ITransientDependency
 }
 ````
 
-### DistributedCacheOptions
+## Configuration
+
+### AbpDistributedCacheOptions
+
+`AbpDistributedCacheOptions` is the main [options class](Options.md) to configure the caching.
+
+**Example: Set the cache key prefix for the application**
+
+```csharp
+Configure<AbpDistributedCacheOptions>(options =>
+{
+    options.KeyPrefix = "MyApp1";
+});
+```
+
+> Write that code inside the `ConfigureServices` method of your [module class](Module-Development-Basics.md).
+
+#### Available Options
+
+* `HideErrors` (`bool`, default: `true`): Enables/disables hiding the errors on writing/reading values from the cache server.
+* `KeyPrefix` (`string`, default: `null`): If your cache server is shared by multiple applications, you can set a prefix for the cache keys for your application. In this case, different applications can not overwrite each other's cache items.
+* `GlobalCacheEntryOptions` (`DistributedCacheEntryOptions`): Used to set default distributed cache options (like `AbsoluteExpiration` and `SlidingExpiration`) used when you don't specify the options while saving cache items. Default value uses the `SlidingExpiration` as 20 minutes.
+
+## Error Handling
+
+When you design a cache for your objects, you typically try to get the value from cache first. If not found in the cache, you query the object from the **original source**. It may be located in a **database** or may require to perform an HTTP call to a remote server.
+
+In most cases, you want to **tolerate the cache errors**; If you get error from the cache server you don't want to cancel the operation. Instead, you silently hide (and log) the error and **query from the original source**. This is what the ABP Framework does by default.
+
+ABP's Distributed Cache [handle](Exception-Handling.md), log and hide errors by default. There is an option to change this globally (see the options below).
+
+In addition, all of the `IDistributedCache<TCacheItem>` (and `IDistributedCache<TCacheItem, TCacheKey>`) methods have an optional `hideErrors` parameter, which is `null` by default. The global value is used if this parameter left as `null`, otherwise you can decide to hide or throw the exceptions for individual method calls.
+
+## Batch Operations
+
+ABP's distributed cache interfaces provide methods to perform batch get/set methods those improves the performance when you want to get or set multiple cache items in a single method call.
+
+* `SetManyAsync` and `SetMany` methods can be used to set multiple values to the cache.
+* `GetManyAsync` and `GetMany` methods can be used to retrieve multiple values from the cache.
+
+> These are not standard methods of the ASP.NET Core caching. So, some providers may not support them. They are supported by the [ABP Redis Cache integration package](Redis-Cache.md). If the provider doesn't support, it fallbacks to `SetAsync` and `GetAsync` methods (called once for each item).
+
+## Advanced Topics
+
+### Unit Of Work Level Cache
+
+Distributed cache service provides an interesting feature. Assume that you've updated the price of a book in the database, then set the new price to the cache, so you can use the cached value later. What if you have an exception after setting the cache and you **rollback the transaction** that updates the price of the book? In this case, cache value will be incorrect.
+
+`IDistributedCache<..>` methods gets an optional parameter, named `considerOuw`, which is `false` by default. If you set it to `true`, then the changes you made for the cache are not actually applied to the real cache store, but associated with the current [unit of work](Unit-Of-Work.md). You get the value you set in the same unit of work, but the changes are applied **only if the current unit of work succeed**.
+
+### IDistributedCacheSerializer
+
+`IDistributedCacheSerializer` service is used to serialize and deserialize the cache items. Default implementation is the `Utf8JsonDistributedCacheSerializer` class that uses `IJsonSerializer` service to convert objects to [JSON](Json.md) and vice verse. Then it uses UTC8 encoding to convert the JSON string to a byte array which is accepted by the distributed cache.
+
+You can [replace](Dependency-Injection.md) this service by your own implementation if you want to implement your own serialization logic.
+
+### IDistributedCacheKeyNormalizer
+
+`IDistributedCacheKeyNormalizer` is implemented by the `DistributedCacheKeyNormalizer` class by default. It adds cache name, application cache prefix and current tenant id to the cache key. If you need a more advanced key normalization, you can [replace](Dependency-Injection.md) this service by your own implementation.
 
-TODO
+## See Also
 
+* [Redis Cache](Redis-Cache.md)

docs/en/Community-Articles/2020-09-16-How-to-Setup-Azure-Active-Directory-and-Integrate-Abp-Angular-Application/POST.md

@@ -0,0 +1,122 @@
+# How to Setup Azure Active Directory and Integrate Abp Angular Application
+
+This guide demonstrates how to register an application to Azure Active Directory and integrate AzureAD to an ABP angular application that enables users to sign in using OAuth 2.0 with credentials from **Azure Active Directory**. 
+
+## Authentication Flow
+
+Abp angular applications use **Authentication Code with PKCE** (specs [here](https://tools.ietf.org/html/rfc7636)) which is the most suitable flow for spa applications by the time this article is written since implicit flow is deprecated. 
+
+The most common question is; 
+
+> Where to put OpenId connection code in angular project?
+
+The answer is, **you don't**. Abp angular application is integrated with backend code (HttpApi.Host project) where it loads the configurations, **permissions** etc. For none-tiered angular applications, **HttpApi.Host** project also has IdentityServer4 embedded; also serving as **Authorization Server**. Angular application authentication flow is shown below.
+
+<img src="auth-diagram.jpeg" alt="auth-diagram" style="zoom:50%;" />
+
+> What if I want Azure AD as my authorization server and not IdentityServer?
+
+This means your application will be using AzureAD user store for authentication. By registering both angular app and HttpApi to AzureAD, authentication might work but **authorization won't**. Users need to be registered to Abp identity system for auditing, permissions etc. So the flow should be 3rd party registration.
+
+## Setting up OpenId Connection
+
+Lets start with adding OpenId connection. Open the **HttpApiHostModule.cs** and update the **ConfigureAuthentication** method as below:
+
+```csharp
+JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear();
+JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Add("sub", ClaimTypes.NameIdentifier);
+
+context.Services.AddAuthentication()
+    .AddIdentityServerAuthentication(options =>
+    {
+        options.Authority = configuration["AuthServer:Authority"];
+        options.RequireHttpsMetadata = false;
+        options.ApiName = "NonTieredAngular";
+        options.JwtBackChannelHandler = new HttpClientHandler()
+        {
+            ServerCertificateCustomValidationCallback = HttpClientHandler.DangerousAcceptAnyServerCertificateValidator
+        };
+    })
+    .AddOpenIdConnect("AzureOpenId", "Azure AD OpenId", options =>
+    {
+        options.Authority = "https://login.microsoftonline.com/" + configuration["AzureAd:TenantId"] + "/v2.0/";
+        options.ClientId = configuration["AzureAd:ClientId"];
+        options.ResponseType = OpenIdConnectResponseType.CodeIdToken;
+        options.CallbackPath = configuration["AzureAd:CallbackPath"];
+        options.ClientSecret = configuration["AzureAd:ClientSecret"];
+        options.RequireHttpsMetadata = false;
+        options.SaveTokens = true;
+        options.GetClaimsFromUserInfoEndpoint = true;
+        options.Scope.Add("email");
+    });
+```
+
+> If you are using tiered (separate identity server) application, open **IdentityServerModule.cs** and add the OpenIdConnection manually to **ConfigureServices** method as following:
+
+```csharp
+public override void ConfigureServices(ServiceConfigurationContext context)
+{
+    var hostingEnvironment = context.Services.GetHostingEnvironment();
+    var configuration = context.Services.GetConfiguration();
+   
+    JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear();
+    JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Add("sub", ClaimTypes.NameIdentifier);
+    
+    context.Services.AddAuthentication()
+        .AddOpenIdConnect("AzureOpenId", "Azure AD OpenId", options =>
+        {
+            ... // Same configuration above
+        });
+```
+
+Now we can add AzureAD settings. Open the **appsettings.json** located in **HttpApi.Host** project (or **IdentityServer** project if you are using tiered application). Add the following;
+
+```csharp
+"AzureAd": {
+  "Instance": "https://login.microsoftonline.com/",
+  "TenantId": "<azureAd-tenant-id>",
+  "ClientId": "<azureAd-client-id>",
+  "Domain": "domain.onmicrosoft.com",
+  "CallbackPath": "/signin-azuread-oidc",
+  "ClientSecret": "<azureAd-client-secret>"
+},
+```
+
+Keep on mind that **App.SelfUrl** + **AzureAd.CallbackPath** will be used in AzureAD app registration. We'll update the AzureAd settings after registering the application in Azure Portal.
+
+## Setting up Azure Active Directory
+
+Navigate to Manage Azure Active Directory in [azure portal](https://portal.azure.com/). Go to **App registrations** on left side menu and hit New registration.
+
+![azure-app-registration](azure-app-registration.jpg)
+
+Enter a name for your application and **App.SelfUrl** + **AzureAd.CallbackPath** as redirect uri then register.
+
+<img src="azure-app-register.JPG" alt="azure-app-register" style="zoom:75%;" />
+
+Now navigate to **Authentication** on the left menu and enable **ID tokens**.
+
+![azure-app-authentication](azure-app-authentication.jpg)
+
+We also need to set a client secret. Navigate to **Certificates & secrets** menu on the left and create a new client secret.
+
+![azure-app-secret](azure-app-secret.jpg)
+
+**Copy** the secret and update your appsettings.json **AzureAd.ClientSecret** field.
+
+![azure-app-overview](azure-app-overview.jpg)
+
+Also update your **AzureAd.TenantId** and **AzureAd.ClientId** fields with the information located under **Overview** menu. And that's all. 
+
+Next time you hit login, you should be seeing login screen enabled Azure AD like below.
+
+![app-login](app-login.JPG)
+
+# FAQ
+
+* I am getting errors when trying to login to AzureAD.
+  * You can check [this article FAQ](https://community.abp.io/articles/how-to-use-the-azure-active-directory-authentication-for-mvc-razor-page-applications-4603b9cf) which covers many errors.
+
+
+* But I don't want my users to see default login screen. I want my users to login **only** from AzureAD.
+  * You can **mimic** this behaviour by customizing the login page and instantly trigger Azure AD provider click. For more info, you can check [this article](https://community.abp.io/articles/how-to-customize-the-login-page-for-mvc-razor-page-applications-9a40f3cd).

docs/en/Community-Articles/2020-09-28-Using-DevExtremeAngularComponents-With-The-ABP-Framework/Using-DevExtremeAngularComponents-With-The-ABP-Framework.md

@@ -0,0 +1,317 @@
+# Using DevExtreme Angular Components With the ABP Framework
+
+In this article, I will show you how to integrate the [DevExpress Angular components](https://js.devexpress.com/Documentation/Guide/Angular_Components/DevExtreme_Angular_Components/) to a project created using the ABP Framework startup templates. Then I will use the [DataGrid](https://js.devexpress.com/Documentation/Guide/Widgets/DataGrid/Overview/) component to show a list of users on the UI.
+
+## Create the Project
+
+Let's create a new web application with the Angular UI using [ABP CLI](https://docs.abp.io/en/abp/latest/CLI#new):
+
+```shell
+abp new DevExtremeAngular -u angular
+```
+
+> For detail information about how to generate and start up a project, please refer to the [official docs](https://docs.abp.io/en/abp/latest/Getting-Started?UI=NG&DB=EF&Tiered=No). For the scope of this post, we will not go into details of the backend applications.
+
+## Running the Solution
+
+### The Server Side
+
+Server side contains multiple projects in the solution:
+
+![A screenshot showing DevExtremeAngular.DbMigrator and DevExtremeAngular.HttpApi.Host](project-setup.png)
+
+Run following projects in order;
+
+* Run `DevExtremeAngular.DbMigrator` to create the database and seed the initial data.
+* Run `DevExtremeAngular.HttpApi.Host` project to make the backend API up & running.
+
+### The Angular Application
+
+Open a command line terminal and navigate to `angular` folder then run `yarn` or `npm install` based on which package you are using. 
+
+After installation process is done, you can start your angular project by running `yarn start` or `npm start`. This command should serve the application and open the application in your default browser. If it doesn't open, you can navigate to http://localhost:4200 in your browser:
+
+![A screenshot showing localhost is running](localhost-running.png)
+
+You can login to the application by using following credentials:
+
+> _Default admin username is **admin** and password is **1q2w3E\***_
+
+![A screenshot showing login page](login-screen.png)
+
+After successful login, you should be redirected to home page.
+
+## Install DevExtreme
+
+You can follow [the guide](https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/) provided by **DevExtreme** team or apply the following steps.
+
+* `npm install devextreme devextreme-angular` or `yarn add devextreme devextreme-angular`
+* Import given two following styles in `angular.json` file:
+
+```javascript
+  // ...
+  "styles": [
+    // ...
+    "src/styles.scss",
+
+    "node_modules/devextreme/dist/css/dx.common.css",
+    "node_modules/devextreme/dist/css/dx.light.css"
+  ]
+```
+
+* Add `dx-viewport` to classes of `body` in `index.html`
+
+```html
+<body class="bg-light dx-viewport">
+  <app-root>
+    <div class="donut centered"></div>
+  </app-root>
+</body>
+```
+
+After completing these steps, you need to restart the angular application.
+
+## Create a lazy Angular Module for DevExtreme Demo
+
+Let's create a module which will be loaded lazily.
+
+Open up a terminal and navigate to `angular` to run following command.
+
+```shell
+ng g m dev-extreme --route dev-extreme --module app
+```
+
+...or with `npx`, if you do not have `angular-cli` installed...
+
+```shell
+npx ng g m dev-extreme --route dev-extreme --module app
+```
+
+Your terminal should log the following output:
+
+```shell
+CREATE src/app/dev-extreme/dev-extreme-routing.module.ts (361 bytes)
+CREATE src/app/dev-extreme/dev-extreme.module.ts (379 bytes)
+CREATE src/app/dev-extreme/dev-extreme.component.scss (0 bytes)
+CREATE src/app/dev-extreme/dev-extreme.component.html (26 bytes)
+CREATE src/app/dev-extreme/dev-extreme.component.spec.ts (655 bytes)
+CREATE src/app/dev-extreme/dev-extreme.component.ts (295 bytes)
+UPDATE src/app/app-routing.module.ts (362 bytes)
+```
+
+The Angular CLI has created a module and configured it to lazy-load at `/dev-extreme` path.
+
+The last step to be able to see our newly created module in the browser, open `route.provider.ts` and edit the array being added into the routes.
+
+```typescript
+    // ...
+    routes.add([
+      {
+        path: '/',
+        name: '::Menu:Home',
+        iconClass: 'fas fa-home',
+        order: 1,
+        layout: eLayoutType.application,
+      },
+      {
+        path: '/dev-extreme',
+        name: 'Dev Extreme',
+        order: 2,
+        layout: eLayoutType.application,
+      },
+    ]);
+    // ...
+```
+
+After completing the steps above, you should be able to see `Dev Extreme` on the header and when you click on it, you should be redirected to `/dev-extreme` page and see the following message on the screen.
+
+![A screenshot showing a page that says dev-extreme works!](dev-extreme-page.png)
+
+## Display users on the dev-extreme page
+
+For this demo, we will list users on the screen. We already have `admin` as our first user. 
+
+Let's add couple of more to the list in `Administration -> Identity Management -> Users` page.
+
+![A screenshot showing users page after adding couple of users](users.png)
+
+Now we are ready to fetch our users and display them on `/dev-extreme` page.
+
+Firstly, let's create a service for our component.
+
+Navigate to the `dev-extreme` folder and run following command. If you run this command at the root, the service will be generated next to `app.module.ts`
+
+```shell
+ng g s dev-extreme
+```
+
+Following files should be created
+
+```shell
+CREATE src/app/dev-extreme/dev-extreme.service.spec.ts (378 bytes)
+CREATE src/app/dev-extreme/dev-extreme.service.ts (139 bytes)
+```
+
+Let's import and inject `IdentityService` as dependency in `dev-extreme.service.ts`. After then, let's create a stream called `users$` to retrieve the users. 
+
+`identityService.getUsers` returns `ABP.PagedResponse` which contains two fields, `items` and `totalCount`. We are only interested in `items` for now.
+
+When we apply the steps described above, the final version of `dev-extreme.service` should be as follows
+
+```typescript
+import { Injectable } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { IdentityService } from '@abp/ng.identity';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DevExtremeService {
+  users$ = this.service.getUsers().pipe(map((result) => result.items));
+
+  constructor(private service: IdentityService) {}
+}
+```
+
+Now we can simply inject `DevExtremeService` as public and utilize `users$` stream in `dev-extreme.component.ts` as follows:
+
+```typescript
+import { Component } from '@angular/core';
+import { DevExtremeService } from './dev-extreme.service';
+
+@Component({
+  selector: 'app-dev-extreme',
+  templateUrl: './dev-extreme.component.html',
+  styleUrls: ['./dev-extreme.component.scss'],
+})
+export class DevExtremeComponent {
+  constructor(public service: DevExtremeService) {}
+}
+```
+
+And use it within `dev-extreme.component.html`
+
+```html
+<ng-container *ngIf="service.users$ | async as users">
+  <ul>
+    <li *ngFor="let user of users">
+      {{ user.name }}
+    </li>
+  </ul>
+</ng-container>
+```
+
+This should list names of the users on the screen
+
+![A screenshot showing list users on the dev extreme page](users-on-dev-extreme.png)
+
+## Use DxDataGrid to list the users
+
+You can take a look at [demo](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ColumnCustomization/Angular/Light/) provided by **DevExtreme** team or apply the following steps.
+
+Now, our application is ready to use `dx-data-grid` in `dev-extreme.component.ts`
+
+Firstly, we need to import `DxDataGridModule` in our module as follows.
+
+```typescript
+// ...
+
+import { DxDataGridModule } from 'devextreme-angular';
+
+@NgModule({
+  // ...
+  imports: [ 
+    // ...
+    DxDataGridModule
+  ],
+})
+export class DevExtremeModule {}
+```
+
+At this point `dx-data-grid` is avaliable within our module and we can use it in our template.
+
+Change `dev-extreme.component.html` to the following
+
+```html
+<ng-container *ngIf="service.users$ | async as users">
+  <dx-data-grid [dataSource]="users"></dx-data-grid>
+</ng-container>
+```
+
+It should display a table on the screen
+
+![A screenshot displaying dev extreme data grid with lots of columns](devextreme-first.png)
+
+Since, we did not specify any columns, `dx-data-grid` displayed every column avaliable. Let's pick some columns to make it more readable.
+
+Change `dev-extreme.component.html` to the following:
+
+```html
+<ng-container *ngIf="service.users$ | async as users">
+  <dx-data-grid [dataSource]="users">
+    <dxi-column dataField="userName"></dxi-column>
+    <dxi-column dataField="name"></dxi-column>
+    <dxi-column dataField="surname"></dxi-column>
+    <dxi-column dataField="email"></dxi-column>
+    <dxi-column dataField="phoneNumber"></dxi-column>
+  </dx-data-grid>
+</ng-container>
+```
+
+which will display following table on the screen
+
+![A screenshot displaying dev extreme data grid with these columns: username, name, surname, email and phone number](devextreme-second.png)
+
+We can also utilize `abpLocalization` pipe to translate the headers of the table. To use `abpLocalization` pipe in our templates, we need to import `CoreModule` from `@abp/ng.core` into our module.
+
+```typescript
+import { CoreModule } from '@abp/ng.core';
+
+@NgModule({
+  // ...
+  imports: [ 
+    // ...
+    CoreModule
+  ],
+})
+export class DevExtremeModule {}
+```
+
+And change the template to the following:
+
+```html
+<ng-container *ngIf="service.users$ | async as users">
+  <dx-data-grid [dataSource]="users">
+    <dxi-column
+      dataField="userName"
+      [caption]="'AbpIdentity::DisplayName:UserName' | abpLocalization"
+    ></dxi-column>
+    <dxi-column
+      dataField="name"
+      [caption]="'AbpIdentity::DisplayName:Name' | abpLocalization"
+    ></dxi-column>
+    <dxi-column
+      dataField="surname"
+      [caption]="'AbpIdentity::DisplayName:Surname' | abpLocalization"
+    ></dxi-column>
+    <dxi-column
+      dataField="email"
+      [caption]="'AbpIdentity::DisplayName:Email' | abpLocalization"
+    ></dxi-column>
+    <dxi-column
+      dataField="phoneNumber"
+      [caption]="'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization"
+    ></dxi-column>
+  </dx-data-grid>
+</ng-container>
+```
+
+The headers should change when a new language is selected;
+
+![A gif showing the headers of the table getting translated into the chosen language](devextreme-final.gif)
+
+## Conclusion
+
+In this article, we have seen how to integrate `DevExtreme` angular components into a project generated by `ABP CLI`.
+
+You can download source code of [the demo here](https://github.com/abpframework/abp-samples/tree/master/DevExtreme-Angular).

docs/en/Data-Filtering.md

@@ -102,9 +102,58 @@ namespace Acme.BookStore
 ````
 
 * [Inject](Dependency-Injection.md) the `IDataFilter` service to your class.
-* Use the `Disable` method within a `using` statement to create a code block where the `ISoftDelete` filter is disabled inside it (Always use it inside a `using` block to guarantee that the filter is reset to its previous state).
+* Use the `Disable` method within a `using` statement to create a code block where the `ISoftDelete` filter is disabled inside it.
 
-`IDataFilter.Enable` method can be used to enable a filter. `Enable` and `Disable` methods can be used in a nested way to define inner scopes.
+In addition to the `Disable<T>()` method;
+
+* `IDataFilter.Enable<T>()` method can be used to enable a filter. `Enable` and `Disable` methods can be used in a **nested** way to define inner scopes.
+
+* `IDataFilter.IsEnabled<T>()` can be used to check whether a filter is currently enabled or not.
+
+> Always use the `Disable` and `Enable` methods it inside a `using` block to guarantee that the filter is reset to its previous state.
+
+### The Generic IDataFilter Service
+
+`IDataFilter` service has a generic version, `IDataFilter<TFilter>` that injects a more restricted and explicit data filter based on the filter type.
+
+````csharp
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using Volo.Abp;
+using Volo.Abp.Data;
+using Volo.Abp.DependencyInjection;
+using Volo.Abp.Domain.Repositories;
+
+namespace Acme.BookStore
+{
+    public class MyBookService : ITransientDependency
+    {
+        private readonly IDataFilter<ISoftDelete> _softDeleteFilter;
+        private readonly IRepository<Book, Guid> _bookRepository;
+
+        public MyBookService(
+            IDataFilter<ISoftDelete> softDeleteFilter,
+            IRepository<Book, Guid> bookRepository)
+        {
+            _softDeleteFilter = softDeleteFilter;
+            _bookRepository = bookRepository;
+        }
+
+        public async Task<List<Book>> GetAllBooksIncludingDeletedAsync()
+        {
+            //Temporary disable the ISoftDelete filter
+            using (_softDeleteFilter.Disable())
+            {
+                return await _bookRepository.GetListAsync();
+            }
+        }
+    }
+}
+````
+
+* This usage determines the filter type while injecting the `IDataFilter<T>` service.
+* In this case you can use the `Disable()` and `Enable()` methods without specifying the filter type.
 
 ## AbpDataFilterOptions
 
@@ -151,11 +200,21 @@ public class Book : AggregateRoot<Guid>, IIsActive
 
 ABP uses [EF Core's Global Query Filters](https://docs.microsoft.com/en-us/ef/core/querying/filters) system for the [EF Core Integration](Entity-Framework-Core.md). So, it is well integrated to EF Core and works as expected even if you directly work with `DbContext`.
 
-Best way to implement a custom filter is to override `CreateFilterExpression` method for your `DbContext`. Example:
+Best way to implement a custom filter is to override  `ShouldFilterEntity` and `CreateFilterExpression` method for your `DbContext`. Example:
 
 ````csharp
 protected bool IsActiveFilterEnabled => DataFilter?.IsEnabled<IIsActive>() ?? false;
 
+protected override bool ShouldFilterEntity<TEntity>(IMutableEntityType entityType)
+{
+    if (typeof(IIsActive).IsAssignableFrom(typeof(TEntity)))
+    {
+        return true;
+    }
+
+    return base.ShouldFilterEntity<TEntity>(entityType);
+}
+
 protected override Expression<Func<TEntity, bool>> CreateFilterExpression<TEntity>()
 {
     var expression = base.CreateFilterExpression<TEntity>();
@@ -174,7 +233,7 @@ protected override Expression<Func<TEntity, bool>> CreateFilterExpression<TEntit
 ````
 
 * Added a `IsActiveFilterEnabled` property to check if `IIsActive` is enabled or not. It internally uses the `IDataFilter` service introduced before.
-* Overrided the `CreateFilterExpression` method, checked if given entity implements the `IIsActive` interface and combines the expressions if necessary.
+* Overrided the `ShouldFilterEntity` and `CreateFilterExpression` methods, checked if given entity implements the `IIsActive` interface and combines the expressions if necessary.
 
 ### MongoDB
 

docs/en/Distributed-Event-Bus-Kafka-Integration.md

@@ -89,7 +89,7 @@ Defining multiple connections is allowed. In this case, you can specify the conn
 }
 ````
 
-This allows you to use multiple RabbitMQ server in your application, but select one of them for the event bus.
+This allows you to use multiple Kafka cluster in your application, but select one of them for the event bus.
 
 You can use any of the [ClientConfig](https://docs.confluent.io/current/clients/confluent-kafka-dotnet/api/Confluent.Kafka.ClientConfig.html) properties as the connection properties.
 
@@ -164,4 +164,4 @@ Configure<AbpKafkaOptions>(options =>
 });
 ````
 
-Using these options classes can be combined with the `appsettings.json` way. Configuring an option property in the code overrides the value in the configuration file.
+Using these options classes can be combined with the `appsettings.json` way. Configuring an option property in the code overrides the value in the configuration file.

docs/en/Getting-Started-React-Native.md

@@ -1,10 +1,57 @@
 # Getting Started with the React Native
 
+````json
+//[doc-params]
+{
+    "Tiered": ["No", "Yes"]
+}
+````
+
 ABP platform provide basic [React Native](https://reactnative.dev/) startup template to develop mobile applications **integrated to your ABP based backends**.
 
-When you **create a new application** as described in the [getting started document](Getting-Started.md), you have to add `-m react-native` option to include `react-native` project in your solution.
+![React Native gif](./images/react-native-introduction.gif)
+
+## How to Prepare Development Environment
+
+Please follow the steps below to prepare your development environment for React Native.
+
+1. **Install Node.js:** Please visit [Node.js downloads page](https://nodejs.org/en/download/) and download proper Node.js v12 or v14 installer for your OS. An alternative is to install [NVM](https://github.com/nvm-sh/nvm) and use it to have multiple versions of Node.js in your operating system.
+2. **[Optional] Install Yarn:** You may install Yarn v1 (not v2) following the instructions on [the installation page](https://classic.yarnpkg.com/en/docs/install). Yarn v1 delivers an arguably better developer experience compared to npm v6 and below. You may skip this step and work with npm, which is built-in in Node.js, instead.
+3. **[Optional] Install VS Code:** [VS Code](https://code.visualstudio.com/) is a free, open-source IDE which works seamlessly with TypeScript. Although you can use any IDE including Visual Studio or Rider, VS Code will most likely deliver the best developer experience when it comes to React Native projects.
+4. **Install an Emulator:** React Native applications need an Android emulator or an iOS simulator to run on your OS. See the [Android Studio Emulator](https://docs.expo.io/workflow/android-simulator/) or [iOS Simulator](https://docs.expo.io/workflow/ios-simulator/) on expo.io documentation to learn how to set up an emulator.
+
+
+## How to Start a New React Native Project
+
+You have multiple options to initiate a new React Native project that works with ABP:
+
+### 1. Using ABP CLI
+
+ABP CLI is probably the most convenient and flexible way to initiate an ABP solution with a React Native application. Simply [install the ABP CLI](../../CLI.md) and run the following command in your terminal:
+
+```shell
+abp new MyCompanyName.MyProjectName -csf -u <angular or mvc> -m react-native
+```
+
+> To see further options in the CLI, please visit the [CLI manual](../../CLI.md).
+
+This command will prepare a solution with an **Angular** or an **MVC** (depends on your choice), a **.NET Core**, and a **React Native** project in it.
+
+### 2. Direct Download
+
+You may [download a solution scaffold directly on ABP.io](https://abp.io/get-started) if you are more comfortable with GUI or simply want to try ABP without installing the CLI.
 
-## Configure Your Local IP Address
+Please do the following:
+
+1. Click on the "DIRECT DOWNLOAD" tab.
+2. Fill out the short form about your project.
+3. Click on the "Create now" button.
+
+...and a customized download will start in a few seconds.
+
+## How to Configure & Run the Backend
+
+> React Native application does not trust the auto-generated .NET HTTPS certificate. You should use **HTTP** during the development.
 
 A React Native application running on an Android emulator or a physical phone **can not connect to the backend** on `localhost`. To fix this problem, it is necessary to run the backend application on your **local IP address**.
 
@@ -25,19 +72,14 @@ A React Native application running on an Android emulator or a physical phone **
 
 {{ end }}
 
-## Run the Server Application
-
 Run the backend application as described in the [getting started document](Getting-Started.md).
 
-> React Native application does not trust the auto-generated .NET HTTPS certificate. You should use **HTTP** during the development.
 
-Go to the `react-native` folder, open a command line terminal, type the `yarn` command (we suggest to the [yarn](https://yarnpkg.com/) package manager while `npm install` will also work):
+## How to Configure & Run the React Native Application
 
-```bash
-yarn
-```
-
-* Open the `Environment.js` in the `react-native` folder and replace the `localhost` address on the `apiUrl` and `issuer` properties with your local IP address as shown below:
+1. Make sure the [database migration is complete](./Getting-Started?UI=NG&DB=EF&Tiered=No#create-the-database) and the [API is up and running](./Getting-Started?UI=NG&DB=EF&Tiered=No#run-the-application).
+2. Open `react-native` folder and run `yarn` or `npm install` if you have not already.
+3. Open the `Environment.js` in the `react-native` folder and replace the `localhost` address on the `apiUrl` and `issuer` properties with your local IP address as shown below:
 
 ![react native environment local IP](images/rn-environment-local-ip.png)
 
@@ -51,22 +93,21 @@ yarn
 
 {{ end }}
 
-Once all node modules are loaded, execute `yarn start` (or `npm start`) command:
-
-```bash
-yarn start
-```
+4. Run `yarn start` or `npm start`. Wait Expo CLI to start. Expo CLI opens the management interface on the `http://localhost:19002/` address.
 
-Wait Expo CLI to start. Expo CLI opens the management interface on the `http://localhost:19002/` address.
+> The React Native application was generated with [Expo](https://expo.io/). Expo is a set of tools built around React Native to help you quickly start an app and, while it has many features.
 
 ![expo-interface](images/rn-expo-interface.png)
 
 In the above management interface, you can start the application with an Android emulator, an iOS simulator or a physical phone by the scan the QR code with the [Expo Client](https://expo.io/tools#client).
 
-> See the [Android Studio Emulator](https://docs.expo.io/workflow/android-simulator/), [iOS Simulator](https://docs.expo.io/workflow/ios-simulator/) documents on expo.io.
-
 ![React Native login screen on iPhone 11](images/rn-login-iphone.png)
 
 Enter **admin** as the username and **1q2w3E*** as the password to login to the application.
 
 The application is up and running. You can continue to develop your application based on this startup template.
+
+
+## See Also
+
+* [React Native project structure](./Startup-Templates/Application#react-native)

docs/en/Getting-Started.md

@@ -3,13 +3,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC", "Blazor", "NG"],
     "DB": ["EF", "Mongo"],
     "Tiered": ["Yes", "No"]
 }
 ````
 
-This tutorial explains how to create a new {{if UI == "MVC"}} ASP.NET Core MVC (Razor Pages) web {{else if UI == "NG"}} Angular {{end}} application using the startup template.
+This tutorial explains how to create a new web application using the [application startup template](Startup-Templates/Application.md).
+
+> This document assumes that you prefer to use **{{ UI_Value }}** as the UI framework and **{{ DB_Value }}** as the database provider. For other options, please change the preference on top of this document.
 
 
 ## Setup Your Development Environment
@@ -20,11 +22,11 @@ First things first! Let's setup your development environment before creating the
 
 The following tools should be installed on your development machine:
 
-* [Visual Studio 2019 (v16.4+)](https://visualstudio.microsoft.com/vs/) for Windows / [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/). <sup id="a-editor">[1](#f-editor)</sup>
+* [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) for Windows / [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/). <sup id="a-editor">[1](#f-editor)</sup>
 * [.NET Core 3.1+](https://www.microsoft.com/net/download/dotnet-core/)
 
-* [Node v12 or v14](https://nodejs.org/en/)
-* [Yarn v1.20+ (not v2)](https://classic.yarnpkg.com/en/docs/install) <sup id="a-yarn">[2](#f-yarn)</sup> or npm v6+ (installed with Node)
+* [Node v12 or v14](https://nodejs.org/)
+* [Yarn v1.20+ (not v2)](https://classic.yarnpkg.com/en/docs/install) <sup id="a-yarn">[2](#f-yarn)</sup> or npm v6+ (already installed with Node)
 {{ if Tiered == "Yes" }}
 
 * [Redis](https://redis.io/) (the startup solution uses the Redis as the [distributed cache](Caching.md)).
@@ -37,7 +39,7 @@ The following tools should be installed on your development machine:
 
 ### Install the ABP CLI
 
-[ABP CLI](./CLI.md) is a command line interface that is used to automate some common tasks for ABP based applications.
+[ABP CLI](./CLI.md) is a command line interface that is used to automate some common tasks for ABP based solutions.
 
 > ABP CLI is a free & open source tool for the ABP framework.
 
@@ -55,105 +57,60 @@ dotnet tool update -g Volo.Abp.Cli
 
 ## Create a New Project
 
-> This document assumes that you prefer to use **{{ UI_Value }}** as the UI framework and **{{ DB_Value }}** as the database provider. For other options, please change the preference on top of this document.
-
-### Using the ABP CLI to Create a New Project
-
 Use the `new` command of the ABP CLI to create a new project:
 
 ````shell
-abp new Acme.BookStore{{if UI == "NG"}} -u angular {{end}}{{if DB == "Mongo"}} -d mongodb{{end}}{{if Tiered == "Yes" && UI != "NG"}} --tiered {{else if Tiered == "Yes" && UI == "NG"}}--separate-identity-server{{end}}
+abp new Acme.BookStore{{if UI == "NG"}} -u angular{{else if UI == "Blazor"}} -u blazor{{end}}{{if DB == "Mongo"}} -d mongodb{{end}}{{if Tiered == "Yes"}}{{if UI == "MVC"}} --tiered{{else}} --separate-identity-server{{end}}{{end}}
 ````
 
-{{ if UI == "NG" }}
+> You can use different level of namespaces; e.g. BookStore, Acme.BookStore or Acme.Retail.BookStore. 
 
-* `-u` argument specifies the UI framework, `angular` in this case.
+> Alternatively, you can select the "Direct Download" tab from the [ABP Framework web site](https://abp.io/get-started) to create a new solution.
 
 {{ if Tiered == "Yes" }}
 
-* `--separate-identity-server` argument is used to separate the identity server application from the API host application. If not specified, you will have a single endpoint on the server.
-
-{{ end }}
+{{ if UI == "MVC" }}
 
-{{ end }}
+* `--tiered` argument is used to create N-tiered solution where authentication server, UI and API layers are physically separated.
 
-{{ if DB == "Mongo" }}
+{{ else }}
 
-* `-d` argument specifies the database provider, `mongodb` in this case.
+* `--separate-identity-server` argument is used to separate the identity server application from the API host application. If not specified, you will have a single endpoint on the server.
 
 {{ end }}
 
-{{ if Tiered == "Yes" && UI != "NG" }}
-
-* `--tiered` argument is used to create N-tiered solution where authentication server, UI and API layers are physically separated.
-
 {{ end }}
 
-> You can use different level of namespaces; e.g. BookStore, Acme.BookStore or Acme.Retail.BookStore. 
-
-#### ABP CLI Commands & Options
+### ABP CLI Commands & Options
 
 [ABP CLI document](./CLI.md) covers all of the available commands and options for the ABP CLI. This document uses the [application startup template](Startup-Templates/Application.md) to create a new web application. See the [ABP Startup Templates](Startup-Templates/Index.md) document for other templates.
 
-> Alternatively, you can select the "Direct Download" tab from the [ABP Framework web site](https://abp.io/get-started) to create a new solution.
-
-## The Solution Structure
-
-{{ if UI == "MVC" }}
-
-After creating your project, you will have the following solution folders & files:
-
-![](images/solution-files-mvc.png)
-
-You will see the following solution structure when you open the `.sln` file in the Visual Studio:
-
-{{if DB == "Mongo"}}
-
-![vs-default-app-solution-structure](images/vs-app-solution-structure-mongodb.png)
-
-{{else}}
-
-![vs-default-app-solution-structure](images/vs-app-solution-structure{{if Tiered == "Yes"}}-tiered{{end}}.png)
-
-{{end}}
-
-{{ else if UI == "NG" }}
-There are three folders in the created solution:
+### The Solution Structure
 
-![](images/solution-files-non-mvc.png)
+The solution has a layered structure (based on the [Domain Driven Design](Domain-Driven-Design.md)) and contains unit & integration test projects. See the [application template document](Startup-Templates/Application.md) to understand the solution structure in details. 
 
-* `angular` folder contains the Angular UI application.
-* `aspnet-core` folder contains the backend solution.
-
-Open the `.sln` (Visual Studio solution) file under the `aspnet-core` folder:
-
-![vs-angular-app-backend-solution-structure](images/vs-spa-app-backend-structure{{if DB == "Mongo"}}-mongodb{{end}}.png)
-
-{{ end }}
-
-> ###### About the projects in your solution
->
-> Your solution may have slightly different structure based on your **UI**, **database** and other preferences.
+{{ if DB == "Mongo" }}
 
-The solution has a layered structure (based on the [Domain Driven Design](Domain-Driven-Design.md)) and also contains unit & integration test projects.
+#### MongoDB Transactions
 
-{{ if DB == "EF" }}
+The [startup template](Startup-templates/Index.md) **disables** transactions in the `.MongoDB` project by default. If your MongoDB server supports transactions, you can enable the it in the *YourProjectMongoDbModule* class:
 
-Integration tests projects are properly configured to work with **EF Core** & **SQLite in-memory** database.
+  ```csharp
+  Configure<AbpUnitOfWorkDefaultOptions>(options =>
+  {
+      options.TransactionBehavior = UnitOfWorkTransactionBehavior.Auto;
+  });
+  ```
 
-{{ else if DB == "Mongo" }}
-
-Integration tests projects are properly configured to work with in-memory **MongoDB** database created per test (used [Mongo2Go](https://github.com/Mongo2Go/Mongo2Go) library).
+> Or you can delete this code since this is already the default behavior.
 
 {{ end }}
 
-> See the [application template document](Startup-Templates/Application.md) to understand the solution structure in details. 
-
 ## Create the Database
 
 ### Connection String
 
-Check the **connection string** in the `appsettings.json` file under the {{if UI == "MVC"}}{{if Tiered == "Yes"}}`.IdentityServer` and `.HttpApi.Host` projects{{else}}`.Web` project{{end}}{{else if UI == "NG" }}`.HttpApi.Host` project{{end}}:
+Check the **connection string** in the `appsettings.json` file under the {{if Tiered == "Yes"}}`.IdentityServer` and `.HttpApi.Host` projects{{else}}{{if UI=="MVC"}}`.Web` project{{else}}`.HttpApi.Host` project{{end}}{{end}}
 
 {{ if DB == "EF" }}
 
@@ -163,7 +120,7 @@ Check the **connection string** in the `appsettings.json` file under the {{if UI
 }
 ````
 
-The solution is configured to use **Entity Framework Core** with **MS SQL Server**. EF Core supports [various](https://docs.microsoft.com/en-us/ef/core/providers/) database providers, so you can use any supported DBMS. See [the Entity Framework integration document](https://docs.abp.io/en/abp/latest/Entity-Framework-Core) to learn how to [switch to another DBMS](Entity-Framework-Core-Other-DBMS.md).
+The solution is configured to use **Entity Framework Core** with **MS SQL Server** by default. EF Core supports [various](https://docs.microsoft.com/en-us/ef/core/providers/) database providers, so you can use any supported DBMS. See [the Entity Framework integration document](Entity-Framework-Core.md) to learn how to [switch to another DBMS](Entity-Framework-Core-Other-DBMS.md).
 
 ### Apply the Migrations
 
@@ -171,7 +128,7 @@ The solution uses the [Entity Framework Core Code First Migrations](https://docs
 
 #### Apply Migrations Using the DbMigrator
 
-The solution comes with a `.DbMigrator` console application which applies migrations and also seed the initial data. It is useful on development as well as on production environment.
+The solution comes with a `.DbMigrator` console application which applies migrations and also **seeds the initial data**. It is useful on **development** as well as on **production** environment.
 
 > `.DbMigrator` project has its own `appsettings.json`. So, if you have changed the connection string above, you should also change this one. 
 
@@ -183,7 +140,7 @@ Right click to the `.DbMigrator` project and select **Set as StartUp Project**
 
  ![db-migrator-output](images/db-migrator-output.png)
 
-> Initial [seed data](Data-Seeding.md) creates the `admin` user in the database which is then used to login to the application. So, you need to use `.DbMigrator` at least once for a new database.
+> Initial [seed data](Data-Seeding.md) creates the `admin` user in the database (with the password is `1q2w3E*`) which is then used to login to the application. So, you need to use `.DbMigrator` at least once for a new database.
 
 #### Using EF Core Update-Database Command
 
@@ -223,7 +180,7 @@ The solution is configured to use **MongoDB** in your local computer, so you nee
 
 ### Seed Initial Data
 
-The solution comes with a `.DbMigrator` console application which seeds the initial data. It is useful on development as well as on production environment.
+The solution comes with a `.DbMigrator` console application which **seeds the initial data**. It is useful on **development** as well as on **production** environment.
 
 > `.DbMigrator` project has its own `appsettings.json`. So, if you have changed the connection string above, you should also change this one. 
 
@@ -235,7 +192,7 @@ Right click to the `.DbMigrator` project and select **Set as StartUp Project**
 
  ![db-migrator-output](images/db-migrator-output.png)
 
-> Initial [seed data](Data-Seeding.md) creates the `admin` user in the database which is then used to login to the application. So, you need to use `.DbMigrator` at least once for a new database.
+> Initial [seed data](Data-Seeding.md) creates the `admin` user in the database (with the password is `1q2w3E*`) which is then used to login to the application. So, you need to use `.DbMigrator` at least once for a new database.
 
 {{ end }}
 
@@ -245,27 +202,27 @@ Right click to the `.DbMigrator` project and select **Set as StartUp Project**
 
 {{ if Tiered == "Yes" }}
 
-Ensure that the `.IdentityServer` project is the startup project. Run the application which will open a **login** page in your browser.
+1. Ensure that the `.IdentityServer` project is the startup project. Run this application that will open a **login** page in your browser.
 
 > Use Ctrl+F5 in Visual Studio (instead of F5) to run the application without debugging. If you don't have a debug purpose, this will be faster.
 
-You can login, but you cannot enter to the main application here. This is just the authentication server.
+You can login, but you cannot enter to the main application here. This is **just the authentication server**.
 
-Ensure that the `.HttpApi.Host` project is the startup project and run the application which will open a **Swagger UI** in your browser.
+2. Ensure that the `.HttpApi.Host` project is the startup project and run the application which will open a **Swagger UI** in your browser.
 
 ![swagger-ui](images/swagger-ui.png)
 
-This is the API application that is used by the web application.
+This is the HTTP API that is used by the web application.
 
-Lastly, ensure that the `.Web` project is the startup project and run the application which will open a **welcome** page in your browser
+3. Lastly, ensure that the `.Web` project is the startup project and run the application which will open a **welcome** page in your browser
 
 ![mvc-tiered-app-home](images/bookstore-home.png)
 
-Click to the **login** button which will redirect you to the `Identity Server` to login to the application:
+Click to the **login** button which will redirect you to the *authentication server* to login to the application:
 
 ![bookstore-login](images/bookstore-login.png)
 
-{{ else }}
+{{ else # Tiered != "Yes" }}
 
 Ensure that the `.Web` project is the startup project. Run the application which will open the **login** page in your browser:
 
@@ -273,11 +230,11 @@ Ensure that the `.Web` project is the startup project. Run the application which
 
 ![bookstore-login](images/bookstore-login.png)
 
-{{ end }}
+{{ end # Tiered }}
 
-{{ else if UI != "MVC" }}
+{{ else # UI != "MVC" }}
 
-#### Running the HTTP API Host (server-side)
+### Running the HTTP API Host (Server Side)
 
 {{ if Tiered == "Yes" }}
 
@@ -287,15 +244,15 @@ Ensure that the `.IdentityServer` project is the startup project. Run the applic
 
 You can login, but you cannot enter to the main application here. This is just the authentication server.
 
-{{ end }}
-
 Ensure that the `.HttpApi.Host` project is the startup project and run the application which will open a Swagger UI:
 
-{{ if Tiered == "No" }}
+{{ else # Tiered == "No" }}
+
+Ensure that the `.HttpApi.Host` project is the startup project and run the application which will open a Swagger UI:
 
 > Use Ctrl+F5 in Visual Studio (instead of F5) to run the application without debugging. If you don't have a debug purpose, this will be faster.
 
-{{ end }}
+{{ end # Tiered }}
 
 ![swagger-ui](images/swagger-ui.png)
 
@@ -305,12 +262,25 @@ You can see the application APIs and test them here. Get [more info](https://swa
 >
 > Most of the HTTP APIs require authentication & authorization. If you want to test authorized APIs, manually go to the `/Account/Login` page, enter `admin` as the username and `1q2w3E*` as the password to login to the application. Then you will be able to execute authorized APIs too.
 
-{{ end }}
+{{ end # UI }}
 
-{{ if UI == "NG" }}
-#### Running the Angular application (client-side)
+{{ if UI == "Blazor" }}
+
+### Running the Blazor Application (Client Side)
+
+Ensure that the `.Blazor` project is the startup project and run the application.
+
+> Use Ctrl+F5 in Visual Studio (instead of F5) to run the application without debugging. If you don't have a debug purpose, this will be faster.
 
-Go to the `angular` folder, open a command line terminal, type the `yarn` command (we suggest to the [yarn](https://yarnpkg.com/) package manager while `npm install` will also work in most cases)
+Once the application starts, click to the **Login** link on to header, which redirects you to the authentication server to enter a username and password:
+
+![bookstore-login](images/bookstore-login.png)
+
+{{ else if UI == "NG" }}
+
+### Running the Angular Application (Client Side)
+
+Go to the `angular` folder, open a command line terminal, type the `yarn` command (we suggest to the [yarn](https://yarnpkg.com/) package manager while `npm install` will also work)
 
 ```bash
 yarn
@@ -322,11 +292,7 @@ Once all node modules are loaded, execute `yarn start` (or `npm start`) command:
 yarn start
 ```
 
-This will take care of compiling your `TypeScript` code, and automatically reloading your browser. 
-After it finishes, `Angular Live Development Server` will be listening on localhost:4200, 
-open your web browser and navigate to [localhost:4200](http://localhost:4200/)
-
-
+It may take a longer time for the first build. Once it finishes, it opens the Angular UI in your default browser with the [localhost:4200](http://localhost:4200/) address.
 
 ![bookstore-login](images/bookstore-login.png)
 
@@ -338,7 +304,7 @@ Enter **admin** as the username and **1q2w3E*** as the password to login to the
 
 If you want to include a [React Native](https://reactnative.dev/) project in your solution, add `-m react-native` (or `--mobile react-native`) argument to project creation command. This is a basic React Native startup template to develop mobile applications integrated to your ABP based backends.
 
-See the "[Getting Started with the React Native](Getting-Started-React-Native.md)" document to learn how to configure and run the React Native application.
+See the [Getting Started with the React Native](Getting-Started-React-Native.md) document to learn how to configure and run the React Native application.
 
 ## Next
 

docs/en/Localization.md

@@ -2,7 +2,7 @@
 
 ABP's localization system is seamlessly integrated to the `Microsoft.Extensions.Localization` package and compatible with the [Microsoft's localization documentation](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization). It adds some useful features and enhancements to make it easier to use in real life application scenarios.
 
-## Volo.Abp.Localization Package
+## Installation
 
 > This package is already installed by default with the startup template. So, most of the time, you don't need to install it manually.
 
@@ -242,4 +242,5 @@ Both of the samples above produce the output `Hello John, welcome!`.
 
 ## See Also
 
-* [Localization in Angular UI](UI/Angular/Localization.md)
+* [Localization in Angular UI](UI/Angular/Localization.md)
+* [Forms & Validation](UI/AspNetCore/Forms-Validation.md) for the ASP.NET Core MVC / Razor Pages UI

docs/en/Modules/Identity.md

@@ -2,5 +2,28 @@
 
 Identity module is used to manage [organization units](Organization-Units.md), roles, users and their permissions, based on the Microsoft Identity library.
 
-See [the source code](https://github.com/abpframework/abp/tree/dev/modules/identity). Documentation will come soon...
+**See [the source code](https://github.com/abpframework/abp/tree/dev/modules/identity). Documentation will come soon...**
 
+
+## Identity Security Log
+
+The security log can record some important operations or changes about your account. You can save the security log if needed.
+
+You can inject and use `IdentitySecurityLogManager` or `ISecurityLogManager` to write security logs. It will create a log object by default and fill in some common values, such as `CreationTime`, `ClientIpAddress`, `BrowserInfo`, `current user/tenant`, etc. Of course, you can override them.
+
+```cs
+await IdentitySecurityLogManager.SaveAsync(new IdentitySecurityLogContext()
+{
+	Identity = "IdentityServer";
+	Action = "ChangePassword";
+});
+```
+
+Configure `AbpSecurityLogOptions` to provide the application name for the log or disable this feature. **Enabled** by default.
+
+```cs
+Configure<AbpSecurityLogOptions>(options =>
+{
+	options.ApplicationName = "AbpSecurityTest";
+});
+```

docs/en/MongoDB.md

@@ -275,6 +275,19 @@ public class BookService
 
 > Important: You must reference to the `Volo.Abp.MongoDB` package from the project you want to access to the MongoDB API. This breaks encapsulation, but this is what you want in that case.
 
+### Transactions
+
+MongoDB supports multi-document transactions starting from the version 4.0 and the ABP Framework supports it. However, the [startup template](Startup-templates/Index.md) **disables** transactions by default. If your MongoDB **server** supports transactions, you can enable the it in the *YourProjectMongoDbModule* class:
+
+```csharp
+Configure<AbpUnitOfWorkDefaultOptions>(options =>
+{
+    options.TransactionBehavior = UnitOfWorkTransactionBehavior.Auto;
+});
+```
+
+> Or you can delete this code since this is already the default behavior.
+
 ### Advanced Topics
 
 #### Set Default Repository Classes

docs/en/Multi-Tenancy.md

@@ -1,53 +1,67 @@
-## Multi-Tenancy
+# Multi-Tenancy
 
-ABP Multi-tenancy module provides base functionality to create multi tenant applications. 
+Multi-Tenancy is a widely used architecture to create **SaaS applications** where the hardware and software **resources are shared by the customers** (tenants). ABP Framework provides all the base functionalities to create **multi tenant applications**. 
 
-Wikipedia [defines](https://en.wikipedia.org/wiki/Multitenancy) multi-tenancy as like that:
+Wikipedia [defines](https://en.wikipedia.org/wiki/Multitenancy) the multi-tenancy as like that:
 
 > Software **Multi-tenancy** refers to a software **architecture** in which a **single instance** of software runs on a server and serves **multiple tenants**. A tenant is a group of users who share a common access with specific privileges to the software instance. With a multitenant architecture, a software application is designed to provide every tenant a **dedicated share of the instance including its data**, configuration, user management, tenant individual functionality and non-functional properties. Multi-tenancy contrasts with multi-instance architectures, where separate software instances operate on behalf of different tenants.
 
-### Volo.Abp.MultiTenancy Package
+## Terminology: Host vs Tenant
 
-Volo.Abp.MultiTenancy package defines fundamental interfaces to make your code "multi-tenancy ready". So, install it to your project using the package manager console (PMC):
+There are two main side of a typical SaaS / Multi-tenant application:
 
-````
-Install-Package Volo.Abp.MultiTenancy
-````
+* A **Tenant** is a customer of the SaaS application that pays money to use the service.
+* **Host** is the company that owns the SaaS application and manages the system.
 
-> This package is already installed by default with the startup template. So, most of the time, you don't need to install it manually.
+The Host and the Tenant terms will be used for that purpose in the rest of the document.
 
-Then you can add **AbpMultiTenancyModule** dependency to your module:
+## Configuration
 
-````C#
-using Volo.Abp.Modularity;
-using Volo.Abp.MultiTenancy;
+### AbpMultiTenancyOptions: Enable/Disable Multi-Tenancy
+
+`AbpMultiTenancyOptions` is the main options class to **enable/disable the multi-tenancy** for your application.
+
+**Example: Enable multi-tenancy**
 
-namespace MyCompany.MyProject
+```csharp
+Configure<AbpMultiTenancyOptions>(options =>
 {
-    [DependsOn(typeof(AbpMultiTenancyModule))]
-    public class MyModule : AbpModule
-    {
-        //...
-    }
-}
-````
+    options.IsEnabled = true;
+});
+```
+
+> Multi-Tenancy is disabled in the ABP Framework by default. However, it is **enabled by default** when you create a new solution using the [startup template](Startup-Templates/Application.md). `MultiTenancyConsts` class in the solution has a constant to control it in a single place.
+
+### Database Architecture
+
+ABP Framework supports all the following approaches to store the tenant data in the database;
+
+* **Single Database**: All tenants are stored in a single database.
+* **Database per Tenant**: Every tenant has a separate, dedicated database to store the data related to that tenant.
+* **Hybrid**: Some tenants share a single databases while some tenants may have their own databases.
 
-> With the "Multi-tenancy ready" concept, we intent to develop our code to be compatible with multi-tenancy approach. Then it can be used in a multi-tenant application or not, depending on the requirements of the final application.
+[Tenant management module](Modules/Tenant-Management.md) (which comes pre-installed with the startup projects) allows you to set a connection string for any tenant (as optional), so you can achieve any of the approaches.
 
-#### Define Entities
+## Usage
 
-You can implement **IMultiTenant** interface for your entities to make them multi-tenancy ready. Example:
+Multi-tenancy system is designed to **work seamlessly** and make your application code **multi-tenancy unaware** as much as possible.
 
-````C#
+### IMultiTenant
+
+You should implement the `IMultiTenant` interface for your [entities](Entities.md) to make them **multi-tenancy ready**. 
+
+**Example: A multi-tenant *Product* entity**
+
+````csharp
 using System;
 using Volo.Abp.Domain.Entities;
 using Volo.Abp.MultiTenancy;
 
-namespace MyCompany.MyProject
+namespace MultiTenancyDemo.Products
 {
-    public class Product : AggregateRoot, IMultiTenant
+    public class Product : AggregateRoot<Guid>, IMultiTenant
     {
-        public Guid? TenantId { get; set; } //IMultiTenant defines TenantId property
+        public Guid? TenantId { get; set; } //Defined by the IMultiTenant interface
 
         public string Name { get; set; }
 
@@ -56,319 +70,340 @@ namespace MyCompany.MyProject
 }
 ````
 
-IMultiTenant requires to define a **TenantId** property in the implementing entity (See [entity documentation](Entities.md) for more about entities).
+* `IMultiTenant` interface just defines a `TenantId` property.
+
+When you implement this interface, ABP Framework **automatically** [filters](Data-Filtering.md) entities for the current tenant when you query from database. So, you don't need to manually add `TenantId` condition while performing queries. A tenant can not access to data of another tenant by default.
 
-#### Obtain Current Tenant's Id
+#### Why the TenantId Property is Nullable?
 
-Your code may require to get current tenant's id (regardless of how it's retrieved actually). You can [inject](Dependency-Injection.md) and use **ICurrentTenant** interface for such cases. Example:
+`IMultiTenant.TenantId` is **nullable**. When it is null that means the entity is owned by the **Host** side and not owned by a tenant. It is useful when you create a functionality in your system that is both used by the tenant and the host sides.
 
-````C#
-using Volo.Abp.DependencyInjection;
+For example, `IdentityUser` is an entity defined by the [Identity Module](Modules/Identity.md). The host and all the tenants have their own users. So, for the host side, users will have a `null` `TenantId` while tenant users will have their related `TenantId`.
+
+> **Tip**: If your entity is tenant-specific and has no meaning in the host side, you can force to not set `null` for the `TenantId` in the constructor of your entity.
+
+#### When to set the TenantId?
+
+ABP Framework doesn't set the `TenantId` for you (because of the cross tenant operations, ABP can not know the proper `TenantId` in some cases). So, you need to set it yourself **when you create a new multi-tenant entity**.
+
+##### Best Practice
+
+We suggest to set the `TenantId` in the constructor and never allow to change it again. So, the `Product` class can be re-written as below:
+
+````csharp
+using System;
+using Volo.Abp.Domain.Entities;
 using Volo.Abp.MultiTenancy;
 
-namespace MyCompany.MyProject
+namespace MultiTenancyDemo.Products
 {
-    public class MyService : ITransientDependency
+    public class Product : AggregateRoot<Guid>, IMultiTenant
     {
-        private readonly ICurrentTenant _currentTenant;
+        //Private setter prevents changing it later
+        public Guid? TenantId { get; private set; }
 
-        public MyService(ICurrentTenant currentTenant)
+        public string Name { get; set; }
+
+        public float Price { get; set; }
+
+        protected Product()
         {
-            _currentTenant = currentTenant;
+            //This parameterless constructor is needed for ORMs
         }
-
-        public void DoIt()
+        
+        public Product(string name, float price, Guid? tenantId)
         {
-            var tenantId = _currentTenant.Id;
-            //use tenantId in your code...
+            Name = name;
+            Price = price;
+            TenantId = tenantId; //Set in the constructor
         }
     }
 }
 ````
 
-#### Change Current Tenant
-
-TODO: ...
-
-#### Determining Current Tenant
-
-The first thing for a multi-tenant application is to determine the current tenant on the runtime. Volo.Abp.MultiTenancy package only provides abstractions (named as tenant resolver) for determining the current tenant, however it does not have any implementation out of the box.
-
-**Volo.Abp.AspNetCore.MultiTenancy** package has implementation to determine the current tenant from current web request (from subdomain, header, cookie, route... etc.). See Volo.Abp.AspNetCore.MultiTenancy Package section later in this document.
+> You can see the [entities document](Entities.md) for a more about entities and aggregate roots.
 
-##### Custom Tenant Resolvers
+You typically use the `ICurrentTenant` to set the `TenantId` while creating a new `Product`.
 
-You can add your custom tenant resolver to **AbpTenantResolveOptions** in your module's ConfigureServices method as like below:
+**Example: Creating a new product in a [Domain Service](Domain-Services.md)** 
 
-````C#
-using Microsoft.Extensions.DependencyInjection;
-using Volo.Abp.Modularity;
-using Volo.Abp.MultiTenancy;
+````csharp
+using System;
+using System.Threading.Tasks;
+using Volo.Abp.Domain.Repositories;
+using Volo.Abp.Domain.Services;
 
-namespace MyCompany.MyProject
+namespace MultiTenancyDemo.Products
 {
-    [DependsOn(typeof(AbpMultiTenancyModule))]
-    public class MyModule : AbpModule
+    public class ProductManager : DomainService
     {
-        public override void ConfigureServices(ServiceConfigurationContext context)
+        private readonly IRepository<Product, Guid> _productRepository;
+
+        public ProductManager(IRepository<Product, Guid> productRepository)
         {
-            Configure<AbpTenantResolveOptions>(options =>
-            {
-                options.TenantResolvers.Add(new MyCustomTenantResolveContributor());
-            });
+            _productRepository = productRepository;
+        }
 
-            //...
+        public async Task<Product> CreateAsync(string name, float price)
+        {
+            var product = new Product(name, price, CurrentTenant.Id);
+            return await _productRepository.InsertAsync(product);
         }
     }
 }
 ````
 
-`MyCustomTenantResolveContributor` must implement **ITenantResolveContributor** as shown below:
+* `DomainService` base class (and some common base classes in the ABP Framework) provides the `CurrentTenant`, so you directly use it. Otherwise, you need to [inject](Dependency-Injection.md) the `ICurrentTenant` service.
 
-````C#
-using Volo.Abp.MultiTenancy;
+### ICurrentTenant
 
-namespace MyCompany.MyProject
-{
-    public class MyCustomTenantResolveContributor : ITenantResolveContributor
-    {
-        public void Resolve(ITenantResolveContext context)
-        {
-            context.TenantIdOrName = ... //find tenant id or tenant name from somewhere...
-        }
-    }
-}
-````
+`ICurrentTenant` is the main service to interact with the multi-tenancy infrastructure.
+
+`ApplicationService`, `DomainService`, `AbpController` and some other base classes already has pre-injected `CurrentTenant` properties. For other type of classes, you can inject the `ICurrentTenant` into your service.
 
-A tenant resolver can set **TenantIdOrName** if it can determine it. If not, just leave it as is to allow next resolver to determine it.
+#### Tenant Properties
 
-#### Tenant Store
+`ICurrentTenant` defines the following properties;
 
-Volo.Abp.MultiTenancy package defines **ITenantStore** to abstract data source from the framework. You can implement ITenantStore to work with any data source (like a relational database) that stores information of your tenants.
+* `Id` (`Guid`): Id of the current tenant. Can be `null` if the current user is a host user or the tenant could not be determined from the request.
+* `Name` (`string`): Name of the current tenant. Can be `null` if the current user is a host user or the tenant could not be determined from the request.
+* `IsAvailable` (`bool`): Returns `true` if the `Id` is not `null`.
 
-...
+#### Change the Current Tenant
 
-##### Configuration Data Store
+ABP Framework automatically filters the resources (database, cache...) based on the `ICurrentTenant.Id`. However, in some cases you may want to perform an operation on behalf of a specific tenant, generally when you are in the host context.
 
-There is a built in (and default) tenant store, named ConfigurationTenantStore, that can be used to store tenants using standard [configuration system](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/configuration/) (with [Microsoft.Extensions.Configuration](https://www.nuget.org/packages/Microsoft.Extensions.Configuration) package). Thus, you can define tenants as hard coded or get from your appsettings.json file.
+`ICurrentTenant.Change` method changes the current tenant for a limited scope, so you can safely perform operations for the tenant.
 
-###### Example: Define tenants as hard-coded
+**Example: Get product count of a specific tenant**
 
-````C#
+````csharp
 using System;
-using Microsoft.Extensions.DependencyInjection;
-using Volo.Abp.Data;
-using Volo.Abp.Modularity;
-using Volo.Abp.MultiTenancy;
+using System.Threading.Tasks;
+using Volo.Abp.Domain.Repositories;
+using Volo.Abp.Domain.Services;
 
-namespace MyCompany.MyProject
+namespace MultiTenancyDemo.Products
 {
-    [DependsOn(typeof(AbpMultiTenancyModule))]
-    public class MyModule : AbpModule
+    public class ProductManager : DomainService
     {
-        public override void ConfigureServices(ServiceConfigurationContext context)
+        private readonly IRepository<Product, Guid> _productRepository;
+
+        public ProductManager(IRepository<Product, Guid> productRepository)
         {
-            Configure<AbpDefaultTenantStoreOptions>(options =>
+            _productRepository = productRepository;
+        }
+
+        public async Task<long> GetProductCountAsync(Guid? tenantId)
+        {
+            using (CurrentTenant.Change(tenantId))
             {
-                options.Tenants = new[]
-                {
-                    new TenantConfiguration(
-                        Guid.Parse("446a5211-3d72-4339-9adc-845151f8ada0"), //Id
-                        "tenant1" //Name
-                    ),
-                    new TenantConfiguration(
-                        Guid.Parse("25388015-ef1c-4355-9c18-f6b6ddbaf89d"), //Id
-                        "tenant2" //Name
-                    )
-                    {
-                        //tenant2 has a seperated database
-                        ConnectionStrings =
-                        {
-                            {ConnectionStrings.DefaultConnectionStringName, "..."}
-                        }
-                    }
-                };
-            });
+                return await _productRepository.GetCountAsync();
+            }
         }
     }
 }
 ````
 
-###### Example: Define tenants in appsettings.json
+* `Change` method can be used in a **nested way**. It restores the `CurrentTenant.Id` to the previous value after the `using` statement.
+* When you use `CurrentTenant.Id` inside the `Change` scope, you get the `tenantId` provided to the `Change` method. So, the repository also get this `tenantId` and can filter the database query accordingly.
+* Use `CurrentTenant.Change(null)` to change scope to the host context.
+
+> Always use the `Change` method with a `using` statement like done in this example.
 
-First create your configuration from your appsettings.json file as you always do.
+### Data Filtering: Disable the Multi-Tenancy Filter
 
-````C#
-using System.IO;
-using Microsoft.Extensions.Configuration;
-using Microsoft.Extensions.DependencyInjection;
-using Volo.Abp.Modularity;
+As mentioned before, ABP Framework handles data isolation between tenants using the [Data Filtering](Data-Filtering.md) system. In some cases, you may want to disable it and perform a query on all the data, without filtering for the current tenant.
+
+**Example: Get count of products in the database, including all the products of all the tenants.**
+
+````csharp
+using System;
+using System.Threading.Tasks;
+using Volo.Abp.Data;
+using Volo.Abp.Domain.Repositories;
+using Volo.Abp.Domain.Services;
 using Volo.Abp.MultiTenancy;
 
-namespace MyCompany.MyProject
+namespace MultiTenancyDemo.Products
 {
-    [DependsOn(typeof(AbpMultiTenancyModule))]
-    public class MyModule : AbpModule
+    public class ProductManager : DomainService
     {
-        public override void ConfigureServices(ServiceConfigurationContext context)
-        {
-            var configuration = BuildConfiguration();
+        private readonly IRepository<Product, Guid> _productRepository;
+        private readonly IDataFilter _dataFilter;
 
-            Configure<AbpDefaultTenantStoreOptions>(configuration);
+        public ProductManager(
+            IRepository<Product, Guid> productRepository,
+            IDataFilter dataFilter)
+        {
+            _productRepository = productRepository;
+            _dataFilter = dataFilter;
         }
 
-        private static IConfigurationRoot BuildConfiguration()
+        public async Task<long> GetProductCountAsync()
         {
-            return new ConfigurationBuilder()
-                .SetBasePath(Directory.GetCurrentDirectory())
-                .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
-                .Build();
+            using (_dataFilter.Disable<IMultiTenant>())
+            {
+                return await _productRepository.GetCountAsync();
+            }
         }
     }
 }
+
 ````
 
-Then add a "**Tenants**" section to your appsettings.json:
+See the [Data Filtering document](Data-Filtering.md) for more.
 
-````json
-"Tenants": [
-    {
-      "Id": "446a5211-3d72-4339-9adc-845151f8ada0",
-      "Name": "tenant1"
-    },
-    {
-      "Id": "25388015-ef1c-4355-9c18-f6b6ddbaf89d",
-      "Name": "tenant2",
-      "ConnectionStrings": {
-        "Default": "...write tenant2's db connection string here..."
-      }
-    }
-  ]
-````
+> Note that this approach won't work if your tenants have **separate databases** since there is no built-in way to query from multiple database in a single database query. You should handle it yourself if you need it.
 
-##### Volo.Abp... Package (TODO)
+## Infrastructure
 
-TODO: This package implements ITenantStore using a real database...
+### Determining the Current Tenant
 
-#### Tenant Information
+The first thing for a multi-tenant application is to determine the current tenant on the runtime.
 
-ITenantStore works with **TenantConfiguration** class that has several properties for a tenant:
+ABP Framework provides an extensible **Tenant Resolving** system for that purpose. Tenant Resolving system then used in the **Multi-Tenancy Middleware** to determine the current tenant for the current HTTP request.
 
-* **Id**: Unique Id of the tenant.
-* **Name**: Unique name of the tenant.
-* **ConnectionStrings**: If this tenant has dedicated database(s) to store it's data, then connection strings can provide database connection strings (it may have a default connection string and connection strings per modules - TODO: Add link to Abp.Data package document).
+#### Tenant Resolvers
 
-A multi-tenant application may require additional tenant properties, but these are the minimal requirements for the framework to work with multiple tenants.
+##### Default Tenant Resolvers
 
-#### Change Tenant By Code
+The following resolvers are provided and configured by default;
 
-TODO...
+* `CurrentUserTenantResolveContributor`: Gets the tenant id from claims of the current user, if the current user has logged in. **This should always be the first contributor for the security**.
+* `QueryStringTenantResolveContributor`: Tries to find current tenant id from query string parameters. The parameter name is `__tenant` by default.
+* `FormTenantResolveContributor`：Tries to find current tenant id from form parameters. The parameter name is `__tenant` by default.
+* `RouteTenantResolveContributor`: Tries to find current tenant id from route (URL path). The variable name is `__tenant` by default. If you defined a route with this variable, then it can determine the current tenant from the route.
+* `HeaderTenantResolveContributor`: Tries to find current tenant id from HTTP headers. The header name is `__tenant` by default.
+* `CookieTenantResolveContributor`: Tries to find current tenant id from cookie values. The cookie name is `__tenant` by default.
 
-### Volo.Abp.AspNetCore.MultiTenancy Package
+###### Problems with the NGINX
 
-Volo.Abp.AspNetCore.MultiTenancy package integrate multi-tenancy to ASP.NET Core applications. To install it to your project, run the following command on PMC:
+You may have problems with the `__tenant` in the HTTP Headers if you're using the [nginx](https://www.nginx.com/) as the reverse proxy server. Because it doesn't allow to use underscore and some other special characters in the HTTP headers and you may need to manually configure it. See the following documents please: 
+http://nginx.org/en/docs/http/ngx_http_core_module.html#ignore_invalid_headers
+http://nginx.org/en/docs/http/ngx_http_core_module.html#underscores_in_headers
 
-````
-Install-Package Volo.Abp.AspNetCore.MultiTenancy
-````
+###### AbpAspNetCoreMultiTenancyOptions
 
-Then you can add **AbpAspNetCoreMultiTenancyModule** dependency to your module:
+`__tenant` parameter name can be changed using `AbpAspNetCoreMultiTenancyOptions`.
 
-````C#
-using Volo.Abp.Modularity;
-using Volo.Abp.AspNetCore.MultiTenancy;
+**Example:**
 
-namespace MyCompany.MyProject
+````csharp
+services.Configure<AbpAspNetCoreMultiTenancyOptions>(options =>
 {
-    [DependsOn(typeof(AbpAspNetCoreMultiTenancyModule))]
-    public class MyModule : AbpModule
-    {
-        //...
-    }
-}
+    options.TenantKey = "MyTenantKey";
+});
 ````
 
-#### Multi-Tenancy Middleware
+> However, we don't suggest to change this value since some clients may assume the the `__tenant` as the parameter name and they might need to manually configure then.
 
-Volo.Abp.AspNetCore.MultiTenancy package includes the multi-tenancy middleware...
+##### Domain/Subdomain Tenant Resolver
 
-````C#
-app.UseMultiTenancy();
-````
+In a real application, most of times you will want to determine current tenant either by subdomain (like mytenant1.mydomain.com) or by the whole domain (like mytenant.com). If so, you can configure the `AbpTenantResolveOptions` to add the domain tenant resolver.
 
-TODO:...
+**Example: Add a subdomain resolver**
 
-#### Determining Current Tenant From Web Request
-
-Volo.Abp.AspNetCore.MultiTenancy package adds following tenant resolvers to determine current tenant from current web request (ordered by priority). These resolvers are added and work out of the box:
-
-* **CurrentUserTenantResolveContributor**: Gets the tenant id from claims of the current user, if the current user has logged in. **This should always be the first contributor for security**.
-* **QueryStringTenantResolveContributor**: Tries to find current tenant id from query string parameter. Parameter name is "__tenant" by default.
-* **RouteTenantResolveContributor**: Tries to find current tenant id from route (URL path). Variable name is "__tenant" by default. So, if you defined a route with this variable, then it can determine the current tenant from the route.
-* **HeaderTenantResolveContributor**: Tries to find current tenant id from HTTP header. Header name is "__tenant" by default.
-* **CookieTenantResolveContributor**: Tries to find current tenant id from cookie values. Cookie name is "__tenant" by default.
+````csharp
+Configure<AbpTenantResolveOptions>(options =>
+{
+    options.AddDomainTenantResolver("{0}.mydomain.com");
+});
+````
 
-> If you use nginx as a reverse proxy server, please note that if `TenantKey` contains an underscore or other special characters, there may be a problem, please refer to: 
-http://nginx.org/en/docs/http/ngx_http_core_module.html#ignore_invalid_headers
-http://nginx.org/en/docs/http/ngx_http_core_module.html#underscores_in_headers
+* `{0}` is the placeholder to determine current tenant's unique name.
+* Add this code to the `ConfigureServices` method of your [module](Module-Development-Basics.md).
+* This should be done in the *Web/API Layer* since the URL is a web related stuff.
 
+##### Custom Tenant Resolvers
 
-"__tenant" parameter name can be changed using AbpAspNetCoreMultiTenancyOptions. Example:
+You can add implement your custom tenant resolver and configure the `AbpTenantResolveOptions` in your module's `ConfigureServices` method as like below:
 
-````C#
-services.Configure<AbpAspNetCoreMultiTenancyOptions>(options =>
+````csharp
+Configure<AbpTenantResolveOptions>(options =>
 {
-    options.TenantKey = "MyTenantKey";
+    options.TenantResolvers.Add(new MyCustomTenantResolveContributor());
 });
 ````
 
-##### Domain Tenant Resolver
-
-In a real application, most of times you will want to determine current tenant either by subdomain (like mytenant1.mydomain.com) or by the whole domain (like mytenant.com). If so, you can configure AbpTenantResolveOptions to add a domain tenant resolver.
-
-###### Example: Add a subdomain resolver
+`MyCustomTenantResolveContributor` must inherit from the `TenantResolveContributorBase` (or implement the `ITenantResolveContributor`) as shown below:
 
-````C#
-using Microsoft.Extensions.DependencyInjection;
-using Volo.Abp.AspNetCore.MultiTenancy;
-using Volo.Abp.Modularity;
+````csharp
 using Volo.Abp.MultiTenancy;
 
-namespace MyCompany.MyProject
+namespace MultiTenancyDemo.Web
 {
-    [DependsOn(typeof(AbpAspNetCoreMultiTenancyModule))]
-    public class MyModule : AbpModule
+    public class MyCustomTenantResolveContributor : TenantResolveContributorBase
     {
-        public override void ConfigureServices(ServiceConfigurationContext context)
-        {
-            Configure<AbpTenantResolveOptions>(options =>
-            {
-                //Subdomain format: {0}.mydomain.com 
-                //Adding as the second highest priority resolver after 'CurrentUserTenantResolveContributor' to
-                //ensure the user cannot impersonate a different tenant.
-                options.TenantResolvers.Insert(1, new DomainTenantResolveContributor("{0}.mydomain.com"));
-            });
+        public override string Name => "Custom";
 
-            //...
+        public override void Resolve(ITenantResolveContext context)
+        {
+            //TODO...
         }
     }
 }
 ````
 
-{0} is the placeholder to determine current tenant's unique name.
+* A tenant resolver should set `context.TenantIdOrName` if it can determine it. If not, just leave it as is to allow the next resolver to determine it.
+* `context.ServiceProvider` can be used if you need to additional services to resolve from the [dependency injection](Dependency-Injection.md) system.
+
+#### Multi-Tenancy Middleware
 
-Instead of ``options.TenantResolvers.Insert(1, new DomainTenantResolveContributor("{0}.mydomain.com"));`` you can use this shortcut:
+Multi-Tenancy middleware is an ASP.NET Core request pipeline [middleware](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/middleware) that determines the current tenant from the HTTP request and sets the `ICurrentTenant` properties.
 
-````C#
-options.AddDomainTenantResolver("{0}.mydomain.com");
+Multi-Tenancy middleware is typically placed just under the [authentication](https://docs.microsoft.com/en-us/aspnet/core/security/authentication) middleware (`app.UseAuthentication()`):
+
+````csharp
+app.UseMultiTenancy();
 ````
 
-###### Example: Add a domain resolver
+> This middleware is already configured in the startup templates, so you normally don't need to manually add it.
+
+### Tenant Store
+
+`ITenantStore` is used to get the tenant configuration from a data source.
 
-````C#
-options.AddDomainTenantResolver("{0}.com");
+#### Tenant Management Module
+
+The [tenant management module](Modules/Tenant-Management) is **included in the startup templates** and implements the `ITenantStore` interface to get the tenants and their configuration from a database. It also provides the necessary functionality and UI to manage the tenants and their connection strings.
+
+#### Configuration Data Store
+
+**If you don't want to use the tenant management module**, the `DefaultTenantStore` is used as the `ITenantStore` implementation. It gets the tenant configurations from the [configuration system](Configuration.md) (`IConfiguration`). You can either configure the `AbpDefaultTenantStoreOptions` [options](Options.md) or set it in your `appsettings.json` file:
+
+**Example: Define tenants in appsettings.json**
+
+````json
+"Tenants": [
+    {
+      "Id": "446a5211-3d72-4339-9adc-845151f8ada0",
+      "Name": "tenant1"
+    },
+    {
+      "Id": "25388015-ef1c-4355-9c18-f6b6ddbaf89d",
+      "Name": "tenant2",
+      "ConnectionStrings": {
+        "Default": "...tenant2's db connection string here..."
+      }
+    }
+  ]
 ````
 
+> It is recommended to **use the Tenant Management module**, which is already pre-configured when you create a new application with the ABP startup templates.
+
+### Other Multi-Tenancy Infrastructure
+
+ABP Framework was designed to respect to the multi-tenancy in every aspect and most of the times everything will work as expected.
+
+BLOB Storing, Caching, Data Filtering, Data Seeding, Authorization and all the other services are designed to properly work in a multi-tenant system.
+
+## The Tenant Management Module
+
+ABP Framework provides all the the infrastructure to create a multi-tenant application, but doesn't make any assumption about how you manage (create, delete...) your tenants.
+
+The [Tenant Management module](Modules/Tenant-Management.md) provides a basic UI to manage your tenants and set their connection strings. It is pre-configured for the [application startup template](Startup-Templates/Application.md).
+
 ## See Also
 
 * [Features](Features.md)

docs/en/Redis-Cache.md

@@ -0,0 +1,43 @@
+# Redis Cache
+
+ABP Framework [Caching System](Caching.md) extends the [ASP.NET Core distributed cache](https://docs.microsoft.com/en-us/aspnet/core/performance/caching/distributed). So, **any provider** supported by the standard ASP.NET Core distributed cache can be usable in your application and can be configured just like **documented by Microsoft**.
+
+However, ABP provides an **integration package** for Redis Cache: [Volo.Abp.Caching.StackExchangeRedis](https://www.nuget.org/packages/Volo.Abp.Caching.StackExchangeRedis). There are two reasons for using this package, instead of the standard [Microsoft.Extensions.Caching.StackExchangeRedis](https://www.nuget.org/packages/Microsoft.Extensions.Caching.StackExchangeRedis/) package.
+
+1. It implements `SetManyAsync` and `GetManyAsync` methods. These are not standard methods of the Microsoft Caching library, but added by the ABP Framework [Caching](Caching.md) system. They **significiantly increases the performance** when you need to set/get multiple cache items with a single method call.
+2. It **simplifies** the Redis cache **configuration** (will be explained below).
+
+> Volo.Abp.Caching.StackExchangeRedis is already uses the Microsoft.Extensions.Caching.StackExchangeRedis package, but extends and improves it.
+
+## Installation
+
+> This package is already installed in the application startup template if it is using Redis.
+
+Open a command line in the folder of your `.csproj` file and type the following ABP CLI command:
+
+````bash
+abp add-package Volo.Abp.Caching.StackExchangeRedis
+````
+
+## Configuration
+
+Volo.Abp.Caching.StackExchangeRedis package automatically gets the redis [configuration](Configuration.md) from the `IConfiguration`. So, for example, you can set your configuration inside the `appsettings.json`:
+
+````js
+"Redis": { 
+ "Configuration": "127.0.0.1"
+}
+````
+
+Alternatively you can configure the standard [RedisCacheOptions](https://docs.microsoft.com/en-us/dotnet/api/microsoft.extensions.caching.stackexchangeredis.rediscacheoptions) [options](Options.md) class in the `ConfigureServices` method of your [module](Module-Development-Basics.md):
+
+````csharp
+Configure<RedisCacheOptions>(options =>
+{
+    //...
+});
+````
+
+## See Also
+
+* [Caching](Caching.md)

docs/en/Road-Map.md

@@ -4,22 +4,18 @@ You can always check the milestone planning and the prioritized backlog issues o
 
 While we will **continue to add other exciting features**, we will work on the following major items in the **middle term**:
 
-* **Blazor UI** for the framework and all the pre-built modules.
+* **Blazor UI** for the framework and all the pre-built modules (in progress).
 * **.NET 5.0**! As Microsoft has announced that the .NET 5.0 will be released in November 2020, we will prepare for this change before and move to the .NET 5.0 just after Microsoft releases it. We hope a smooth transition.
 
 Beside this middle term goals, there are many features in the [backlog](https://github.com/abpframework/abp/milestone/2). Here, a list of some major items in the backlog;
 
-* [#2882](https://github.com/abpframework/abp/issues/2882) / Providing a **gRPC integration** infrastructure (while it is [already possible](https://github.com/abpframework/abp-samples/tree/master/GrpcDemo) to create or consume gRPC endpoints for your application, we plan to create endpoints for the [standard application modules](https://docs.abp.io/en/abp/latest/Modules/Index))
+* [#2882](https://github.com/abpframework/abp/issues/2882) / Providing a gRPC integration infrastructure (while it is [already possible](https://github.com/abpframework/abp-samples/tree/master/GrpcDemo) to create or consume gRPC endpoints for your application, we plan to create endpoints for the [standard application modules](https://docs.abp.io/en/abp/latest/Modules/Index))
 * [#236](https://github.com/abpframework/abp/issues/236) Resource based authorization system
 * [#1754](https://github.com/abpframework/abp/issues/1754) / Multi-lingual entities
-* [#347](https://github.com/abpframework/abp/issues/347) / Support MongoDB ACID transactions
 * [#633](https://github.com/abpframework/abp/issues/633) / Realtime notification system
 * [#57](https://github.com/abpframework/abp/issues/57) / Built-in CQRS infrastructure
-* [#4222](https://github.com/abpframework/abp/issues/4222) / Kafka integration for the Distributed Event Bus
 * [#336](https://github.com/abpframework/abp/issues/336) / Health Check abstraction
 * [#2532](https://github.com/abpframework/abp/issues/2532), [#2564](https://github.com/abpframework/abp/issues/2465) / CosmosDB integration with EF Core and MongoDB API
-* [#1168](https://github.com/abpframework/abp/issues/1168) / Official Vue UI startup template
-* [#1638](https://github.com/abpframework/abp/issues/1638) Official React startup template
 * [#4223](https://github.com/abpframework/abp/issues/4223) / WebHook system
 * [#162](https://github.com/abpframework/abp/issues/162) / Azure ElasticDB Integration for multitenancy
 * [#2296](https://github.com/abpframework/abp/issues/2296) / Feature toggling infrastructure

docs/en/SignalR-Integration.md

@@ -1,6 +1,6 @@
 # SignalR Integration
 
-> It is already possible to follow [the standard Microsoft tutorial](https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr) to add [SignalR](https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction) to your application. However, ABP provides a SignalR integration packages those simplify the integration and usage.
+> It is already possible to follow [the standard Microsoft tutorial](https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr) to add [SignalR](https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction) to your application. However, ABP provides SignalR integration packages those simplify the integration and usage.
 
 ## Installation
 

docs/en/Startup-Templates/Application.md

@@ -33,6 +33,7 @@ abp new Acme.BookStore -t app
 This template provides multiple UI frameworks:
 
 * `mvc`: ASP.NET Core MVC UI with Razor Pages (default)
+* `blazor`: Blazor UI
 * `angular`: Angular UI
 
 Use `-u` or `--ui` option to specify the UI framework:

docs/en/Tutorials/Part-1.md

@@ -2,32 +2,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC","Blazor","NG"],
     "DB": ["EF","Mongo"]
 }
 ````
-{{
-if UI == "MVC"
-  UI_Text="mvc"
-else if UI == "NG"
-  UI_Text="angular"
-else
-  UI_Text="?"
-end
-if DB == "EF"
-  DB_Text="Entity Framework Core"
-else if DB == "Mongo"
-  DB_Text="MongoDB"
-else
-  DB_Text="?"
-end
-}}
-
 ## About This Tutorial
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **{{DB_Text}}** as the ORM provider.
+* **{{DB_Value}}** as the database provider.
 * **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts;
@@ -45,9 +28,10 @@ This tutorial is organized as the following parts;
 
 ### Download the Source Code
 
-This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared two combinations of the source code to be downloaded:
+This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared a few combinations of the source code to be downloaded:
 
 * [MVC (Razor Pages) UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-EfCore)
+* [Blazor UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore)
 * [Angular UI with MongoDB](https://github.com/abpframework/abp-samples/tree/master/BookStore-Angular-MongoDb)
 
 {{if UI == "MVC" && DB == "EF"}}
@@ -217,7 +201,7 @@ Before updating the database, read the section below to learn how to seed some i
 
 > It's good to have some initial data in the database before running the application. This section introduces the [Data Seeding](../Data-Seeding.md) system of the ABP framework. You can skip this section if you don't want to create seed data, but it is suggested to follow it to learn this useful ABP Framework feature.
 
-Create a class deriving from the `IDataSeedContributor` in the `*.Domain` project and copy the following code:
+Create a class deriving from the `IDataSeedContributor` in the `*.Domain` project by copying the following code:
 
 ```csharp
 using System;
@@ -278,18 +262,9 @@ Run the `Acme.BookStore.DbMigrator` application to update the database:
 
 ![bookstore-dbmigrator-on-solution](images/bookstore-dbmigrator-on-solution.png)
 
-{{if DB == "EF"}}
 
 `.DbMigrator` is a console application that can be run to **migrate the database schema** and **seed the data** on **development** and **production** environments.
 
-{{end}}
-
-{{if DB == "Mongo"}}
-
-While MongoDB **doesn't require** a database schema migration, it is still good to run this application since it **seeds the initial data** on the database. This application can be used on **development** and **production** environments.
-
-{{end}}
-
 ## Create the Application Service
 
 The application layer is separated into two projects:
@@ -426,7 +401,7 @@ namespace Acme.BookStore.Books
 
 ### BookAppService
 
-It is time to implement the `IBookAppService` interface. Create a new class, named `BookAppService` in the `Books` namespace (folder) of the Acme.BookStore.Application project:
+It is time to implement the `IBookAppService` interface. Create a new class, named `BookAppService` in the `Books` namespace (folder) of the `Acme.BookStore.Application` project:
 
 ````csharp
 using System;
@@ -466,7 +441,7 @@ ABP can [**automagically**](../API/Auto-API-Controllers.md) configures your appl
 
 ### Swagger UI
 
-The startup template is configured to run the [Swagger UI](https://swagger.io/tools/swagger-ui/) using the [Swashbuckle.AspNetCore](https://github.com/domaindrivendev/Swashbuckle.AspNetCore) library. Run the application by pressing `CTRL+F5` and navigate to `https://localhost:<port>/swagger/` on your browser. (Replace `<port>` with your own port number.)
+The startup template is configured to run the [Swagger UI](https://swagger.io/tools/swagger-ui/) using the [Swashbuckle.AspNetCore](https://github.com/domaindrivendev/Swashbuckle.AspNetCore) library. Run the application ({{if UI=="MVC"}}`Acme.BookStore.Web`{{else}}`Acme.BookStore.HttpApi.Host`{{end}}) by pressing `CTRL+F5` and navigate to `https://localhost:<port>/swagger/` on your browser. Replace `<port>` with your own port number.
 
 You will see some built-in service endpoints as well as the `Book` service and its REST-style endpoints:
 

docs/en/Tutorials/Part-10.md

@@ -2,32 +2,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC","Blazor","NG"],
     "DB": ["EF","Mongo"]
 }
 ````
-{{
-if UI == "MVC"
-  UI_Text="mvc"
-else if UI == "NG"
-  UI_Text="angular"
-else
-  UI_Text="?"
-end
-if DB == "EF"
-  DB_Text="Entity Framework Core"
-else if DB == "Mongo"
-  DB_Text="MongoDB"
-else
-  DB_Text="?"
-end
-}}
-
 ## About This Tutorial
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **{{DB_Text}}** as the ORM provider. 
+* **{{DB_Value}}** as the ORM provider. 
 * **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts;
@@ -45,9 +28,10 @@ This tutorial is organized as the following parts;
 
 ### Download the Source Code
 
-This tutorials has multiple versions based on your **UI** and **Database** preferences. We've prepared two combinations of the source code to be downloaded:
+This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared a few combinations of the source code to be downloaded:
 
 * [MVC (Razor Pages) UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-EfCore)
+* [Blazor UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore)
 * [Angular UI with MongoDB](https://github.com/abpframework/abp-samples/tree/master/BookStore-Angular-MongoDb)
 
 ## Introduction
@@ -66,21 +50,21 @@ public Guid AuthorId { get; set; }
 
 {{if DB=="EF"}}
 
-> In this tutorial, we preferred to not add a **navigation property** to the `Author` entity (like `public Author Author { get; set; }`). This is due to follow the DDD best practices (rule: refer to other aggregates only by id). However, you can add such a navigation property and configure it for the EF Core. In this way, you don't need to write join queries while getting books with their entities (just like we will done below) which makes your application code simpler.
+> In this tutorial, we preferred to not add a **navigation property** to the `Author` entity from the `Book` class (like `public Author Author { get; set; }`). This is due to follow the DDD best practices (rule: refer to other aggregates only by id). However, you can add such a navigation property and configure it for the EF Core. In this way, you don't need to write join queries while getting books with their authors (just like we will done below) which makes your application code simpler.
 
 {{end}}
 
 ## Database & Data Migration
 
-Added a new, required `AuthorId` property to the `Book` entity. But, what about the existing books on the database? They currently don't have `AuthorId`s and this will be a problem when we try to run the application.
+Added a new, required `AuthorId` property to the `Book` entity. But, **what about the existing books** on the database? They currently don't have `AuthorId`s and this will be a problem when we try to run the application.
 
-This is a typical migration problem and the decision depends on your case;
+This is a **typical migration problem** and the decision depends on your case;
 
 * If you haven't published your application to the production yet, you can just delete existing books in the database, or you can even delete the entire database in your development environment.
-* You can do it programmatically on data migration or seed phase.
+* You can update the existing data programmatically on data migration or seed phase.
 * You can manually handle it on the database.
 
-We prefer to **delete the database** {{if DB=="EF"}}(run the `Drop-Database` in the *Package Manager Console*){{end}} since this is just an example project and data loss is not important. Since this topic is not related to the ABP Framework, we don't go deeper for all the scenarios.
+We prefer to **delete the database** {{if DB=="EF"}}(you can run the `Drop-Database` in the *Package Manager Console*){{end}} since this is just an example project and data loss is not important. Since this topic is not related to the ABP Framework, we don't go deeper for all the scenarios.
 
 {{if DB=="EF"}}
 
@@ -108,6 +92,8 @@ Run the following command in the Package Manager Console (of the Visual Studio)
 Add-Migration "Added_AuthorId_To_Book"
 ````
 
+> Ensure that the `Acme.BookStore.EntityFrameworkCore.DbMigrations` is the Default project and the `Acme.BookStore.DbMigrator` is the startup project, as always.
+
 This should create a new migration class with the following code in its `Up` method:
 
 ````csharp
@@ -222,6 +208,8 @@ namespace Acme.BookStore
 
 The only change is that we set the `AuthorId` properties of the `Book` entities.
 
+> Delete existing books or delete the database before executing the `DbMigrator`. See the *Database & Data Migration* section above for more info.
+
 {{if DB=="EF"}}
 
 You can now run the `.DbMigrator` console application to **migrate** the **database schema** and **seed** the initial data.
@@ -299,7 +287,7 @@ namespace Acme.BookStore.Books
 }
 ````
 
-This will be used in a new method will be added to the `IBookAppService`.
+This will be used in a new method that will be added to the `IBookAppService`.
 
 ### IBookAppService
 
@@ -1068,4 +1056,112 @@ Open the `/src/app/book/book.component.html` and add the following form group ju
 
 That's all. Just run the application and try to create or edit an author.
 
+{{end}}
+
+{{if UI == "Blazor"}}
+
+### The Book List
+
+It is very easy to show the *Author Name* in the book list. Open the `/Pages/Books.razor` file in the `Acme.BookStore.Blazor` project and add the following `DataGridColumn` definition just after the `Name` (book name) column:
+
+````xml
+<DataGridColumn TItem="BookDto"
+                Field="@nameof(BookDto.AuthorName)"
+                Caption="@L["Author"]"></DataGridColumn>
+````
+
+When you run the application, you can see the *Author* column on the table:
+
+![blazor-bookstore-book-list-with-authors](images/blazor-bookstore-book-list-with-authors.png)
+
+### Create Book Modal
+
+Add the following field to the `@code` section of the `Books.razor` file:
+
+````csharp
+IReadOnlyList<AuthorLookupDto> authorList = Array.Empty<AuthorLookupDto>();
+````
+
+And fill it in the `OnInitializedAsync` method, by adding the following code to the end of the method:
+
+````csharp
+authorList = (await AppService.GetAuthorLookupAsync()).Items;
+````
+
+The final `@code` block should be the following:
+
+````csharp
+@code
+{
+    bool canCreateBook;
+    bool canEditBook;
+    bool canDeleteBook;
+
+    //ADDED A NEW FIELD
+    IReadOnlyList<AuthorLookupDto> authorList = Array.Empty<AuthorLookupDto>();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        canCreateBook = await 
+            AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Create);
+        canEditBook = await 
+            AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Edit);
+        canDeleteBook = await 
+            AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Delete);
+
+        //GET AUTHORS
+        authorList = (await AppService.GetAuthorLookupAsync()).Items;
+    }
+}
+````
+
+Finally, add the following `Field` definition into the `ModalBody` of the *Create* modal, as the first item, before the `Name` field:
+
+````xml
+<Field>
+    <FieldLabel>@L["Author"]</FieldLabel>
+    <Select TValue="Guid" @bind-SelectedValue="@NewEntity.AuthorId">
+        <SelectItem TValue="Guid" Value="Guid.Empty">@L["PickAnAuthor"]</SelectItem>
+        @foreach (var author in authorList)
+        {
+            <SelectItem TValue="Guid" Value="@author.Id">
+                @author.Name
+            </SelectItem>
+        }
+        </Select>
+</Field>
+````
+
+This requires to add a new localization key to the `en.json` file:
+
+````js
+"PickAnAuthor": "Pick an author"
+````
+
+You can run the application to see the *Author Selection* while creating a new book:
+
+![book-create-modal-with-author](images/book-create-modal-with-author.png)
+
+### Edit Book Modal
+
+Add the following `Field` definition into the `ModalBody` of the *Edit* modal, as the first item, before the `Name` field:
+
+````xml
+<Field>
+    <FieldLabel>@L["Author"]</FieldLabel>
+    <Select TValue="Guid" @bind-SelectedValue="@EditingEntity.AuthorId">
+        @foreach (var author in authorList)
+        {
+            <SelectItem TValue="Guid" Value="@author.Id">
+                @author.Name
+            </SelectItem>
+        }
+    </Select>
+</Field>
+````
+
+That's all. We are reusing the `authorList` defined for the *Create* modal.
+
 {{end}}

docs/en/Tutorials/Part-2.md

@@ -2,32 +2,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC","Blazor","NG"],
     "DB": ["EF","Mongo"]
 }
 ````
-{{
-if UI == "MVC"
-  UI_Text="mvc"
-else if UI == "NG"
-  UI_Text="angular"
-else
-  UI_Text="?"
-end
-if DB == "EF"
-  DB_Text="Entity Framework Core"
-else if DB == "Mongo"
-  DB_Text="MongoDB"
-else
-  DB_Text="?"
-end
-}}
-
 ## About This Tutorial
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **{{DB_Text}}** as the ORM provider. 
+* **{{DB_Value}}** as the ORM provider. 
 * **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts;
@@ -45,9 +28,10 @@ This tutorial is organized as the following parts;
 
 ### Download the Source Code
 
-This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared two combinations of the source code to be downloaded:
+This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared a few combinations of the source code to be downloaded:
 
 * [MVC (Razor Pages) UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-EfCore)
+* [Blazor UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore)
 * [Angular UI with MongoDB](https://github.com/abpframework/abp-samples/tree/master/BookStore-Angular-MongoDb)
 
 {{if UI == "MVC" && DB == "EF"}}
@@ -115,7 +99,7 @@ We will use these dynamic proxy functions in the next sections to communicate to
 
 ## Localization
 
-Before starting to the UI development, we first want to prepare the localization texts (you normally do when needed while developing your application).
+Before starting to the UI development, we first want to prepare the localization texts (you normally do this when needed while developing your application).
 
 Localization texts are located under the `Localization/BookStore` folder of the `Acme.BookStore.Domain.Shared` project:
 
@@ -341,9 +325,7 @@ You can run the application! The final UI of this part is shown below:
 
 This is a fully working, server side paged, sorted and localized table of books.
 
-{{end}}
-
-{{if UI == "NG"}}
+{{else if UI == "NG"}}
 
 ## Install NPM packages
 
@@ -461,7 +443,7 @@ function configureRoutes(routes: RoutesService) {
 * `order` is the order of the menu item.
 * `layout` is the layout of the BooksModule's routes (there are three types of pre-defined layouts: `eLayoutType.application`, `eLayoutType.account` or `eLayoutType.empty`).
 
-For more information, see the [RoutesService document](https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu.md#via-routesservice).
+For more information, see the [RoutesService document](../UI/Angular/Modifying-the-Menu.md#via-routesservice).
 
 ### Service Proxy Generation
 
@@ -551,7 +533,137 @@ Now you can see the final result on your browser:
 
 ![Book list final result](./images/bookstore-book-list.png)
 
-{{end}}
+{{else if UI == "Blazor"}}
+
+## Create a Books Page
+
+It's time to create something visible and usable! Right click to the `Pages` folder under the `Acme.BookStore.Blazor` project and add a new **razor component**, named `Books.razor`:
+
+![blazor-add-books-component](images/blazor-add-books-component.png)
+
+Replace the contents of this component as shown below:
+
+````html
+@page "/books"
+
+<h2>Books</h2>
+
+@code {
+
+}
+````
+
+### Add Books Page to the Main Menu
+
+Open the `BookStoreMenuContributor` class in the `Blazor` project add the following code to the end of the `ConfigureMainMenuAsync` method:
+
+````csharp
+context.Menu.AddItem(
+    new ApplicationMenuItem(
+        "BooksStore",
+        l["Menu:BookStore"],
+        icon: "fa fa-book"
+    ).AddItem(
+        new ApplicationMenuItem(
+            "BooksStore.Books",
+            l["Menu:Books"],
+            url: "/books"
+        )
+    )
+);
+````
+
+Run the project, login to the application with the username `admin` and the password `1q2w3E*` and see the new menu item has been added to the main menu:
+
+![blazor-menu-bookstore](images/blazor-menu-bookstore.png)
+
+When you click to the Books menu item under the Book Store parent, you are being redirected to the new empty Books Page.
+
+### Book List
+
+We will use the [Blazorise library](https://blazorise.com/) as the UI component kit. It is a very powerful library that supports major HTML/CSS frameworks, including the Bootstrap.
+
+ABP Framework provides a generic base class, `BlazoriseCrudPageBase<...>`, to create CRUD style pages. This base class is compatible to the `ICrudAppService` that was used to build the `IBookAppService`. So, we can inherit from the `BlazoriseCrudPageBase` to automate the standard CRUD stuff.
+
+Open the `Books.razor` and replace the content as the following:
+
+````xml
+@page "/books"
+@using Volo.Abp.Application.Dtos
+@using Volo.Abp.BlazoriseUI
+@using Acme.BookStore.Books
+@using Acme.BookStore.Localization
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<BookStoreResource> L
+@inherits BlazoriseCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>
+
+<Card>
+    <CardHeader>
+        <h2>@L["Books"]</h2>
+    </CardHeader>
+    <CardBody>
+        <DataGrid TItem="BookDto"
+                  Data="Entities"
+                  ReadData="OnDataGridReadAsync"
+                  TotalItems="TotalCount"
+                  ShowPager="true"
+                  PageSize="PageSize">
+            <DataGridColumns>
+                <DataGridColumn TItem="BookDto"
+                                Field="@nameof(BookDto.Name)"
+                                Caption="@L["Name"]"></DataGridColumn>
+                <DataGridColumn TItem="BookDto"
+                                Field="@nameof(BookDto.Type)"
+                                Caption="@L["Type"]">
+                    <DisplayTemplate>
+                        @L[$"Enum:BookType:{(int)context.Type}"]
+                    </DisplayTemplate>
+                </DataGridColumn>
+                <DataGridColumn TItem="BookDto"
+                                Field="@nameof(BookDto.PublishDate)" 
+                                Caption="@L["PublishDate"]">
+                    <DisplayTemplate>
+                        @context.PublishDate.ToShortDateString()
+                    </DisplayTemplate>
+                </DataGridColumn>
+                <DataGridColumn TItem="BookDto"
+                                Field="@nameof(BookDto.Price)" 
+                                Caption="@L["Price"]">
+                </DataGridColumn>
+                <DataGridColumn TItem="BookDto"
+                                Field="@nameof(BookDto.CreationTime)"
+                                Caption="@L["CreationTime"]">
+                    <DisplayTemplate>
+                        @context.CreationTime.ToLongDateString()
+                    </DisplayTemplate>
+                </DataGridColumn>
+            </DataGridColumns>
+        </DataGrid>
+    </CardBody>
+</Card>
+````
+
+> If you see some syntax errors, you can ignore them if your application properly built and run. Visual Studio still has some bugs with Blazor.
+
+* Inherited from the `BlazoriseCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>` which implements all the CRUD details for us.
+* `Entities`, `TotalCount`, `PageSize`, `OnDataGridReadAsync` are defined in the base blass.
+* Injected `IStringLocalizer<BookStoreResource>` (as `L` object) and used for localization.
+
+While the code above pretty easy to understand, you can check the Blazorise [Card](https://blazorise.com/docs/components/card/) and [DataGrid](https://blazorise.com/docs/extensions/datagrid/) documents to understand them better.
+
+#### About the BlazoriseCrudPageBase
+
+We will continue to benefit from the `BlazoriseCrudPageBase` for the books page. You could just inject the `IBookAppService` and perform all the server side calls yourself (thanks to the [Dynamic C# HTTP API Client Proxy](../API/Dynamic-CSharp-API-Clients.md) system of the ABP Framework). We will do it manually for the authors page to demonstrate how to call server side HTTP APIs in your Blazor applications.
+
+## Run the Final Application
+
+You can run the application! The final UI of this part is shown below:
+
+![blazor-bookstore-book-list](images/blazor-bookstore-book-list.png)
+
+This is a fully working, server side paged, sorted and localized table of books.
+
+{{end # UI }}
 
 ## The Next Part
 

docs/en/Tutorials/Part-3.md

@@ -2,32 +2,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC","Blazor","NG"],
     "DB": ["EF","Mongo"]
 }
 ````
-{{
-if UI == "MVC"
-  UI_Text="mvc"
-else if UI == "NG"
-  UI_Text="angular"
-else
-  UI_Text="?"
-end
-if DB == "EF"
-  DB_Text="Entity Framework Core"
-else if DB == "Mongo"
-  DB_Text="MongoDB"
-else
-  DB_Text="?"
-end
-}}
-
 ## About This Tutorial
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **{{DB_Text}}** as the ORM provider. 
+* **{{DB_Value}}** as the ORM provider. 
 * **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts;
@@ -45,9 +28,10 @@ This tutorial is organized as the following parts;
 
 ### Download the Source Code
 
-This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared two combinations of the source code to be downloaded:
+This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared a few combinations of the source code to be downloaded:
 
 * [MVC (Razor Pages) UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-EfCore)
+* [Blazor UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore)
 * [Angular UI with MongoDB](https://github.com/abpframework/abp-samples/tree/master/BookStore-Angular-MongoDb)
 
 {{if UI == "MVC" && DB == "EF"}}
@@ -1175,6 +1159,392 @@ Clicking the "Delete" action calls the `delete` method which then shows a confir
 
 {{end}}
 
+{{if UI == "Blazor"}}
+
+## Creating a New Book
+
+In this section, you will learn how to create a new modal dialog form to create a new book. Since we've inherited from the `BlazoriseCrudPage`, we only need to develop the view part.
+
+### Add "New Button" Button
+
+Open the `Books.razor` and replace the `<CardHeader>` section with the following code:
+
+````xml
+<CardHeader>
+    <Row>
+        <Column ColumnSize="ColumnSize.Is6">
+            <h2>@L["Books"]</h2>
+        </Column>
+        <Column ColumnSize="ColumnSize.Is6">
+            <Paragraph Alignment="TextAlignment.Right">
+                <Button Color="Color.Primary"
+                        Clicked="OpenCreateModalAsync">@L["NewBook"]</Button>
+            </Paragraph>
+        </Column>
+    </Row>
+</CardHeader>
+````
+
+This will change the card header by adding a "New book" button to the right side:
+
+![blazor-add-book-button](images/blazor-add-book-button.png)
+
+Now, we can add a modal that will be opened when we click to the button.
+
+### Book Creation Modal
+
+Open the `Books.razor` and add the following code to the end of the page:
+
+````xml
+<Modal @ref="CreateModal">
+    <ModalBackdrop />
+    <ModalContent IsCentered="true">
+        <ModalHeader>
+            <ModalTitle>@L["NewBook"]</ModalTitle>
+            <CloseButton Clicked="CloseCreateModalAsync" />
+        </ModalHeader>
+        <ModalBody>
+            <Field>
+                <FieldLabel>@L["Name"]</FieldLabel>
+                <TextEdit @bind-text="NewEntity.Name" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["Type"]</FieldLabel>
+                <Select TValue="BookType" @bind-SelectedValue="@NewEntity.Type">
+                    @foreach (int bookTypeValue in Enum.GetValues(typeof(BookType)))
+                    {
+                        <SelectItem TValue="BookType" Value="@((BookType)bookTypeValue)">
+                            @L[$"Enum:BookType:{bookTypeValue}"]
+                        </SelectItem>
+                    }
+                </Select>
+            </Field>
+            <Field>
+                <FieldLabel>@L["PublishDate"]</FieldLabel>
+                <DateEdit TValue="DateTime" @bind-Date="NewEntity.PublishDate" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["Price"]</FieldLabel>
+                <NumericEdit TValue="float" @bind-Value="NewEntity.Price" />
+            </Field>
+        </ModalBody>
+        <ModalFooter>
+            <Button Color="Color.Secondary" 
+                    Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
+            <Button Color="Color.Primary" 
+                    Clicked="CreateEntityAsync">@L["Save"]</Button>
+        </ModalFooter>
+    </ModalContent>
+</Modal>
+````
+
+* `CreateModal` object, `CloseCreateModalAsync` and `CreateEntityAsync` method are defined by the base class. See the [Blazorise documentation](https://blazorise.com/docs/) if you want to understand the `Modal` and the other components.
+
+That's all. Run the application and try to add a new book:
+
+![blazor-new-book-modal](images/blazor-new-book-modal.png)
+
+## Updating a Book
+
+Editing a books is similar to the creating a new book.
+
+### Actions Dropdown
+
+Open the `Books.razor` and add the following `DataGridColumn` section inside the `DataGridColumns` as the first item:
+
+````xml
+<DataGridColumn Width="150px" 
+                TItem="BookDto"
+                Field="@nameof(BookDto.Id)" 
+                Sortable="false" 
+                Caption="@L["Actions"]">
+    <DisplayTemplate>
+        <Dropdown>
+            <DropdownToggle Color="Color.Primary">
+                @L["Actions"]
+            </DropdownToggle>
+            <DropdownMenu>
+                <DropdownItem Clicked="() => OpenEditModalAsync(context.Id)">
+                    @L["Edit"]
+                </DropdownItem>
+            </DropdownMenu>
+        </Dropdown>
+    </DisplayTemplate>
+</DataGridColumn>
+````
+
+* `OpenEditModalAsync` is defined in the base class which takes the `Id` of the entity (book) to edit.
+
+This adds an "Actions" dropdown to all the books inside the `DataGrid` with an `Edit` action:
+
+![blazor-edit-book-action](images/blazor-edit-book-action.png)
+
+### Edit Modal
+
+We can now define a modal to edit the book. Add the following code to the end of the `Books.razor` page:
+
+````xml
+<Modal @ref="EditModal">
+    <ModalBackdrop />
+    <ModalContent IsCentered="true">
+        <ModalHeader>
+            <ModalTitle>@EditingEntity.Name</ModalTitle>
+            <CloseButton Clicked="CloseEditModalAsync" />
+        </ModalHeader>
+        <ModalBody>
+            <Field>
+                <FieldLabel>@L["Name"]</FieldLabel>
+                <TextEdit @bind-text="EditingEntity.Name" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["Type"]</FieldLabel>
+                <Select TValue="BookType" @bind-SelectedValue="@EditingEntity.Type">
+                    @foreach (int bookTypeValue in Enum.GetValues(typeof(BookType)))
+                    {
+                        <SelectItem TValue="BookType" Value="@((BookType)bookTypeValue)">
+                            @L[$"Enum:BookType:{bookTypeValue}"]
+                        </SelectItem>
+                    }
+                </Select>
+            </Field>
+            <Field>
+                <FieldLabel>@L["PublishDate"]</FieldLabel>
+                <DateEdit TValue="DateTime" @bind-Date="EditingEntity.PublishDate" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["Price"]</FieldLabel>
+                <NumericEdit TValue="float" @bind-Value="EditingEntity.Price" />
+            </Field>
+        </ModalBody>
+        <ModalFooter>
+            <Button Color="Color.Secondary"
+                    Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
+            <Button Color="Color.Primary"
+                    Clicked="UpdateEntityAsync">@L["Save"]</Button>
+        </ModalFooter>
+    </ModalContent>
+</Modal>
+````
+
+### AutoMapper Configuration
+
+The base `BlazoriseCrudPage` uses the [object to object mapping](../Object-To-Object-Mapping.md) system to convert an incoming `BookDto` object to a `CreateUpdateBookDto` object. So, we need to define the mapping.
+
+Open the `BookStoreBlazorAutoMapperProfile` inside the `Acme.BookStore.Blazor` project and change the content as the following:
+
+````csharp
+using Acme.BookStore.Books;
+using AutoMapper;
+
+namespace Acme.BookStore.Blazor
+{
+    public class BookStoreBlazorAutoMapperProfile : Profile
+    {
+        public BookStoreBlazorAutoMapperProfile()
+        {
+            CreateMap<BookDto, CreateUpdateBookDto>();
+        }
+    }
+}
+````
+
+* We've just added the `CreateMap<BookDto, CreateUpdateBookDto>();` line to define the mapping.
+
+### Test the Editing Modal
+
+You can now run the application and try to edit a book.
+
+![blazor-edit-book-modal](images/blazor-edit-book-modal.png)
+
+## Deleting a Book
+
+Open the `Books.razor` page and add the following `DropdownItem` under the "Edit" action inside the "Actions" `DropdownMenu`:
+
+````xml
+<DropdownItem Clicked="() => DeleteEntityAsync(context)">
+    @L["Delete"]
+</DropdownItem>
+````
+
+* `DeleteEntityAsync` is defined in the base class.
+
+Run the application and try to delete a book.
+
+## Full CRUD UI Code
+
+Here the complete code to create the book management CRUD page, that has been developed in the last two parts:
+
+````xml
+@page "/books"
+@using Volo.Abp.Application.Dtos
+@using Volo.Abp.BlazoriseUI
+@using Acme.BookStore.Books
+@using Acme.BookStore.Localization
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<BookStoreResource> L
+@inherits BlazoriseCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>
+
+<Card>
+    <CardHeader>
+        <Row>
+            <Column ColumnSize="ColumnSize.Is6">
+                <h2>@L["Books"]</h2>
+            </Column>
+            <Column ColumnSize="ColumnSize.Is6">
+                <Paragraph Alignment="TextAlignment.Right">
+                    <Button Color="Color.Primary"
+                            Clicked="OpenCreateModalAsync">@L["NewBook"]</Button>
+                </Paragraph>
+            </Column>
+        </Row>
+    </CardHeader>
+    <CardBody>
+        <DataGrid TItem="BookDto"
+                  Data="Entities"
+                  ReadData="OnDataGridReadAsync"
+                  TotalItems="TotalCount"
+                  ShowPager="true"
+                  PageSize="PageSize">
+            <DataGridColumns>
+                <DataGridColumn Width="150px" 
+                                TItem="BookDto"
+                                Field="@nameof(BookDto.Id)" 
+                                Sortable="false" 
+                                Caption="@L["Actions"]">
+                    <DisplayTemplate>
+                        <Dropdown>
+                            <DropdownToggle Color="Color.Primary">
+                                @L["Actions"]
+                            </DropdownToggle>
+                            <DropdownMenu>
+                                <DropdownItem Clicked="() => OpenEditModalAsync(context.Id)">
+                                    @L["Edit"]
+                                </DropdownItem>
+                                <DropdownItem Clicked="() => DeleteEntityAsync(context)">
+                                    @L["Delete"]
+                                </DropdownItem>
+                            </DropdownMenu>
+                        </Dropdown>
+                    </DisplayTemplate>
+                </DataGridColumn>
+                <DataGridColumn TItem="BookDto"
+                                Field="@nameof(BookDto.Name)"
+                                Caption="@L["Name"]"></DataGridColumn>
+                <DataGridColumn TItem="BookDto"
+                                Field="@nameof(BookDto.Type)"
+                                Caption="@L["Type"]">
+                    <DisplayTemplate>
+                        @L[$"Enum:BookType:{(int) context.Type}"]
+                    </DisplayTemplate>
+                </DataGridColumn>
+                <DataGridColumn TItem="BookDto"
+                                Field="@nameof(BookDto.PublishDate)"
+                                Caption="@L["PublishDate"]">
+                    <DisplayTemplate>
+                        @context.PublishDate.ToShortDateString()
+                    </DisplayTemplate>
+                </DataGridColumn>
+                <DataGridColumn TItem="BookDto"
+                                Field="@nameof(BookDto.Price)"
+                                Caption="@L["Price"]">
+                </DataGridColumn>
+                <DataGridColumn TItem="BookDto"
+                                Field="@nameof(BookDto.CreationTime)"
+                                Caption="@L["CreationTime"]">
+                    <DisplayTemplate>
+                        @context.CreationTime.ToLongDateString()
+                    </DisplayTemplate>
+                </DataGridColumn>
+            </DataGridColumns>
+        </DataGrid>
+    </CardBody>
+</Card>
+
+<Modal @ref="CreateModal">
+    <ModalBackdrop />
+    <ModalContent IsCentered="true">
+        <ModalHeader>
+            <ModalTitle>@L["NewBook"]</ModalTitle>
+            <CloseButton Clicked="CloseCreateModalAsync" />
+        </ModalHeader>
+        <ModalBody>
+            <Field>
+                <FieldLabel>@L["Name"]</FieldLabel>
+                <TextEdit @bind-text="NewEntity.Name" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["Type"]</FieldLabel>
+                <Select TValue="BookType" @bind-SelectedValue="@NewEntity.Type">
+                    @foreach (int bookTypeValue in Enum.GetValues(typeof(BookType)))
+                    {
+                        <SelectItem TValue="BookType" Value="@((BookType)bookTypeValue)">
+                            @L[$"Enum:BookType:{bookTypeValue}"]
+                        </SelectItem>
+                    }
+                </Select>
+            </Field>
+            <Field>
+                <FieldLabel>@L["PublishDate"]</FieldLabel>
+                <DateEdit TValue="DateTime" @bind-Date="NewEntity.PublishDate" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["Price"]</FieldLabel>
+                <NumericEdit TValue="float" @bind-Value="NewEntity.Price" />
+            </Field>
+        </ModalBody>
+        <ModalFooter>
+            <Button Color="Color.Secondary" 
+                    Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
+            <Button Color="Color.Primary" 
+                    Clicked="CreateEntityAsync">@L["Save"]</Button>
+        </ModalFooter>
+    </ModalContent>
+</Modal>
+
+<Modal @ref="EditModal">
+    <ModalBackdrop />
+    <ModalContent IsCentered="true">
+        <ModalHeader>
+            <ModalTitle>@EditingEntity.Name</ModalTitle>
+            <CloseButton Clicked="CloseEditModalAsync" />
+        </ModalHeader>
+        <ModalBody>
+            <Field>
+                <FieldLabel>@L["Name"]</FieldLabel>
+                <TextEdit @bind-text="EditingEntity.Name" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["Type"]</FieldLabel>
+                <Select TValue="BookType" @bind-SelectedValue="@EditingEntity.Type">
+                    @foreach (int bookTypeValue in Enum.GetValues(typeof(BookType)))
+                    {
+                        <SelectItem TValue="BookType" Value="@((BookType)bookTypeValue)">
+                            @L[$"Enum:BookType:{bookTypeValue}"]
+                        </SelectItem>
+                    }
+                </Select>
+            </Field>
+            <Field>
+                <FieldLabel>@L["PublishDate"]</FieldLabel>
+                <DateEdit TValue="DateTime" @bind-Date="EditingEntity.PublishDate" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["Price"]</FieldLabel>
+                <NumericEdit TValue="float" @bind-Value="EditingEntity.Price" />
+            </Field>
+        </ModalBody>
+        <ModalFooter>
+            <Button Color="Color.Secondary"
+                    Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
+            <Button Color="Color.Primary"
+                    Clicked="UpdateEntityAsync">@L["Save"]</Button>
+        </ModalFooter>
+    </ModalContent>
+</Modal>
+````
+
+{{end}}
+
 ## The Next Part
 
 See the [next part](Part-4.md) of this tutorial.

docs/en/Tutorials/Part-4.md

@@ -2,32 +2,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC","Blazor","NG"],
     "DB": ["EF","Mongo"]
 }
 ````
-{{
-if UI == "MVC"
-  UI_Text="mvc"
-else if UI == "NG"
-  UI_Text="angular"
-else
-  UI_Text="?"
-end
-if DB == "EF"
-  DB_Text="Entity Framework Core"
-else if DB == "Mongo"
-  DB_Text="MongoDB"
-else
-  DB_Text="?"
-end
-}}
-
 ## About This Tutorial
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **{{DB_Text}}** as the ORM provider. 
+* **{{DB_Value}}** as the ORM provider. 
 * **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts;
@@ -45,9 +28,10 @@ This tutorial is organized as the following parts;
 
 ### Download the Source Code
 
-This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared two combinations of the source code to be downloaded:
+This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared a few combinations of the source code to be downloaded:
 
 * [MVC (Razor Pages) UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-EfCore)
+* [Blazor UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore)
 * [Angular UI with MongoDB](https://github.com/abpframework/abp-samples/tree/master/BookStore-Angular-MongoDb)
 
 {{if UI == "MVC" && DB == "EF"}}
@@ -62,7 +46,9 @@ This part is also recorded as a video tutorial and **<a href="https://www.youtub
 
 This part covers the **server side** tests. There are several test projects in the solution:
 
-![bookstore-test-projects-v2](./images/bookstore-test-projects-{{UI_Text}}.png)
+![bookstore-test-projects-v2](./images/bookstore-test-projects-mvc.png)
+
+> Test projects slightly differs based on your UI and Database selection. For example, if you select MongoDB, then the `Acme.BookStore.EntityFrameworkCore.Tests` will be `Acme.BookStore.MongoDB.Tests`.
 
 Each project is used to test the related project. Test projects use the following libraries for testing:
 
@@ -72,11 +58,11 @@ Each project is used to test the related project. Test projects use the followin
 
 {{if DB=="EF"}}
 
-> The test projects are configured to use **SQLite in-memory** as the database. A separate database instance is created and seeded (with the data seed system) to prepare a fresh database for every test.
+> The test projects are configured to use **SQLite in-memory** as the database. A separate database instance is created and seeded (with the [data seed system](../Data-Seeding.md)) to prepare a fresh database for every test.
 
 {{else if DB=="Mongo"}}
 
-> **[Mongo2Go](https://github.com/Mongo2Go/Mongo2Go)** library is used to mock the MongoDB database. A separate database instance is created and seeded (with the data seed system) to prepare a fresh database for every test.
+> **[Mongo2Go](https://github.com/Mongo2Go/Mongo2Go)** library is used to mock the MongoDB database. A separate database instance is created and seeded (with the [data seed system](../Data-Seeding.md)) to prepare a fresh database for every test.
 
 {{end}}
 

docs/en/Tutorials/Part-5.md

@@ -2,32 +2,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC","Blazor","NG"],
     "DB": ["EF","Mongo"]
 }
 ````
-{{
-if UI == "MVC"
-  UI_Text="mvc"
-else if UI == "NG"
-  UI_Text="angular"
-else
-  UI_Text="?"
-end
-if DB == "EF"
-  DB_Text="Entity Framework Core"
-else if DB == "Mongo"
-  DB_Text="MongoDB"
-else
-  DB_Text="?"
-end
-}}
-
 ## About This Tutorial
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **{{DB_Text}}** as the ORM provider. 
+* **{{DB_Value}}** as the ORM provider. 
 * **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts;
@@ -45,9 +28,10 @@ This tutorial is organized as the following parts;
 
 ### Download the Source Code
 
-This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared two combinations of the source code to be downloaded:
+This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared a few combinations of the source code to be downloaded:
 
 * [MVC (Razor Pages) UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-EfCore)
+* [Blazor UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore)
 * [Angular UI with MongoDB](https://github.com/abpframework/abp-samples/tree/master/BookStore-Angular-MongoDb)
 
 {{if UI == "MVC" && DB == "EF"}}
@@ -145,6 +129,8 @@ Go to the *Administration -> Identity -> Roles* page, select *Permissions* actio
 
 Grant the permissions you want and save the modal.
 
+> **Tip**: New permissions are automatically granted to the admin role if you run the `Acme.BookStore.DbMigrator` application.
+
 ## Authorization
 
 Now, you can use the permissions to authorize the book management.
@@ -186,6 +172,8 @@ namespace Acme.BookStore.Books
 
 Added code to the constructor. Base `CrudAppService` automatically uses these permissions on the CRUD operations. This makes the **application service** secure, but also makes the **HTTP API** secure since this service is automatically used as an HTTP API as explained before (see [auto API controllers](../API/Auto-API-Controllers.md)).
 
+> You will see the declarative authorization, using the `[Authorize(...)]` attribute, later while developing the author management functionality.
+
 {{if UI == "MVC"}}
 
 ### Razor Page
@@ -327,6 +315,64 @@ if (await context.IsGrantedAsync(BookStorePermissions.Books.Default))
 }
 ````
 
+You also need to add `async` keyword to the `ConfigureMenuAsync` method and re-arrange the return values. The final `BookStoreMenuContributor` class should be the following:
+
+````csharp
+using System.Threading.Tasks;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Localization;
+using Acme.BookStore.Localization;
+using Acme.BookStore.MultiTenancy;
+using Acme.BookStore.Permissions;
+using Volo.Abp.TenantManagement.Web.Navigation;
+using Volo.Abp.UI.Navigation;
+
+namespace Acme.BookStore.Web.Menus
+{
+    public class BookStoreMenuContributor : IMenuContributor
+    {
+        public async Task ConfigureMenuAsync(MenuConfigurationContext context)
+        {
+            if (context.Menu.Name == StandardMenus.Main)
+            {
+                await ConfigureMainMenuAsync(context);
+            }
+        }
+
+        private async Task ConfigureMainMenuAsync(MenuConfigurationContext context)
+        {
+            if (!MultiTenancyConsts.IsEnabled)
+            {
+                var administration = context.Menu.GetAdministration();
+                administration.TryRemoveMenuItem(TenantManagementMenuNames.GroupName);
+            }
+
+            var l = context.GetLocalizer<BookStoreResource>();
+
+            context.Menu.Items.Insert(0, new ApplicationMenuItem("BookStore.Home", l["Menu:Home"], "~/"));
+
+            var bookStoreMenu = new ApplicationMenuItem(
+                "BooksStore",
+                l["Menu:BookStore"],
+                icon: "fa fa-book"
+            );
+
+            context.Menu.AddItem(bookStoreMenu);
+
+            //CHECK the PERMISSION
+            if (await context.IsGrantedAsync(BookStorePermissions.Books.Default))
+            {
+                bookStoreMenu.AddItem(new ApplicationMenuItem(
+                    "BooksStore.Books",
+                    l["Menu:Books"],
+                    url: "/Books"
+                ));
+            }
+        }
+    }
+}
+````
+
 {{else if UI == "NG"}}
 
 ### Angular Guard Configuration
@@ -410,6 +456,195 @@ Open the `/src/app/book/book.component.html` file and replace the edit and delet
 * Added `abpPermission="BookStore.Books.Edit"` that hides the edit action if the current user has no editing permission.
 * Added `abpPermission="BookStore.Books.Delete"` that hides the delete action if the current user has no delete permission.
 
+{{else if UI == "Blazor"}}
+
+### Authorize the Razor Component
+
+Open the `/Pages/Books.razor` file in the `Acme.BookStore.Blazor` project and add an `Authorize` attribute just after the `@page` directive, as shown below:
+
+````html
+@page "/books"
+@attribute [Authorize(BookStorePermissions.Books.Default)]
+@using Acme.BookStore.Permissions
+@using Microsoft.AspNetCore.Authorization
+...
+````
+
+Adding this attribute prevents to enter this page if the current hasn't logged in or hasn't granted for the given permission. In case of attempt, the user is redirected to the login page.
+
+### Show/Hide the Actions
+
+The book management page has a *New Book* button and *Edit* and *Delete* actions for each book. We should hide these buttons/actions if the current user has not granted for the related permissions.
+
+#### Inject the IAuthorizationService
+
+Inject the `IAuthorizationService` into the `Books.razor`:
+
+````csharp
+@inject IAuthorizationService AuthorizationService
+````
+
+#### Get the Permissions On Initialization
+
+Add the following code block to the end of the `Books.razor` file:
+
+````csharp
+@code
+{
+    bool canCreateBook;
+    bool canEditBook;
+    bool canDeleteBook;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        canCreateBook =await AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Create);
+        canEditBook = await AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Edit);
+        canDeleteBook = await AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Delete);
+    }
+}
+````
+
+We will use these `bool` fields to check the permissions.
+
+> **Blazor Tip**: While adding the C# code into a `@code` block is fine for small code parts, it is suggested to use the code behind approach to develop a more maintainable code base when the code block becomes longer. We will use this approach for the authors part.
+
+#### Hide the New Book Button
+
+Wrap the *New Book* button by an `if` block as shown below:
+
+````xml
+@if (canCreateBook)
+{
+    <Button Color="Color.Primary"
+            Clicked="OpenCreateModalAsync">@L["NewBook"]</Button>
+}
+````
+
+#### Hide the Edit/Delete Actions
+
+As similar to the *New Book* button, we can use `if` blocks to conditionally show/hide the *Edit* and *Delete* actions:
+
+````xml
+@if (canEditBook)
+{
+    <DropdownItem Clicked="() => OpenEditModalAsync(context.Id)">
+        @L["Edit"]
+    </DropdownItem>
+}
+@if (canDeleteBook)
+{
+    <DropdownItem Clicked="() => DeleteEntityAsync(context)">
+        @L["Delete"]
+    </DropdownItem>
+}
+````
+
+#### About the Permission Caching
+
+You can run and test the permissions. Remove a book related permission from the admin role to see the related button/action disappears from the UI.
+
+However, ABP Framework caches the permissions of the current user in the client side. So, when you change a permission for yourself, you need to manually **refresh the page** to take the effect. If you don't refresh and try to use the prohibited action you get an HTTP 403 (forbidden) response from the server.
+
+> Changing a permission for a role or user immediately available on the server side. So, this cache system doesn't cause any security problem.
+
+### Menu Item
+
+Even we have secured all the layers of the book management page, it is still visible on the main menu of the application. We should hide the menu item if the current user has no permission.
+
+Open the `BookStoreMenuContributor` class in the `Acme.BookStore.Blazor` project, find the code block below:
+
+````csharp
+context.Menu.AddItem(
+    new ApplicationMenuItem(
+        "BooksStore",
+        l["Menu:BookStore"],
+        icon: "fa fa-book"
+    ).AddItem(
+        new ApplicationMenuItem(
+            "BooksStore.Books",
+            l["Menu:Books"],
+            url: "/books"
+        )
+    )
+);
+````
+
+And replace this code block with the following:
+
+````csharp
+var bookStoreMenu = new ApplicationMenuItem(
+    "BooksStore",
+    l["Menu:BookStore"],
+    icon: "fa fa-book"
+);
+
+context.Menu.AddItem(bookStoreMenu);
+
+//CHECK the PERMISSION
+if (await context.IsGrantedAsync(BookStorePermissions.Books.Default))
+{
+    bookStoreMenu.AddItem(new ApplicationMenuItem(
+        "BooksStore.Books",
+        l["Menu:Books"],
+        url: "/books"
+    ));
+}
+````
+
+You also need to add `async` keyword to the `ConfigureMenuAsync` method and re-arrange the return values. The final `BookStoreMenuContributor` class should be the following:
+
+````csharp
+using System.Threading.Tasks;
+using Acme.BookStore.Localization;
+using Acme.BookStore.Permissions;
+using Volo.Abp.UI.Navigation;
+
+namespace Acme.BookStore.Blazor
+{
+    public class BookStoreMenuContributor : IMenuContributor
+    {
+        public async Task ConfigureMenuAsync(MenuConfigurationContext context)
+        {
+            if(context.Menu.DisplayName != StandardMenus.Main)
+            {
+                return;
+            }
+
+            var l = context.GetLocalizer<BookStoreResource>();
+
+            context.Menu.Items.Insert(
+                0,
+                new ApplicationMenuItem(
+                    "BookStore.Home",
+                    l["Menu:Home"],
+                    "/",
+                    icon: "fas fa-home"
+                )
+            );
+
+            var bookStoreMenu = new ApplicationMenuItem(
+                "BooksStore",
+                l["Menu:BookStore"],
+                icon: "fa fa-book"
+            );
+
+            context.Menu.AddItem(bookStoreMenu);
+
+            if (await context.IsGrantedAsync(BookStorePermissions.Books.Default))
+            {
+                bookStoreMenu.AddItem(new ApplicationMenuItem(
+                    "BooksStore.Books",
+                    l["Menu:Books"],
+                    url: "/books"
+                ));
+            }
+        }
+    }
+}
+````
+
 {{end}}
 
 ## The Next Part

docs/en/Tutorials/Part-6.md

@@ -2,32 +2,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC","Blazor","NG"],
     "DB": ["EF","Mongo"]
 }
 ````
-{{
-if UI == "MVC"
-  UI_Text="mvc"
-else if UI == "NG"
-  UI_Text="angular"
-else
-  UI_Text="?"
-end
-if DB == "EF"
-  DB_Text="Entity Framework Core"
-else if DB == "Mongo"
-  DB_Text="MongoDB"
-else
-  DB_Text="?"
-end
-}}
-
 ## About This Tutorial
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **{{DB_Text}}** as the ORM provider. 
+* **{{DB_Value}}** as the ORM provider. 
 * **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts;
@@ -45,9 +28,10 @@ This tutorial is organized as the following parts;
 
 ### Download the Source Code
 
-This tutorials has multiple versions based on your **UI** and **Database** preferences. We've prepared two combinations of the source code to be downloaded:
+This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared a few combinations of the source code to be downloaded:
 
 * [MVC (Razor Pages) UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-EfCore)
+* [Blazor UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore)
 * [Angular UI with MongoDB](https://github.com/abpframework/abp-samples/tree/master/BookStore-Angular-MongoDb)
 
 ## Introduction
@@ -242,16 +226,7 @@ This is a unique string represents the error code thrown by your application and
 "BookStore:00001": "There is already an author with the same name: {name}"
 ````
 
-Then open the `BookStoreDomainSharedModule` and add the following code block inside the `ConfigureServices` method:
-
-````csharp
-Configure<AbpExceptionLocalizationOptions>(options =>
-{
-    options.MapCodeNamespace("BookStore", typeof(BookStoreResource));
-});
-````
-
-Whenever you throw an `AuthorAlreadyExistsException`, the end use will see a nice error message on the UI.
+Whenever you throw an `AuthorAlreadyExistsException`, the end use will see a this message on the UI.
 
 ## IAuthorRepository
 

docs/en/Tutorials/Part-7.md

@@ -2,32 +2,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC","Blazor","NG"],
     "DB": ["EF","Mongo"]
 }
 ````
-{{
-if UI == "MVC"
-  UI_Text="mvc"
-else if UI == "NG"
-  UI_Text="angular"
-else
-  UI_Text="?"
-end
-if DB == "EF"
-  DB_Text="Entity Framework Core"
-else if DB == "Mongo"
-  DB_Text="MongoDB"
-else
-  DB_Text="?"
-end
-}}
-
 ## About This Tutorial
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **{{DB_Text}}** as the ORM provider. 
+* **{{DB_Value}}** as the ORM provider. 
 * **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts;
@@ -45,9 +28,10 @@ This tutorial is organized as the following parts;
 
 ### Download the Source Code
 
-This tutorials has multiple versions based on your **UI** and **Database** preferences. We've prepared two combinations of the source code to be downloaded:
+This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared a few combinations of the source code to be downloaded:
 
 * [MVC (Razor Pages) UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-EfCore)
+* [Blazor UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore)
 * [Angular UI with MongoDB](https://github.com/abpframework/abp-samples/tree/master/BookStore-Angular-MongoDb)
 
 ## Introduction
@@ -86,7 +70,7 @@ This is just like done for the `Book` entity before, so no need to explain again
 
 ## Create a new Database Migration
 
-Open the **Package Manager Console** on Visual Studio and ensure that the **Default project** is `Acme.BookStore.EntityFrameworkCore.DbMigrations` in the Package Manager Console, as shown on the picture below. Also, set the `Acme.BookStore.Web` as the startup project (right click it on the solution explorer and click to "Set as Startup Project").
+Open the **Package Manager Console** on Visual Studio and ensure that the **Default project** is `Acme.BookStore.EntityFrameworkCore.DbMigrations` in the Package Manager Console, as shown on the picture below. Also, set the `Acme.BookStore.Web` (or `Acme.BookStore.HttpApi.Host`, depending on your solution) as the **startup project** (right click it on the solution explorer and click to "Set as Startup Project").
 
 Run the following command to create a new database migration:
 

docs/en/Tutorials/Part-8.md

@@ -2,32 +2,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC","Blazor","NG"],
     "DB": ["EF","Mongo"]
 }
 ````
-{{
-if UI == "MVC"
-  UI_Text="mvc"
-else if UI == "NG"
-  UI_Text="angular"
-else
-  UI_Text="?"
-end
-if DB == "EF"
-  DB_Text="Entity Framework Core"
-else if DB == "Mongo"
-  DB_Text="MongoDB"
-else
-  DB_Text="?"
-end
-}}
-
 ## About This Tutorial
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **{{DB_Text}}** as the ORM provider. 
+* **{{DB_Value}}** as the ORM provider. 
 * **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts;
@@ -45,9 +28,10 @@ This tutorial is organized as the following parts;
 
 ### Download the Source Code
 
-This tutorials has multiple versions based on your **UI** and **Database** preferences. We've prepared two combinations of the source code to be downloaded:
+This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared a few combinations of the source code to be downloaded:
 
 * [MVC (Razor Pages) UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-EfCore)
+* [Blazor UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore)
 * [Angular UI with MongoDB](https://github.com/abpframework/abp-samples/tree/master/BookStore-Angular-MongoDb)
 
 ## Introduction
@@ -318,7 +302,7 @@ public async Task UpdateAsync(Guid id, UpdateAuthorDto input)
 
 {{if DB == "EF"}}
 
-> **EF Core tip**: Entity Framework Core has a **change tracking** system and **automatically saves** any change to an entity at the end of the unit of work (You can simply think that the ABP Framework automatically calls `SaveChanges` at the end of the method). So, it will work as expected even if you don't call the `_authorRepository.UpdateAsync(...)` in the end of the method. If you don't consider to change the EF Core later, you can just remove this line.
+> **EF Core Tip**: Entity Framework Core has a **change tracking** system and **automatically saves** any change to an entity at the end of the unit of work (You can simply think that the ABP Framework automatically calls `SaveChanges` at the end of the method). So, it will work as expected even if you don't call the `_authorRepository.UpdateAsync(...)` in the end of the method. If you don't consider to change the EF Core later, you can just remove this line.
 
 {{end}}
 

docs/en/Tutorials/Part-9.md

@@ -2,32 +2,15 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC","NG"],
+    "UI": ["MVC","Blazor","NG"],
     "DB": ["EF","Mongo"]
 }
 ````
-{{
-if UI == "MVC"
-  UI_Text="mvc"
-else if UI == "NG"
-  UI_Text="angular"
-else
-  UI_Text="?"
-end
-if DB == "EF"
-  DB_Text="Entity Framework Core"
-else if DB == "Mongo"
-  DB_Text="MongoDB"
-else
-  DB_Text="?"
-end
-}}
-
 ## About This Tutorial
 
 In this tutorial series, you will build an ABP based web application named `Acme.BookStore`. This application is used to manage a list of books and their authors. It is developed using the following technologies:
 
-* **{{DB_Text}}** as the ORM provider. 
+* **{{DB_Value}}** as the ORM provider. 
 * **{{UI_Value}}** as the UI Framework.
 
 This tutorial is organized as the following parts;
@@ -45,18 +28,19 @@ This tutorial is organized as the following parts;
 
 ### Download the Source Code
 
-This tutorials has multiple versions based on your **UI** and **Database** preferences. We've prepared two combinations of the source code to be downloaded:
+This tutorial has multiple versions based on your **UI** and **Database** preferences. We've prepared a few combinations of the source code to be downloaded:
 
 * [MVC (Razor Pages) UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-EfCore)
+* [Blazor UI with EF Core](https://github.com/abpframework/abp-samples/tree/master/BookStore-Blazor-EfCore)
 * [Angular UI with MongoDB](https://github.com/abpframework/abp-samples/tree/master/BookStore-Angular-MongoDb)
 
 ## Introduction
 
-This part explains how to create a CRUD page for the `Author` entity introduced in previous parts.
+This part explains how to create a CRUD page for the `Author` entity introduced in the previous parts.
 
 {{if UI == "MVC"}}
 
-## The Book List Page
+## The Authors List Page
 
 Create a new razor page, `Index.cshtml` under the `Pages/Authors` folder of the `Acme.BookStore.Web` project and change the content as given below.
 
@@ -509,7 +493,7 @@ That's all! You can run the application and try to edit an author.
 
 {{else if UI == "NG"}}
 
-## The Author List Page, Create & Delete Authors
+## The Author Management Page
 
 Run the following command line to create a new module, named `AuthorModule` in the root folder of the angular application:
 
@@ -848,6 +832,353 @@ That's all! This is a fully working CRUD page, you can create, edit and delete a
 
 {{end}}
 
+{{if UI == "Blazor"}}
+
+## The Author Management Page
+
+### Authors Razor Component
+
+Create a new Razor Component Page, `/Pages/Authors.razor`, in the `Acme.BookStore.Blazor` project with the following content:
+
+````xml
+@page "/authors"
+@using Acme.BookStore.Authors
+@using Acme.BookStore.Localization
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.Extensions.Localization
+@using Volo.Abp.ObjectMapping
+@inject IAuthorAppService AuthorAppService
+@inject IStringLocalizer<BookStoreResource> L
+@inject IAuthorizationService AuthorizationService
+@inject IUiMessageService UiMessageService
+@inject IObjectMapper ObjectMapper
+<Card>
+    <CardHeader>
+        <Row>
+            <Column ColumnSize="ColumnSize.Is6">
+                <h2>@L["Authors"]</h2>
+            </Column>
+            <Column ColumnSize="ColumnSize.Is6">
+                <Paragraph Alignment="TextAlignment.Right">
+                    @if (CanCreateAuthor)
+                    {
+                        <Button Color="Color.Primary"
+                                Clicked="OpenCreateAuthorModal">
+                            @L["NewAuthor"]
+                        </Button>
+                    }
+                </Paragraph>
+            </Column>
+        </Row>
+    </CardHeader>
+    <CardBody>
+        <DataGrid TItem="AuthorDto"
+                  Data="AuthorList"
+                  ReadData="OnDataGridReadAsync"
+                  TotalItems="TotalCount"
+                  ShowPager="true"
+                  PageSize="PageSize">
+            <DataGridColumns>
+                <DataGridColumn Width="150px"
+                                TItem="AuthorDto"
+                                Field="@nameof(AuthorDto.Id)"
+                                Sortable="false"
+                                Caption="@L["Actions"]">
+                    <DisplayTemplate>
+                        <Dropdown>
+                            <DropdownToggle Color="Color.Primary">
+                                @L["Actions"]
+                            </DropdownToggle>
+                            <DropdownMenu>
+                                @if (CanEditAuthor)
+                                {
+                                    <DropdownItem Clicked="() => OpenEditAuthorModal(context)">
+                                        @L["Edit"]
+                                    </DropdownItem>
+                                }
+                                @if (CanDeleteAuthor)
+                                {
+                                    <DropdownItem Clicked="() => DeleteAuthorAsync(context)">
+                                        @L["Delete"]
+                                    </DropdownItem>
+                                }
+                            </DropdownMenu>
+                        </Dropdown>
+                    </DisplayTemplate>
+                </DataGridColumn>
+                <DataGridColumn TItem="AuthorDto"
+                                Field="@nameof(AuthorDto.Name)"
+                                Caption="@L["Name"]"></DataGridColumn>
+                <DataGridColumn TItem="AuthorDto"
+                                Field="@nameof(AuthorDto.BirthDate)"
+                                Caption="@L["BirthDate"]">
+                    <DisplayTemplate>
+                        @context.BirthDate.ToShortDateString()
+                    </DisplayTemplate>
+                </DataGridColumn>
+            </DataGridColumns>
+        </DataGrid>
+    </CardBody>
+</Card>
+
+<Modal @ref="CreateAuthorModal">
+    <ModalBackdrop />
+    <ModalContent IsCentered="true">
+        <ModalHeader>
+            <ModalTitle>@L["NewAuthor"]</ModalTitle>
+            <CloseButton Clicked="CloseCreateAuthorModal" />
+        </ModalHeader>
+        <ModalBody>
+            <Field>
+                <FieldLabel>@L["Name"]</FieldLabel>
+                <TextEdit @bind-text="@NewAuthor.Name" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["BirthDate"]</FieldLabel>
+                <DateEdit TValue="DateTime" @bind-Date="@NewAuthor.BirthDate" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["ShortBio"]</FieldLabel>
+                <MemoEdit Rows="5" @bind-text="@NewAuthor.ShortBio" />
+            </Field>
+        </ModalBody>
+        <ModalFooter>
+            <Button Color="Color.Secondary"
+                    Clicked="CloseCreateAuthorModal">
+                @L["Cancel"]
+            </Button>
+            <Button Color="Color.Primary"
+                    Clicked="CreateAuthorAsync">
+                @L["Save"]
+            </Button>
+        </ModalFooter>
+    </ModalContent>
+</Modal>
+
+<Modal @ref="EditAuthorModal">
+    <ModalBackdrop />
+    <ModalContent IsCentered="true">
+        <ModalHeader>
+            <ModalTitle>@EditingAuthor.Name</ModalTitle>
+            <CloseButton Clicked="CloseEditAuthorModal" />
+        </ModalHeader>
+        <ModalBody>
+            <Field>
+                <FieldLabel>@L["Name"]</FieldLabel>
+                <TextEdit @bind-text="@EditingAuthor.Name" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["BirthDate"]</FieldLabel>
+                <DateEdit TValue="DateTime" @bind-Date="@EditingAuthor.BirthDate" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["ShortBio"]</FieldLabel>
+                <MemoEdit Rows="5" @bind-text="@EditingAuthor.ShortBio" />
+            </Field>
+        </ModalBody>
+        <ModalFooter>
+            <Button Color="Color.Secondary"
+                    Clicked="CloseEditAuthorModal">
+                @L["Cancel"]
+            </Button>
+            <Button Color="Color.Primary"
+                    Clicked="UpdateAuthorAsync">
+                @L["Save"]
+            </Button>
+        </ModalFooter>
+    </ModalContent>
+</Modal>
+````
+
+* This code is similar to the `Books.razor`, except it doesn't inherit from the `BlazorisePageBase`, but uses its own implementation.
+* Injects the `IAuthorAppService` to consume the server side HTTP APIs from the UI. We can directly inject application service interfaces and use just like regular method calls by the help of [Dynamic C# HTTP API Client Proxy System](../API/Dynamic-CSharp-API-Clients.md), which performs REST API calls for us. See the `Authors` class below to see the usage.
+* Injects the `IAuthorizationService` to check [permissions](../Authorization.md).
+* Injects the `IObjectMapper` for [object to object mapping](../Object-To-Object-Mapping.md).
+
+Create a new code behind file, `Authors.razor.cs`, under the `Pages` folder, with the following content:
+
+````csharp
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Acme.BookStore.Authors;
+using Acme.BookStore.Permissions;
+using Blazorise;
+using Blazorise.DataGrid;
+using Microsoft.AspNetCore.Authorization;
+using Volo.Abp.Application.Dtos;
+
+namespace Acme.BookStore.Blazor.Pages
+{
+    public partial class Authors
+    {
+        private IReadOnlyList<AuthorDto> AuthorList { get; set; }
+
+        private int PageSize { get; } = LimitedResultRequestDto.DefaultMaxResultCount;
+        private int CurrentPage { get; set; }
+        private string CurrentSorting { get; set; }
+        private int TotalCount { get; set; }
+
+        private bool CanCreateAuthor { get; set; }
+        private bool CanEditAuthor { get; set; }
+        private bool CanDeleteAuthor { get; set; }
+
+        private CreateAuthorDto NewAuthor { get; set; }
+
+        private Guid EditingAuthorId { get; set; }
+        private UpdateAuthorDto EditingAuthor { get; set; }
+
+        private Modal CreateAuthorModal { get; set; }
+        private Modal EditAuthorModal { get; set; }
+
+        public Authors()
+        {
+            NewAuthor = new CreateAuthorDto();
+            EditingAuthor = new UpdateAuthorDto();
+        }
+
+        protected override async Task OnInitializedAsync()
+        {
+            await SetPermissionsAsync();
+            await GetAuthorsAsync();
+        }
+
+        private async Task SetPermissionsAsync()
+        {
+            CanCreateAuthor = await AuthorizationService
+                .IsGrantedAsync(BookStorePermissions.Authors.Create);
+            
+            CanEditAuthor = await AuthorizationService
+                .IsGrantedAsync(BookStorePermissions.Authors.Edit);
+            
+            CanDeleteAuthor = await AuthorizationService
+                .IsGrantedAsync(BookStorePermissions.Authors.Delete);
+        }
+
+        private async Task GetAuthorsAsync()
+        {
+            var result = await AuthorAppService.GetListAsync(
+                new GetAuthorListDto
+                {
+                    MaxResultCount = PageSize,
+                    SkipCount = CurrentPage * PageSize,
+                    Sorting = CurrentSorting
+                }
+            );
+
+            AuthorList = result.Items;
+            TotalCount = (int)result.TotalCount;
+        }
+
+        private async Task OnDataGridReadAsync(DataGridReadDataEventArgs<AuthorDto> e)
+        {
+            CurrentSorting = e.Columns
+                .Where(c => c.Direction != SortDirection.None)
+                .Select(c => c.Field + (c.Direction == SortDirection.Descending ? " DESC" : ""))
+                .JoinAsString(",");
+            CurrentPage = e.Page - 1;
+
+            await GetAuthorsAsync();
+
+            StateHasChanged();
+        }
+
+        private void OpenCreateAuthorModal()
+        {
+            NewAuthor = new CreateAuthorDto();
+            CreateAuthorModal.Show();
+        }
+
+        private void CloseCreateAuthorModal()
+        {
+            CreateAuthorModal.Hide();
+        }
+
+        private void OpenEditAuthorModal(AuthorDto author)
+        {
+            EditingAuthorId = author.Id;
+            EditingAuthor = ObjectMapper.Map<AuthorDto, UpdateAuthorDto>(author);
+            EditAuthorModal.Show();
+        }
+
+        private async Task DeleteAuthorAsync(AuthorDto author)
+        {
+            var confirmMessage = L["AuthorDeletionConfirmationMessage", author.Name];
+            if (!await UiMessageService.ConfirmAsync(confirmMessage))
+            {
+                return;
+            }
+
+            await AuthorAppService.DeleteAsync(author.Id);
+            await GetAuthorsAsync();
+        }
+
+        private void CloseEditAuthorModal()
+        {
+            EditAuthorModal.Hide();
+        }
+
+        private async Task CreateAuthorAsync()
+        {
+            await AuthorAppService.CreateAsync(NewAuthor);
+            await GetAuthorsAsync();
+            CreateAuthorModal.Hide();
+        }
+
+        private async Task UpdateAuthorAsync()
+        {
+            await AuthorAppService.UpdateAsync(EditingAuthorId, EditingAuthor);
+            await GetAuthorsAsync();
+            EditAuthorModal.Hide();
+        }
+    }
+}
+````
+
+This class typically defines the properties and methods used by the `Authors.razor` page.
+
+### Object Mapping
+
+`Authors` class uses the `IObjectMapper` in the `OpenEditAuthorModal` method. So, we need to define this mapping.
+
+Open the `BookStoreBlazorAutoMapperProfile.cs` in the `Acme.BookStore.Blazor` project and add the following mapping code in the constructor:
+
+````csharp
+CreateMap<AuthorDto, UpdateAuthorDto>();
+````
+
+You will need to declare a `using Acme.BookStore.Authors;` statement to the beginning of the file.
+
+### Add to the Main Menu
+
+Open the `BookStoreMenuContributor.cs` in the `Acme.BookStore.Blazor` project and add the following code to the end of the `ConfigureMainMenuAsync` method:
+
+````csharp
+if (await context.IsGrantedAsync(BookStorePermissions.Authors.Default))
+{
+    bookStoreMenu.AddItem(new ApplicationMenuItem(
+        "BooksStore.Authors",
+        l["Menu:Authors"],
+        url: "/authors"
+    ));
+}
+````
+
+### Localizations
+
+We should complete the localizations we've used above. Open the `en.json` file under the `Localization/BookStore` folder of the `Acme.BookStore.Domain.Shared` project and add the following entries:
+
+````json
+"Menu:Authors": "Authors",
+"Authors": "Authors",
+"AuthorDeletionConfirmationMessage": "Are you sure to delete the author '{0}'?",
+"BirthDate": "Birth date",
+"NewAuthor": "New author"
+````
+
+{{end}}
+
 ## The Next Part
 
 See the [next part](Part-10.md) of this tutorial.

docs/en/UI/Angular/Component-Replacement.md

@@ -145,9 +145,7 @@ The final UI looks like below:
 Run the following command in `angular` folder to create a new component called `RoutesComponent`.
 
 ```bash
-yarn ng generate component routes --entryComponent
-
-# You don't need the --entryComponent option in Angular 9
+yarn ng generate component routes
 ```
 
 Open the generated `routes.component.ts` in `src/app/routes` folder and replace its content with the following:
@@ -187,6 +185,21 @@ export class RoutesComponent implements AfterViewInit {
 }
 ```
 
+Import the `SharedModule` to the `imports` array of `AppModule`:
+
+```js
+// app.module.ts
+
+import { SharedModule } from './shared/shared.module';
+
+@NgModule({
+  imports: [
+    //...
+    SharedModule
+  ]
+)}
+```
+
 Open the generated `routes.component.html` in `src/app/routes` folder and replace its content with the following:
 
 ```html
@@ -327,9 +340,7 @@ The final UI looks like below:
 Run the following command in `angular` folder to create a new component called `NavItemsComponent`.
 
 ```bash
-yarn ng generate component nav-items --entryComponent
-
-# You don't need the --entryComponent option in Angular 9
+yarn ng generate component nav-items
 ```
 
 Open the generated `nav-items.component.ts` in `src/app/nav-items` folder and replace the content with the following:
@@ -414,6 +425,21 @@ export class NavItemsComponent implements AfterViewInit {
 }
 ```
 
+Import the `SharedModule` to the `imports` array of `AppModule`:
+
+```js
+// app.module.ts
+
+import { SharedModule } from './shared/shared.module';
+
+@NgModule({
+  imports: [
+    //...
+    SharedModule
+  ]
+)}
+```
+
 Open the generated `nav-items.component.html` in `src/app/nav-items` folder and replace the content with the following:
 
 ```html

docs/en/UI/Angular/Config-State.md

@@ -233,4 +233,4 @@ Please refer to `Config.Environment` type for all the properties you can pass to
 
 ## What's Next?
 
-- [Modifying the Menu](./Modifying-the-Menu.md)
+- [HTTP Requests](./Http-Requests)

docs/en/UI/Angular/Content-Projection-Service.md

@@ -1,4 +1,4 @@
-# Content Projection
+# Projecting Angular Content
 
 You can use the `ContentProjectionService` in @abp/ng.core package in order to project content in an easy and explicit way.
 
@@ -75,4 +75,4 @@ projectContent<T extends Type<any> | TemplateRef<any>>(
 
 ## What's Next?
 
-- [TrackByService](./Track-By-Service.md)
+- [Confirmation Popup](./Confirmation-Service.md)

docs/en/UI/Angular/Custom-Setting-Page.md

@@ -35,7 +35,3 @@ export class AppComponent {
 Navigate to `/setting-management` route to see the changes:
 
 ![Custom Settings Tab](./images/custom-settings.png)
-
-## What's Next?
-
-- [Lazy Loading Scripts & Styles](./Lazy-Load-Service.md)

docs/en/UI/Angular/Dom-Insertion-Service.md

@@ -1,4 +1,4 @@
-# Dom Insertion (of Scripts and Styles)
+# Inserting Scripts & Styles to DOM
 
 You can use the `DomInsertionService` in @abp/ng.core package in order to insert scripts and styles in an easy and explicit way.
 
@@ -137,4 +137,4 @@ The `has` method returns a boolean value that indicates the given content has al
 
 ## What's Next?
 
-- [ContentProjectionService](./Content-Projection-Service.md)
+- [Lazy Loading Scripts & Styles](./Lazy-Load-Service.md)

docs/en/UI/Angular/Environment.md

@@ -4,7 +4,7 @@ Every application needs some **environment** variables. In Angular world, this i
 
 Current `Environment` configuration holds sub config classes as follows:
 
-```typescript
+```js
 export interface Environment {
   apis: Apis;
   application: Application;
@@ -16,7 +16,7 @@ export interface Environment {
 
 ## Apis
 
-```typescript
+```js
 export interface Apis {
   [key: string]: ApiConfig;
   default: ApiConfig;
@@ -54,9 +54,9 @@ Everything else will be sent to `"https://localhost:8080"`
 
 * `rootNamespace` **(new)** : Root namespace of the related API. e.g. Acme.BookStore
 
-## Application
+## Application
 
-```typescript
+```js
  export interface Application {
   name: string;
   baseUrl?: string;
@@ -69,7 +69,7 @@ Everything else will be sent to `"https://localhost:8080"`
 * `baseUrl`: [For detailed information](./Multi-Tenancy.md#domain-tenant-resolver)
 
 
-## AuthConfig
+## AuthConfig
 
 For authentication, we use angular-oauth2-oidc. Please check their [docs](https://github.com/manfredsteyer/angular-oauth2-oidc) out
 
@@ -80,7 +80,7 @@ Abp Framework supports this out of box.
 
 To integrate an existing config json into the `environment`, you need to set `remoteEnv`
 
-```typescript
+```js
 export type customMergeFn = (
   localEnv: Partial<Config.Environment>,
   remoteEnv: any,
@@ -105,5 +105,4 @@ export interface RemoteEnv {
 
 ## What's Next?
 
-* [Service Proxies](./Service-Proxies.md)
-
+- [About Feature Libraries](./Feature-Libraries.md)

docs/en/UI/Angular/Feature-Libraries.md

@@ -0,0 +1,98 @@
+# About Feature Libraries
+
+ABP has an ever-growing number of feature modules and [introducing a new one](../../Module-Development-Basics.md) is always possible. When the UI is Angular, these features have modular Angular libraries accompanying them.
+
+## Feature Library Content
+
+Each library has at least two modules:
+
+1. The main module contains all components, services, types, enums, etc. to deliver the required UI when the feature is loaded. From here on, we will refer to these modules as **"feature module"**.
+2. There is also a **"config module"** per library which helps us configure applications to run these modules or make them accessible.
+
+## How to Add a Feature Library to Your Project
+
+<!-- TODO: Insert info on CLI `add-module` command here when the schematic is ready. -->
+
+The manual setup of a feature library has three steps:
+
+### 1. Install the Library
+
+Feature libraries are usually published as an npm package. If a library you want to use does not exist in your project, you may install it via the following command:
+
+```shell
+yarn add @my-company-name/my-project-name
+```
+
+...or...
+
+```shell
+npm install @my-company-name/my-project-name
+```
+
+The `my-company-name` and `my-project-name` parts are going to change according to the package you want to use. For example, if we want to install the ABP Identity module, the package installation will be as seen below:
+
+```shell
+yarn add @abp/ng.identity
+```
+
+> Identity is used just as an example. If you have initiated your project with ABP CLI or ABP Suite, the identity library will already be installed and configured in your project.
+
+### 2. Import the Config Module
+
+As of ABP v3.0, every lazy-loaded module has a config module available via a secondary entry point on the same package. Importing them in your root module looks like this:
+
+```js
+import { IdentityConfigModule } from "@abp/ng.identity/config";
+
+@NgModule({
+  imports: [
+    // other imports
+    IdentityConfigModule.forRoot(),
+  ],
+  // providers, declarations, and bootstrap
+})
+export class AppModule {}
+```
+
+We need the config modules for actions required before feature modules are loaded (lazily). For example, the above import configures the menu to display links to identity pages.
+
+Furthermore, depending on the library, the `.forRoot` static method may receive some options that configure how the feature works.
+
+### 3. Import the Feature Module
+
+Finally, the feature module should be [loaded lazily via Angular router](https://angular.io/guide/lazy-loading-ngmodules). If you open the `/src/app/app-routing.module.ts` file, you should see `IdentityModule` is loaded exactly as follows:
+
+```js
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+const routes: Routes = [
+  // other routes
+  {
+    path: "identity",
+    loadChildren: () =>
+      import("@abp/ng.identity").then((m) => m.IdentityModule.forLazy()),
+  },
+  // other routes
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
+```
+
+When you load the identity feature like this, the "Users" page, for example, will have a route path of `/identity/users`. <sup id="a-modify-route">[1](#f-modify-route)</sup>
+
+Depending on the library, the `.forLazy` static method may also receive some options that configure how the feature works.
+
+---
+
+<sup id="f-modify-route"><b>1</b></sup> _Libraries expect to work at a predefined path. Please check [how to patch a navigation element](./Modifying-the-Menu.md#how-to-patch-or-remove-a-navigation-element), if you want to use a different path from the default one (e.g. '/identity')._ <sup>[↩](#a-modify-route)</sup>
+
+---
+
+## What's Next?
+
+- [Service Proxies](./Service-Proxies.md)

docs/en/UI/Angular/Lazy-Load-Service.md

@@ -1,4 +1,4 @@
-# How to Lazy Load Scripts and Styles
+# Lazy Loading Scripts & Styles
 
 You can use the `LazyLoadService` in @abp/ng.core package in order to lazy load scripts and styles in an easy and explicit way.
 
@@ -210,4 +210,4 @@ load(strategy: LoadingStrategy, retryTimes?: number, retryDelay?: number): Obser
 
 ## What's Next?
 
-- [DomInsertionService](./Dom-Insertion-Service.md)
+- [Projecting Angular Content](./Content-Projection-Service.md)

docs/en/UI/Angular/List-Service.md

@@ -1,4 +1,4 @@
-# Querying Lists Easily with ListService
+# Working with Lists
 
 `ListService` is a utility service to provide an easy pagination, sorting, and search implementation.
 
@@ -177,3 +177,8 @@ As of v3.0, with ngx-datatable, the `page` property has to be set as `0` for ini
 ```
 
 **Important Note:** The `abp-table` is not removed, but is deprecated and will be removed in the future. Please consider switching to ngx-datatable.
+
+
+## What's Next?
+
+- [Easy *ngFor trackBy](./Track-By-Service.md)

docs/en/UI/Angular/Migration-Guide-v3.md

@@ -10,7 +10,7 @@ The new ABP Angular UI is based on Angular 10 and TypeScript 3.9, and we have dr
 
 Open a terminal at your root folder and run the following command:
 
-```sh
+```shell
 yarn ng update @angular/cli @angular/core --force
 ```
 
@@ -26,7 +26,7 @@ On the other hand, it would be better if you check which packages to update firs
 
 When Angular reports the packages above, your command would look like this:
 
-```sh
+```shell
 yarn ng update @angular/cli @angular/core ng-zorro-antd --force
 ```
 
@@ -473,5 +473,5 @@ Some interfaces have long been marked as deprecated and now they are removed.
 
 ## What's Next?
 
-* [Environment](./Environment.md)
+* [Quick Start](./Quick-Start.md)
 

docs/en/UI/Angular/Multi-Tenancy.md

@@ -2,8 +2,8 @@
 
 ABP Angular UI supports the multi-tenancy. The following features related to multi-tenancy are available in the startup templates.
 
-
 ![Tenants Page](./images/tenants-page.png)
+
 <p style="font-size:small;text-align:center;">Tenants page</p>
 
 On the page above, you can;
@@ -13,13 +13,12 @@ On the page above, you can;
 - Edit an existing tenant.
 - Delete a tenant.
 
-
 ![Tenant Switching Component](./images/tenant-switching-box.png)
+
 <p style="font-size:small;text-align:center;">Tenant Switching Component</p>
 
 You can switch between existing tenants by using the tenant switching component in the child pages of the `AccountLayoutComponent` (like Login page). Angular UI sends the selected tenant id to the backend as `__tenant` header on each request.
 
-
 ## Domain Tenant Resolver
 
 Angular UI can get the tenant name from the app running URL. You can determine the current tenant by subdomain (like mytenant1.mydomain.com) or by the whole domain (like mytenant.com). To do this, you need to set the `application.baseUrl` property in the environment:
@@ -32,10 +31,10 @@ Subdomain resolver:
 export const environment = {
   //...
   application: {
-    baseUrl: 'https://{0}.mydomain.com/'
+    baseUrl: "https://{0}.mydomain.com/",
   },
   //...
-}
+};
 ```
 
 **{0}** is the placeholder to determine current tenant's unique name.
@@ -44,7 +43,6 @@ After the configuration above, if your app runs on the `mytenant1.mydomain.com`,
 
 > **Important Note:** If you define the `baseUrl` with the placeholder (**{0}**), the tenant switching component in the child pages of the `AccountLayoutComponent` (like Login page) will be hidden.
 
-
 Domain resolver:
 
 ```js
@@ -53,10 +51,10 @@ Domain resolver:
 export const environment = {
   //...
   application: {
-    baseUrl: 'https://{0}.com/'
+    baseUrl: "https://{0}.com/",
   },
   //...
-}
+};
 ```
 
 After the configuration above, if your app runs on the `mytenant.com`, the app will get the tenant name as **mytenant**.
@@ -71,29 +69,28 @@ The **{0}** placeholder can be put to the API URLs in the environment to determi
 export const environment = {
   //...
   application: {
-    baseUrl: 'https://{0}.mydomain.com/',
+    baseUrl: "https://{0}.mydomain.com/",
     //...
   },
   oAuthConfig: {
-    issuer: 'https://{0}.ids.mydomain.com',
+    issuer: "https://{0}.ids.mydomain.com",
     //...
   },
   apis: {
     default: {
-      url: 'https://{0}.api.mydomain.com',
+      url: "https://{0}.api.mydomain.com",
     },
     AbpIdentity: {
-      url: 'https://{0}.identity.mydomain.com',
+      url: "https://{0}.identity.mydomain.com",
     },
   },
-}
+};
 ```
 
 > **Important Note:** The `application.baseUrl` and the `{0}` placeholder in the value of the `baseUrl` property are required to be able to get tenant from running URL. Other placeholders in API URLs are optional.
 
 After the configuration above, if your app runs on the `mytenant1.mydomain.com`, the app will get tenant name as **mytenant1** and replace the environment object in `ConfigState` on app initialization as follows:
 
-
 ```js
 // environment object in ConfigState
 
@@ -128,8 +125,8 @@ The app sends the `__tenant` header that contains the current tenant id on each
 
 ## See Also
 
-* [Multi Tenancy in ABP](../../Multi-Tenancy.md)
+- [Multi Tenancy in ABP](../../Multi-Tenancy.md)
 
 ## What's Next?
 
-- [Confirmation Popup](./Confirmation-Service.md)
+- [Managing RxJS Subscriptions](./Subscription-Service.md)

docs/en/UI/Angular/PWA-Configuration.md

@@ -0,0 +1,346 @@
+# PWA Configuration
+
+[Progressive Web Apps](https://web.dev/progressive-web-apps/) are web applications which, although not as integrated to the OS as a native app, can take advantage of native features. They can be discovered via search engines, installed on devices with a single tap or click, and shared via a regular link. They also can work offline and get updates when new content is available.
+
+Converting your Angular application to a PWA is easy.
+
+## 1. Install Angular PWA
+
+Run the following command in the root folder of your Angular application:
+
+```shell
+yarn ng add @angular/pwa
+```
+
+...or...
+
+```shell
+npm run ng add @angular/pwa
+```
+
+This will install the `@angular/service-worker` package and make your default app a PWA. Alternatively, you may add `project` parameter to target a specific app in your workspace:
+
+```shell
+yarn ng add @angular/pwa --project MyProjectName
+```
+
+Here is the output of the command:
+
+<img alt="Angular PWA updates and creates files" src="./images/pwa-configuration-ng-add.png" width="400px" style="max-width:100%">
+
+So, Angular CLI updates some files and add a few others:
+
+- **ngsw-config.json** is where the [service worker configuration](https://angular.io/guide/service-worker-config) is placed. Not all PWAs have this file. It is specific to Angular.
+- **manifest.webmanifest** is a [web app manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) and provides information about your app in JSON format.
+- **icons** are placeholder icons that are referred to in your web app manifest. We will replace these in a minute.
+- **angular.json** has following modifications:
+  - `assets` include _manifest.webmanifest_.
+  - `serviceWorker` is `true` in production build.
+  - `ngswConfigPath` refers to _ngsw-config.json_.
+- **package.json** has _@angular/service-worker_ as a new dependency.
+- **app.module.ts** imports `ServiceWorkerModule` and registers a service worker filename.
+- **index.html** has following modifications:
+  - A `<link>` element that refers to _manifest.webmanifest_.
+  - A `<meta>` tag that sets a theme color.
+
+## 2. Update the Web App Manifest
+
+### 2.1. Set the Name of Your App
+
+The `name` and the `short_name` properties in the generated manifest are derived from your project name. Let's change them.
+
+Open the _manifest.webmanifest_ file and update `name` and `short_name` props:
+
+```json
+{
+  /* rest of the manifest meta data */
+  "short_name": "My Project",
+  "name": "My Project: My Catch-Phrase"
+}
+```
+
+The short name must be really short because it will be displayed on anywhere with limited space, like the launcher and the home screen.
+
+### 2.2. Add a Description
+
+The `@angular/pwa` schematic we just added does not insert a description to your manifest file, but, according to [web app manifest standards](https://www.w3.org/TR/appmanifest/#description-member), you should.
+
+So, open the _manifest.webmanifest_ file and place the description as seen below:
+
+```json
+{
+  /* rest of the manifest meta data */
+  "description": "My short project description giving a slightly better idea about my app"
+}
+```
+
+As a bonus, providing a description [along with other criteria](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-edgehtml/microsoft-store#criteria-for-automatic-submission) helps Bing web crawler to index your app and automatically submit your app to Microsoft Store in `.appx` format.
+
+### 2.3. Set App Colors
+
+Angular generates the manifest file with a default `theme_color` and `background_color`. Change these according to your brand identity:
+
+Open the _manifest.webmanifest_ file and update `theme_color` and `background_color` properties:
+
+```json
+{
+  /* rest of the manifest meta data */
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
+```
+
+Then open _index.html_ and change the theme color meta tag as below:
+
+```html
+<meta name="theme-color" content="#000000" />
+```
+
+### 2.4. Replace App Icons & Add Splash Screens
+
+We need to update the icons and add some splash screens. This normally is time-consuming, but we will use the marvelous [pwa-asset-generator](https://github.com/onderceylan/pwa-asset-generator#readme) library.
+
+First, open the _manifest.webmanifest_ file and remove all elements in the `icons` property:
+
+```json
+{
+  /* rest of the manifest meta data */
+  "icons": []
+}
+```
+
+Then, run the following command in your terminal (changing the path of course):
+
+```shell
+npx pwa-asset-generator /path/to/your/logo.png ./src/assets/pwa -i ./src/index.html -m ./src/manifest.webmanifest
+```
+
+Open the _manifest.webmanifest_ file again. You will see this:
+
+```json
+{
+  /* rest of the manifest meta data */
+  "icons": [
+    {
+      "src": "../manifest-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "../manifest-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}
+```
+
+In addition to updated icons, the library will generate splash screens. However, Apple requires all splash screens to be added in your _index.html_ and displays a blank screen at startup otherwise. So, the following tags will be inserted into the _index.html_ file:
+
+```html
+<link
+  rel="apple-touch-icon"
+  sizes="180x180"
+  href="assets/pwa/apple-icon-180.jpg"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="167x167"
+  href="assets/pwa/apple-icon-167.jpg"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="152x152"
+  href="assets/pwa/apple-icon-152.jpg"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="120x120"
+  href="assets/pwa/apple-icon-120.jpg"
+/>
+
+<meta name="apple-mobile-web-app-capable" content="yes" />
+
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-2048-2732.jpg"
+  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-2732-2048.jpg"
+  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1668-2388.jpg"
+  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-2388-1668.jpg"
+  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1536-2048.jpg"
+  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-2048-1536.jpg"
+  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1668-2224.jpg"
+  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-2224-1668.jpg"
+  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1620-2160.jpg"
+  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-2160-1620.jpg"
+  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1242-2688.jpg"
+  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-2688-1242.jpg"
+  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1125-2436.jpg"
+  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-2436-1125.jpg"
+  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-828-1792.jpg"
+  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1792-828.jpg"
+  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1080-1920.jpg"
+  media="(device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1920-1080.jpg"
+  media="(device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-750-1334.jpg"
+  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1334-750.jpg"
+  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-640-1136.jpg"
+  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+/>
+<link
+  rel="apple-touch-startup-image"
+  href="assets/pwa/apple-splash-1136-640.jpg"
+  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+/>
+```
+
+## 3. Configure Service Worker
+
+### 3.1 Modify Asset Groups
+
+Angular has defined some static files to be cached by the service worker, but they are not 100% accurate. Let's change it.
+
+Open _ngsw-config.json_ file and replace its content with this:
+
+```json
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/common-es2015.*.js",
+          "/main-es2015.*.js",
+          "/polyfills-es2015.*.js",
+          "/runtime-es2015.*.js",
+          "/vendor-es2015.*.js"
+        ]
+      }
+    },
+    {
+      "name": "modules",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/*-es2015.*.js",
+          "!/common-es2015.*.js",
+          "!/main-es2015.*.js",
+          "!/polyfills-es2015.*.js",
+          "!/runtime-es2015.*.js",
+          "!/vendor-es2015.*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}
+```
+
+In case you want to cache other static files, please refer to the [service worker configuration document](https://angular.io/guide/service-worker-config#assetgroups) on Angular.io.
+
+### 3.2 Set Data Groups
+
+This part is unique to your project. We recommend being very careful about which endpoints to cache. Please refer to [service worker configuration document](https://angular.io/guide/service-worker-config#datagroups) on Angular.io for details.
+
+## What's Next?
+
+- [Config State](./Config-State.md)

docs/en/UI/Angular/Quick-Start.md

@@ -0,0 +1,212 @@
+# ABP Angular Quick Start
+
+## How to Prepare Development Environment
+
+Please follow the steps below to prepare your development environment for Angular.
+
+1. **Install Node.js:** Please visit [Node.js downloads page](https://nodejs.org/en/download/) and download proper Node.js v12 or v14 installer for your OS. An alternative is to install [NVM](https://github.com/nvm-sh/nvm) and use it to have multiple versions of Node.js in your operating system.
+2. **[Optional] Install Yarn:** You may install Yarn v1 (not v2) following the instructions on [the installation page](https://classic.yarnpkg.com/en/docs/install). Yarn v1 delivers an arguably better developer experience compared to npm v6 and below. You may skip this step and work with npm, which is built-in in Node.js, instead.
+3. **[Optional] Install VS Code:** [VS Code](https://code.visualstudio.com/) is a free, open-source IDE which works seamlessly with TypeScript. Although you can use any IDE including Visual Studio or Rider, VS Code will most likely deliver the best developer experience when it comes to Angular projects. ABP project templates even contain plugin recommendations for VS Code users, which VS Code will ask you to install when you open the Angular project folder. Here is a list of recommended extensions:
+   - [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=angular.ng-template)
+   - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+   - [TSLint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)
+   - [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=visualstudioexptteam.vscodeintellicode)
+   - [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
+   - [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
+   - [Angular 10 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout](https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode)
+   - [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
+   - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
+   - [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
+   - [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
+
+## How to Start a New Angular Project
+
+You have multiple options to initiate a new Angular project that works with ABP:
+
+### 1. Using ABP CLI
+
+ABP CLI is probably the most convenient and flexible way to initiate an ABP solution with an Angular frontend. Simply [install the ABP CLI](../../CLI.md) and run the following command in your terminal:
+
+```shell
+abp new MyCompanyName.MyProjectName -csf -u angular
+```
+
+> To see further options in the CLI, please visit the [CLI manual](../../CLI.md).
+
+This command will prepare a solution with an Angular and a .NET Core project in it. Please visit [Getting Started section](../../Getting-Started.md?UI=NG&DB=EF&Tiered=No#abp-cli-commands-options) for further instructions on how to set up the backend of your solution.
+
+To continue reading without checking other methods, visit [Angular project structure section](#angular-project-structure).
+
+### 2. Direct Download
+
+You may [download a solution scaffold directly on ABP.io](https://abp.io/get-started) if you are more comfortable with GUI or simply want to try ABP without installing the CLI.
+
+Please do the following:
+
+1. Click on the "DIRECT DOWNLOAD" tab.
+2. Fill out the short form about your project.
+3. Click on the "Create now" button.
+
+...and a customized download will start in a few seconds.
+
+To avoid IDE warnings, run `yarn` or `npm install` in the Angular root folder before you continue to the next section. It is not imperative but recommended.
+
+## Angular Project Structure
+
+After creating a solution, open its "angular" directory in your IDE. This is how the contents of the root folder looks like:
+
+<img alt="Angular project root folder structure" src="./images/quick-start---root-folder-structure.png" width="300px" style="max-width:100%">
+
+Here is what these folders and files are for:
+
+- **.vscode** has extension recommendations in it.
+- **e2e** is a separate app for possible end-to-end tests.
+- **src** is where the source files for your application are placed. We will have a closer look in a minute.
+- **.browserlistrc** helps [configuring browser compatibility of your Angular app](https://angular.io/guide/build#configuring-browser-compatibility).
+- **.editorconfig** helps you have a shared coding style for separate editors and IDEs. Check [EditorConfig.org](https://editorconfig.org/) for details.
+- **.gitignore** defined which files and folders should not be tracked by git. Check [git documentation](https://git-scm.com/docs/gitignore) for details.
+- **.prettierrc** includes simple coding style choices for [Prettier](https://prettier.io/), an auto-formatter for TypeScript, HTML, CSS, and more. If you install recommended extensions to VS Code, you will never have to format your code anymore.
+- **angular.json** is where Angular workspace is defined. It holds project configurations and workspace preferences. Please refer to [Angular workspace configuration](https://angular.io/guide/workspace-config) for details.
+- **karma.conf.js** holds [Karma test runner](https://karma-runner.github.io/) configurations.
+- **package.json** is where your [package dependencies](https://angular.io/guide/npm-packages) are listed. It also includes some useful scripts for developing, testing, and building your application.
+- **README.md** includes some of Angular CLI command examples. You either have to install Angular CLI globally or run these commands starting with `yarn` or `npx` to make them work.
+- **start.ps1** is a simple PowerShell script to install dependencies and start a [development server via Angular CLI](https://angular.io/cli/serve), but you probably will not need that after reading this document.
+- **tsconfig.json** and all other [tsconfig files](https://angular.io/guide/typescript-configuration) in general, include some TypeScript and Angular compile options.
+- **yarn.lock** enables installing consistent package versions across different devices so that working application build will not break because of a package update. Please read [Yarn documentation](https://classic.yarnpkg.com/en/docs/yarn-lock/) if you are interested in more information on the topic. If you have decided to use npm, please remove this file and keep the [package-lock.json](https://docs.npmjs.com/files/package-lock.json) instead.
+
+Now let us take a look at the contents of the source folder.
+
+<img alt="Angular project source folder structure" src="./images/quick-start---source-folder-structure.png" width="300px" style="max-width:100%">
+
+- **app** is the main directory you put your application files in. Any module, component, directive, service, pipe, guard, interceptor, etc. should be placed here. You are free to choose any folder structure, but [organizing Angular applications based on modules](https://angular.io/guide/module-types) is generally a fine practice.
+- **home** is a predefined module and acts as a welcome page. It also demonstrates how a feature-based folder structure may look like. More complex features will probably have sub-features, thus inner folders. You may change the home folder however you like.
+- **shared** is spared for reusable code that works for several modules. Some, including yours truly, may disagree with using a single module for all shared code, so consider adding standalone sub-modules inside this folder instead of adding everything into **shared.module.ts**.
+- **app-routing.module.ts** is where your top-level routes are defined. Angular is capable of [lazy loading feature modules](https://angular.io/guide/lazy-loading-ngmodules), so not all routes will be here. You may think of Angular routing as a tree and this file is the top of the tree.
+- **app.component.ts** is essentially the top component that holds the dynamic application layout.
+- **app.module.ts** is the [root module](https://angular.io/guide/bootstrapping) that includes information about how parts of your application are related and what to run at the initiation of your application.
+- **route.provider.ts** is used for [modifying the menu](https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu).
+- **assets** is for static files. A file (e.g. an image) placed in this folder will be available as is when the application is served.
+- **environments** includes one file per environment configuration. There are two configurations by default, but you may always introduce another one. These files are directly referred to in _angular.json_ and help you have different builds and application variables. Please refer to [configuring Angular application environments](https://angular.io/guide/build#configuring-application-environments) for details.
+- **index.html** is the HTML page served to visitors and will contain everything required to run your application. Servers should be configured to redirect every request to this page so that the Angular router can take over. Do not worry about how to add JavaScript and CSS files to it, because Angular CLI will do it automatically.
+- **main.ts** bootstraps and configures Angular application to run in the browser. It is production-ready, so forget about it.
+- **polyfill.ts** is where you can add polyfills if you want to [support legacy browsers](https://angular.io/guide/browser-support).
+- **style.scss** is the default entry point for application styles. You can change this or add new entry points in _angular.json_.
+- **test.ts** helps the unit test runner discover and bootstrap spec files.
+
+Phew! So many files, right? Yet, **most of them are typically not subject to change** or, even when they are so, the CLI tooling will do the job for you. The main focus should be on the app folder and its content.
+
+Next, we will take a look at the commands used to prepare, build, and serve our application.
+
+## How to Run the Angular Application
+
+Now that you know about the files and folders, we can get the application up and running.
+
+1. Make sure the [database migration is complete](../../Getting-Started?UI=NG&DB=EF&Tiered=No#create-the-database) and the [API is up and running](../../Getting-Started?UI=NG&DB=EF&Tiered=No#run-the-application).
+2. Run `yarn` or `npm install` if you have not already.
+3. Run `yarn start` or `npm start`. The first compilation may take a while. This will start a [live development server](#angular-live-development-server) and launch your default browser in the end.
+4. Visit the browser page that opens after the compilation <sup id="a-certificate-error">[1](#f-certificate-error)</sup>.
+
+<img alt="New ABP Angular project home page" src="./images/quick-start---new-project-home-page.png" width="744px" style="max-width:100%">
+
+You may modify the behavior of the **start script** (in the package.json file) by changing the parameters passed to the `ng serve` command. For instance, if you do not want a browser window to open next time you run the script, remove `--open` from the end of it. Please check [ng serve documentation](https://angular.io/cli/serve) for all available options.
+
+### Angular Live Development Server
+
+The development server of Angular is based on [Webpack DevServer](https://webpack.js.org/configuration/dev-server/). It tracks changes to source files and syncs the browser window after an incremental re-compilation every time <sup id="a-dev-server">[2](#f-dev-server)</sup> you make one. Your experience will be like this:
+
+<img alt="Angular Live Development Server compiles again on template change and removes a button from the page displayed by the browser." src="./images/quick-start---angular-live-development-server.gif" width="818px" style="max-width:100%">
+
+Please keep in mind that you should not use this server in production. To provide the fastest experience, the compiler skips some heavy optimizations and the development server is simply not built for multiple clients. The next section will describe what to do.
+
+---
+
+<img alt="Error caused by browser blocking access to backend" src="./images/quick-start---self-signed-certificate-error.png" width="400px" style="max-width:100%">
+
+<sup id="f-certificate-error"><b>1</b></sup> _If you see the error above when you run the Angular app, your browser might be blocking access to the API because of the self-signed certificate. Visit that address and allow access to it (once). When you see the Swagger interface, you are good to go._ <sup>[↩](#a-certificate-error)</sup>
+
+<sup id="f-dev-server"><b>2</b></sup> _Sometimes, depending on the file changed, Webpack may miss the change and cannot reflect it in the browser. For example, tsconfig files are not being tracked. In such a case, please restart the development server._ <sup>[↩](#a-dev-server)</sup>
+
+---
+
+## How to Build the Angular Application
+
+An Angular application can have multiple [build targets](https://angular.io/guide/glossary#target), i.e. **configurations in angular.json** which define how [Architect](https://angular.io/guide/glossary#architect) will build applications and libraries. Usually, each build configuration has a separate environment variable file. Currently, the project has two: One for development and one for production.
+
+```js
+// this is what environment variables look like
+// can be found at /src/environments/environment.ts
+
+import { Config } from '@abp/ng.core';
+
+const baseUrl = 'http://localhost:4200';
+
+export const environment = {
+  production: false,
+  application: {
+    baseUrl,
+    name: 'MyProjectName',
+    logoUrl: '',
+  },
+  oAuthConfig: {
+    issuer: 'https://localhost:44381',
+    redirectUri: baseUrl,
+    clientId: 'MyProjectName_App',
+    responseType: 'code',
+    scope: 'offline_access MyProjectName',
+  },
+  apis: {
+    default: {
+      url: 'https://localhost:44381',
+      rootNamespace: 'MyCompanyName.MyProjectName',
+    },
+  },
+} as Config.Environment;
+```
+
+When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.io/guide/workspace-config#build-configs) and set [file replacements](https://angular.io/guide/build#configure-target-specific-file-replacements) to use a completely new environment. For now, we will start a production build:
+
+1. Open your terminal and navigate to the root Angular folder.
+2. Run `yarn` or `npm install` if you have not installed dependencies already.
+3. Run `yarn build:prod` or `npm run build:prod`.
+
+<img alt="Angular compiler optimizing the build using Terser" src="./images/quick-start---self-signed-certificate-error.png" width="400px" style="max-width:100%">
+
+Depending on project size, the compilation may take a few minutes. When it is finished, the compiled output will be placed inside the _/dist_ folder. Voila! You have deployment-ready build artifacts.
+
+> The amount of optimization performed on the source is the main difference between a regular build and a production one. Production builds have a much smaller size and are more performant.
+
+## How to Deploy the Angular Application
+
+Angular web applications run on the browser and require no server except for a [static web server](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server) to deliver files to the client. To see that it works, please make sure the backend application is up and then run the following command in your terminal:
+
+```shell
+# please replace MyProjectName with your project name
+
+npx servor dist/MyProjectName index.html 4200 --browse
+```
+
+This command will download and start a simple static server, a browser window at `http://localhost:4200` will open, and the compiled output of your project will be served.
+
+Of course, you need your application to run on an optimized web server and become available to everyone. This is quite straight-forward:
+
+1. Create a new static web server instance. You can use a service like [Azure App Service](https://azure.microsoft.com/tr-tr/services/app-service/web/), [Firebase](https://firebase.google.com/docs/hosting), [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or even [GitHub Pages](https://angular.io/guide/deployment#deploy-to-github-pages). Another option is maintaining own web server with [NGINX](https://www.nginx.com/), [IIS](https://www.iis.net/), [Apache HTTP Server](https://httpd.apache.org/), or equivalent.
+2. Copy the files from `dist/MyProjectName` <sup id="a-dist-folder-name">[1](#f-dist-folder-name)</sup> to a publicly served destination on the server via CLI of the service provider, SSH, or FTP (whichever is available). This step would be defined as a job if you have a CI/CD flow.
+3. [Configure the server](https://angular.io/guide/deployment#server-configuration) to redirect all requests to the _index.html_ file. Some services do that automatically. Others require you [to add a file to the bundle via assets](https://angular.io/guide/workspace-config#assets-configuration) which describes the server how to do the redirections. Occasionally, you may need to do manual configuration.
+
+In addition, you can [deploy your application to certain targets using the Angular CLI](https://angular.io/guide/deployment#automatic-deployment-with-the-cli). Here are some deploy targets:
+
+- [Azure](https://github.com/Azure/ng-deploy-azure#readme)
+- [Firebase](https://github.com/angular/angularfire#readme)
+- [Netlify](https://github.com/ngx-builders/netlify-builder#readme)
+- [Vercel](https://github.com/vercel/ng-deploy-vercel#readme)
+- [GitHub Pages](https://github.com/angular-schule/angular-cli-ghpages/#readme)
+
+---
+
+<sup id="f-dist-folder-name"><b>1</b></sup> _The compiled output will be placed under `/dist` in a folder by the project name._ <sup>[↩](#a-dist-folder-name)</sup>
+
+---
+
+## What's Next?
+
+- [Environment Variables](./Environment.md)

docs/en/UI/Angular/Service-Proxies.md

@@ -1,47 +1,93 @@
 ## Service Proxies
 
-> THIS DOCUMENT IS OUTDATED. IT IS BEING UPDATED. MEANWHILE, YOU CAN [SEE THIS ARTICLE](https://github.com/abpframework/abp/blob/dev/docs/en/Blog-Posts/2020-09-07%20Angular-Service-Proxies/POST.md) TO LEARN HOW TO USE THE ABP ANGULAR SERVICE PROXIES.
+Calling a REST endpoint from Angular applications is common. We usually create **services** matching server-side controllers and **interfaces** matching [DTOs](../../Data-Transfer-Objects) to interact with the server. This often results in manually transforming C# code into TypeScript equivalents and that is unfortunate, if not intolerable.
 
-It is common to call a REST endpoint in the server from our Angular applications. In this case, we generally create **services** (those have methods for each service method on the server side) and **model objects** (matches to [DTOs](../../Data-Transfer-Objects) in the server side).
+To avoid manual effort, we might use a tool like [NSWAG](https://github.com/RicoSuter/NSwag) that generates service proxies. However, NSWAG has some disadvantages:
 
-In addition to manually creating such server-interacting services, we could use tools like [NSWAG](https://github.com/RicoSuter/NSwag) to generate service proxies for us. But NSWAG has the following problems we've experienced:
+- It generates **a single .ts file** which gets **too large** as your application grows. Also, this single file does not fit the **[modular](../../Module-Development-Basics) approach** of ABP.
+- To be honest, the generated code is a bit **ugly**. We would like to produce code that looks as if someone wrote it.
+- Since swagger.json **does not reflect the exact method signature** of backend services, NSWAG cannot reflect them on the client-side as well.
 
-* It generates a **big, single** .ts file which has some problems;
-  * It get **too large** when your application grows.
-  * It doesn't fit into the **[modular](../../Module-Development-Basics) approach** of the ABP framework.
-* It creates a bit **ugly code**. We want to have a clean code (just like if we write manually).
-* It can not generate the same **method signature** declared in the server side (because swagger.json doesn't exactly reflect the method signature of the backend service). We've created an endpoint that exposes server side method contacts to allow clients generate a better aligned client proxies.
+ABP introduces an endpoint that exposes server-side method contracts. When the `generate-proxy` command is run, ABP CLI makes an HTTP request to this endpoint and generates better-aligned client proxies in TypeScript. It organizes folders according to namespaces, adds barrel exports, and reflects method signatures in Angular services.
 
-ABP CLI `generate-proxies` command automatically generates the typescript client proxies by creating folders which separated by module names in the `src/app` folder.
 Run the following command in the **root folder** of the angular application:
 
 ```bash
 abp generate-proxy
 ```
 
-It only creates proxies only for your own application's services. It doesn't create proxies for the services of the application modules you're using (by default). There are several options. See the [CLI documentation](../../CLI).
+The command without any parameters creates proxies only for your own application's services and places them in your default Angular application. There are several parameters you may use to modify this behavior. See the [CLI documentation](../../CLI) for details.
 
-The files generated with the `--module all` option like below:
+The generated files will be placed in a folder called `proxy` at the root of the target project.
 
 ![generated-files-via-generate-proxy](./images/generated-files-via-generate-proxy.png)
 
+Each folder will have models, enums, and services defined at related namespace accompanied by a barrel export, i.e. an `index.ts` file for easier imports.
+
+> The command can find application/library roots by reading the `angular.json` file. Make sure you have either defined your target project as the `defaultProject` or pass the `--target` parameter to the command. This also means that you may have a monorepo workspace.
+
+### Angular Project Configuration
+
+> If you've created your project with version 3.1 or later, you can skip this part since it will be already installed in your solution.
+
+For a solution that was created before v3.1, follow the steps below to configure your Angular application:
+
+1. Add `@abp/ng.schematics` package to the `devDependencies` of the Angular project. Run the following command in the root folder of the angular application:
+
+```bash
+npm install @abp/ng.schematics -D
+```
+
+2. Add `rootNamespace` property to the `/src/environments/environment.ts` in your application project as shown below. `MyCompanyName.MyProjectName` should be replaced by the root namespace of your .NET project.
+
+```js
+export const environment: Config.Environment = {
+  // other environment variables...
+  apis: {
+    default: {
+      rootNamespace: "MyCompanyName.MyProjectName",
+      // other environment variables...
+    },
+  },
+};
+```
+
+3. [OPTIONAL] Add the following paths to `tsconfig.base.json` in order to have a shortcut for importing proxies:
+
+```json
+{
+  // other TS configuration...
+  "compilerOptions": {
+    // other TS configuration...
+    "paths": {
+      "@proxy": ["src/app/proxy/index.ts"],
+      "@proxy/*": ["src/app/proxy/*"]
+    }
+  }
+}
+```
+
+> The destination the `proxy` folder is created and the paths above may change based on your project structure.
+
 ### Services
 
-Each generated service matches a back-end controller. The services methods call back-end APIs via [RestService](./Http-Requests#restservice).
+The `generate-proxy` command generates one service per back-end controller and a method (property with a function value actually) for each action in the controller. These methods call backend APIs via [RestService](./Http-Requests#restservice).
 
-A variable named `apiName` (available as of v2.4) is defined in each service. `apiName` matches the module's RemoteServiceName. This variable passes to the `RestService` as a parameter at each request. If there is no microservice API defined in the environment, `RestService` uses the default. See [getting a specific API endpoint from application config](./Http-Requests#how-to-get-a-specific-api-endpoint-from-application-config)
+A variable named `apiName` (available as of v2.4) is defined in each service. `apiName` matches the module's `RemoteServiceName`. This variable passes to the `RestService` as a parameter at each request. If there is no microservice API defined in the environment, `RestService` uses the default. See [getting a specific API endpoint from application config](./Http-Requests#how-to-get-a-specific-api-endpoint-from-application-config)
 
-The `providedIn` property of the services is defined as `'root'`. Therefore no need to add a service as a provider to a module. You can use a service by injecting it into a constructor as shown below:
+The `providedIn` property of the services is defined as `'root'`. Therefore there is no need to provide them in a module. You can use them directly by injecting them into the constructor as shown below:
 
 ```js
-import { AbpApplicationConfigurationService } from '../abp/applicationconfiguration/services';
+import { BookService } from '@proxy/books';
 
-//...
-export class HomeComponent{
-  constructor(private appConfigService: AbpApplicationConfigurationService) {}
+@Component(/* component metadata here */)
+export class BookComponent implements OnInit {
+  constructor(private service: BookService) {}
 
   ngOnInit() {
-    this.appConfigService.get().subscribe()
+    this.service.get().subscribe(
+      // do something with the response
+    );
   }
 }
 ```
@@ -50,20 +96,48 @@ The Angular compiler removes the services that have not been injected anywhere f
 
 ### Models
 
-The generated models match the DTOs in the back-end. Each model is generated as a class under the `src/app/*/models` folder. 
+The `generate-proxy` command generates interfaces matching DTOs in the back-end. There are also a few [core DTOs](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/dtos.ts) in the `@abp/ng.core` package. In combination, these models can be used to reflect the APIs.
 
-There are a few [base classes](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/dtos.ts) in the `@abp/ng.core` package. Some models extend these classes.
+```js
+import { PagedResultDto } from "@abp/ng.core";
+import { BookDto } from "@proxy/books";
+
+@Component(/* component metadata here */)
+export class BookComponent implements OnInit {
+  data: PagedResultDto<BookDto> = {
+    items: [],
+    totalCount: 0,
+  };
+}
+```
 
-A class instance can be created as shown below:
+### Enums
+
+Enums have always been difficult to populate in the frontend. The `generate-proxy` command generates enums in a separate file and exports a ready-to-use "options constant" from the same file. So you can import them as follows:
 
 ```js
-import { IdentityRoleCreateDto } from '../identity/role/models'
-//...
-const instance = new IdentityRoleCreateDto({name: 'Role 1', isDefault: false, isPublic: true})
+import { bookGenreOptions } from "@proxy/books";
+
+@Component(/* component metadata here */)
+export class BookComponent implements OnInit {
+  genres = bookGenreOptions;
+}
+```
+
+...and consume the options in the template as follows:
+
+```html
+<!-- simplified for sake of clarity -->
+<select formControlName="genre">
+  <option [ngValue]="null">Select a genre</option>
+  <option *ngFor="let genre of genres" [ngValue]="genre.value">
+    {%{{{ genre.key }}}%}
+  </option>
+</select>
 ```
 
-Initial values ​​can optionally be passed to each class constructor.
+> Please [see this article](https://github.com/abpframework/abp/blob/dev/docs/en/Blog-Posts/2020-09-07%20Angular-Service-Proxies/POST.md) to learn more about service proxies.
 
 ## What's Next?
 
-* [HTTP Requests](./Http-Requests)
+- [PWA Configuration](./PWA-Configuration.md)

docs/en/UI/Angular/Subscription-Service.md

@@ -1,4 +1,4 @@
-# Easy Unsubscription for Your Observables
+# Managing RxJS Subscriptions
 
 `SubscriptionService` is a utility service to provide an easy unsubscription from RxJS observables in Angular components and directives. Please see [why you should unsubscribe from observables on instance destruction](https://angular.io/guide/lifecycle-hooks#cleaning-up-on-instance-destruction).
 
@@ -200,4 +200,4 @@ class DemoComponent implements OnInit {
 
 ## What's Next?
 
-- [ListService](./List-Service.md)
+- [Working with Lists](./List-Service.md)

docs/en/UI/Angular/Toaster-Service.md

@@ -67,7 +67,7 @@ With the options above, the toast overlay looks like this:
 
 ![toast](./images/toast.png)
 
-### How to Remove a Toast Overlay
+### How to Remove a Toast Overlay
 
 The open toast overlay can be removed manually via the `remove` method by passing the `id` of toast:
 
@@ -156,4 +156,4 @@ Removes all open toasts.
 
 ## What's Next?
 
-- [Config State](./Config-State.md)
+- [Modifying the Menu](./Modifying-the-Menu.md)

docs/en/UI/Angular/Track-By-Service.md

@@ -1,4 +1,4 @@
-# Easy TrackByFunction Implementation
+# Easy *ngFor trackBy
 
 `TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.io/guide/template-syntax#ngfor-with-trackby) for its purpose.
 
@@ -116,4 +116,4 @@ class DemoComponent {
 
 ## What's Next?
 
-- [SubscriptionService](./Subscription-Service.md)
+- [Inserting Scripts & Styles to DOM](./Dom-Insertion-Service.md)