آموزش Blazor Deep Dive - از مبتدی تا پیشرفته در NET 8

سرفصل ها و درس ها

معرفی Introduction

• 1. Blazor چیست 1. What is Blazor

• 2. انتخاب های تعاملی 2. Choices of Interactivity

• 3. ساختار پروژه Blazor SSR 3. Blazor SSR Project Structure

• کد منبع Source Code

Blazor SSR Blazor SSR

• 4. دو نوع کامپوننت 4. Two Types of Components

• 5. Razor Syntax Implicit Razor Expression 5. Razor Syntax Implicit Razor Expression

• 6. نحو Razor Explicit Razor Expression 6. Razor syntax Explicit Razor Expression

• 7. یک مخزن داده استاتیک ایجاد کنید 7. Create a static data repository

• 8. Razor Syntax لیست خروجی با حلقه 8. Razor Syntax Output list with looping

• 9. تکلیف 1: لیست دکمه های شهر خروجی 9. Assignment 1: Output city buttons list

• 10. تکلیف 1: پاسخ 10. Assignment 1: Answer

• 11. کار با منابع استاتیک 11. Working with Static Resources

• 12. تکلیف 2: یک جزء قابل مسیریابی ایجاد کنید 12. Assignment 2: Create a routable component

• 13. تکلیف 2: پاسخ 13. Assignment 2: Answer

• 14. پارامترهای مسیر و محدودیت های مسیر 14. Route Parameters & Route Constraints

• 15. از OnParametersSet برای دریافت مقدار پارامتر استفاده کنید 15. Use OnParametersSet to receive parameter value

• 16. از اجزای Form و Input برای نمایش و جمع آوری داده ها استفاده کنید 16. Use Form and Input components to display and collect data

• 17. ارسال فرم و صحافی مدل 17. Form submission and model binding

• 18. اعتبار سنجی فرم 18. Form Validations

• 19. ناوبری با NavigationManager و Dependency Injection 19. Navigation with NavigationManager & Dependency Injection

• 20. تکلیف 3: افزودن سرور 20. Assignment 3: Add Server

• 21. تکلیف 3: پاسخ 21. Assignment 3: Answer

• 22. از EditForm برای حذف داده ها استفاده کنید 22. Use EditForm to delete data

• 22.5 رندر جریان 22.5 Stream Rendering

افزودن تعامل سرور Add Server Interactivity

• 23. تعامل چیست 23. What is interactivity

• 24. از Enhanced Navigation در Blazor SSR برای تعامل استفاده کنید 24. Use Enhanced Navigation in Blazor SSR for interactivity

• 25. از مدیریت فرم پیشرفته در Blazor SSR برای تعامل استفاده کنید 25. Use Enhanced form handling in Blazor SSR for interactivity

• 26. تعامل سرور چیست 26. What is Server Interactivity

• 27. نحوه تعاملی کردن یک جزء را فعال کنید 27. Enable Server Interactivity how to make a component interactive

• 28. موقعیت تعاملی 28. Interactivity Location

• 29. تعامل با سرور در قالب پروژه ویژوال استودیو 29. Server Interactivity in Visual Studio project template

• 30. سه جنبه اصلی اجزای تعاملی 30. Three main aspects of interactive components

• 31. مدیریت رویداد (داده های ارسال) 31. Event Handling (Passing Data)

• 32. تکلیف 4: شهر فعلی را برجسته کنید 32. Assignment 4: Highlight current City

• 33. تکلیف: 4 جواب 33. Assignment: 4 Answer

• 34. به روز رسانی. متغیرها را با رویداد Onchange حالت دهید 34. Update. state variables with Onchange event

• 35. اتصال داده دو طرفه 35. Two way data binding

• 35.5 فرم ویرایش تعاملی 35.5 Interactive EditForm

• 36. از کلید @ برای بهبود عملکرد ارائه لیست استفاده کنید 36. Use @key to improve list-rendering performance

• 37. از مجازی سازی برای بهبود عملکرد ارائه لیست استفاده کنید 37. Use Virtualization to improve list-rendering performance

پروژه دوره (قسمت 1): مبانی برنامه فهرست کارها Course Project (Part 1): To-Do List App Basics

• 38. الزامات برنامه لیست انجام کار 38. Requirement of To do list app

• 39. لیستی از موارد استفاده از وظایف را نمایش دهید 39. Display a list of tasks use case

• 40. Task use case را اضافه کنید 40. Add Task use case

• 41. نام تکلیف مورد استفاده را وارد کنید 41. Input task name use case

• 42. کار را به عنوان مورد استفاده کامل علامت گذاری کنید 42. Mark task as completed use case

کامپوننت ریش تراش غیر قابل مسیریابی Deep-Dive Non-Routable Razor Component Deep-Dive

• 43. تفکر در مؤلفه ها 43. Thinking in Components

• 44. کامپوننت ServerList را استخراج کنید 44. Extract the ServerList Component

• 45. از پارامترهای مؤلفه برای برقراری ارتباط از مؤلفه های والد به فرزند استفاده کنید 45. Use Component Parameters to communicate from parent to child components

• 46. ​​تکلیف 5: کامپوننت سرور را استخراج کنید 46. Assignment 5: Extract the Server Component

• 47. تکلیف 5: جواب 47. Assignment 5: Answer

• 48. اجزای شهر را استخراج کنید 48. Extract city components

• 49. از EventCallback برای انتقال اطلاعات از مؤلفه های فرزند به والد استفاده کنید 49. Use EventCallback to pass info from child to parent components

• 50. تکلیف 6: نوار جستجو را جزئی کنید 50. Assignment 6: Componentize the search bar

• 51. تکلیف 6: جواب 51. Assignment 6: Answer

• 52. به یک جزء فرزند ارجاع دهید 52. Reference a child component

• 53. از کامپوننت قابل مسیریابی مجدد به عنوان جزء غیر قابل مسیریابی استفاده کنید 53. Reuse routable component as non-routable component

• 54. از دستور if برای خروجی شرطی داده استفاده کنید 54. Use if statement to output data conditionally

• 55. تکلیف 7: نمایش افراد به صورت آنلاین 55. Assignment 7: Display people online

• 56. تکلیف 7: جواب 56. Assignment 7: Answer

• 57. جداسازی CSS 57. CSS Isolation

• 58. نظریه پارامترهای آبشاری 58. Cascading Parameter theory

• 59. از پارامتر آبشاری برای ارسال مقادیر به درخت جزء استفاده کنید 59. Use cascading parameter to pass values down the component tree

• 60. عبور پارامتر آبشاری از مرز حالت رندر 60. Cascading Parameter crossing render mode boundary

• 61. از کامپوننت های قالب بندی شده برای ایجاد کامپوننت های عمومی استفاده کنید 61. Use templated components to create generic components

• 62. کامپوننت قالب بندی شده تایپ شده 62. Typed Templated Component

• 63. از جدول html در RepeaterComponent خود استفاده کنید 63. Use html table in our RepeaterComponent

• 64. استفاده از QuickGrid برای نمایش سرورهای ما 64. Using QuickGrid to display our servers

• 65. QuickGrid مرتب سازی و صفحه بندی 65. QuickGrid Sorting and Pagination

• 66. از ویژگی های دلخواه برای ارائه انعطاف پذیری استفاده کنید 66. Use arbitrary attributes to provide flexibility

پروژه دوره (قسمت 2): برنامه لیست کارهای ما را جزئی کنید Course Project (Part 2): Componentize our To-Do List App

• 67. فهرست اقلام را ترکیب کنید 67. Componentize the List of Items

• 68. جزء to do مورد 68. Componentize the to do item

چرخه حیات کامپوننت Deep-Dive Component Lifecycle Deep-Dive

• 69. بررسی اجمالی چرخه حیات جزء 69. Component Lifecycle Overview

• 70. توالی رویدادهای چرخه حیات جزء قسمت 1 70. Component lifecycle events sequence Part 1

• 71. توالی رویدادهای چرخه حیات جزء قسمت 2 71. Component lifecycle events sequence Part 2

• 72. مشکل مقداردهی اولیه جزء 72. The problem of component initialization

• مشکل در پیش رندر Trouble with Pre-Rendering

• 73. مشکل OnParameterSet 73. The problem with OnParameterSet

• 74. یک جزء چه زمانی رندر می شود 74. When does a component render

• 75. مشکل ShouldRender 75. The problem of ShouldRender

• 76. Thread Safety & SynchronizationContext برای تعامل با سرور 76. Thread Safety & SynchronizationContext for Server Interactivity

مسیریابی و ناوبری Deep-Dive Routing and Navigation Deep-Dive

• 77. استاتیک در مقابل مسیریابی تعاملی 77. Static vs Interactive Routing

• 78. از NavigationLock برای جلوگیری از ناوبری استفاده کنید 78. Use NavigationLock to prevent navigation

• 79. دستورالعمل های چند صفحه ای 79. Multiple Page Directives

• 80. پارامترهای اختیاری 80. Optional Parameters

• 81. رشته های پرس و جو 81. Query Strings

مدیریت دولتی Deep-Dive State Management Deep-Dive

• 82. بررسی اجمالی مدیریت دولتی 82. State Mangament Overview

• 83. از URL برای انتقال اطلاعات به اجزای قابل مسیریابی استفاده کنید 83. Use URL to pass info across routable components

• 84. از حافظه مرورگر برای حفظ حالت ها استفاده کنید 84. Use browser storage to maintain states

• 85. از ظرف DI برای حفظ حالت ها استفاده کنید 85. Use DI container to maintain states

• 86. از Observer Pattern برای دسترسی به حالت ها در درخت های جزء استفاده کنید 86. Use Observer Pattern to access states across component trees

• 87. فروشگاه state را با الگوی Observer پیاده سازی کنید 87. Implement state store with Observer pattern

• 88. از بین بردن مشترکین 88. Dispose Subscribers

تعامل WebAssembly WebAssembly Interactivity

• 89. مکان های تعاملی WebAssembly 89. WebAssembly Interactivity Locations

• 90. یک پروژه جدید با WebAssembly Interactivity ایجاد کنید 90. Create a new project with WebAssembly Interactivity

• 91. حالت های رندر را مخلوط کنید 91. Mix Render Modes

• 92. رویدادهای چرخه زندگی در WebAssembly Interactivity 92. Life cycle events in WebAssembly Interactivity

• 94. ذخیره سازی مرورگر و جاوا اسکریپت InterOp 94. Browser Storage & Javascript InterOp

• 96. از ظرف DI برای حفظ وضعیت اجزای WASM استفاده کنید 96. Use DI container to maintain states for WASM components

• 97. اشکال زدایی اجزای WebAssembly 97. Debug WebAssembly Components

• 98. سایر تفاوت ها 98. Other Differences

دسترسی به داده برای SSR یا تعامل با سرور Data Access for SSR or Server Interactivity

• 99. نمای کلی دسترسی به DB از SSR یا Server Interactivity 99. Overview of accessing DB from SSR or Server Interactivity

• 100. برای استفاده از EF Core بسته های NuGet را اضافه کنید 100. Add NuGet Packages for using EF Core

• 101. DBContext را ایجاد کنید 101. Create DBContext

• 102. رشته های اتصال را پیکربندی کنید و مهاجرت را اجرا کنید 102. Configure connection strings and run migration

• 103. ServersEFCoreRespository را پیاده سازی کنید 103. Implement the ServersEFCoreRespository

• 104. از مخزن مبتنی بر پلاگین استفاده کنید 104. Use the plugin based repository

دسترسی به داده برای Blazor با تعامل WebAssembly Data Access for Blazor with WebAssembly Interactivity

• 105. از WebAssembly به DB دسترسی پیدا کنید 105. Access DB from WebAssembly

• 106. Web API چگونه کار می کند 106. How Web API works

• 107. کد CRUD مدیریت سرور در WebAssembly آماده شده است 107. Prepared Server Management CRUD code in WebAssembly

• 108. پایگاه داده بیدرنگ Firebase را راه اندازی کنید 108. Setup Firebase Realtime Database

• 109. از Postman برای دسترسی به نقاط پایانی Web API استفاده کنید 109. Use Postman to access the Web API endpoints

• 110. فراخوانی API در سی شارپ 110. Invoke API in C#

• 111. بدن را در HttpRequest آماده کنید 111. Prepare Body in HttpRequest

• 112. مخزن Api را پیاده سازی کنید 112. Implement the Api Repository

احراز هویت و مجوز Authentication and Authorization

• 113. بررسی اجمالی - نحوه تأیید اعتبار در Blazor چگونه کار می کند 113. Overview - How athentication works in Blazor

• 114. همه سناریوهای احراز هویت 114. All authentication scenarios

• 115. احراز هویت در Blazor SSR 115. Authentication in Blazor SSR

• 116. ثبت نام کاربر 116. User Registration

• 117. فرآیند ورود 117. Login process

• 118. فرآیند مجوز 118. Authorization process

• 119. دسترسی به بلیط احراز هویت 119. Accessing the authentication ticket

• 120. احراز هویت در تعامل سرور در هر جزء صفحه 120. Authentication in Server Interactivity per page component

• 121. احراز هویت در WebAssembly Interactivity در هر جزء صفحه 121. Authentication in WebAssembly Interactivity per page component

• 122. احراز هویت در تعامل با سرور جهانی 122. Authentication in Global Server Interactivity

• 123. احراز هویت در Blazor Global WebAssembly Interactivity 123. Authentication in Blazor Global WebAssembly Interactivity

• 124. برنامه Blazor سمت سرور ما را ایمن کنید 124. Secure our server side Blazor app

• 125. مجوز مبتنی بر سیاست 125. Policy based authorization

پیش رندر در Blazor Pre-Rendering in Blazor

• 126. پیش رندر چیست و چرا 126. What is Pre-Rendering and Why

• 127. راه حل 1: از OnAfterRender استفاده کنید 127. Solution 1: Use OnAfterRender

• 128. راه حل 2: پیش رندر را غیرفعال کنید 128. Solution 2: Disable Pre-Rendering

• 129. راه حل 3: از PersistentComponentState استفاده کنید 129. Solution 3: Use PersistentComponentState

بخش پاداش BONUS SECTION

• سخنرانی پاداش Bonus Lecture