دوره آموزشی چهار ساعته Blazor Hybrid
Learn Blazor Hybrid - Full Course for Beginners | Build cross-platform apps in C#
Let's start our journey together to build beautiful native cross-platform apps for iOS, Android, macOS, and Windows with Blazor Hybrid, .NET MAUI, C#, and Visual Studio! In this full workshop, I will walk you through everything you need to know about .NET MAUI and building your very first app. You will learn the basics including how to build user interfaces with Razor, how to show data from the internet, how to navigate between pages and combine .NET MAUI pages with Razor pages, access platform features like geolocation, and theme your app for light theme and dark theme. This course has everything you need to learn the basics and set you up for success when building apps with Blazor Hybrid!
Chapters:
00:00:00 - Intro to the Blazor Hybrid Workshop
00:04:28 - What is Blazor Hybrid & How to Install
00:06:51 - First Blazor Hybrid App & Architecture
00:21:40 - Get Code to Build Your First Blazor Hybrid App
00:26:38 - Blazor Hybrid Project Walkthrough
00:39:22 - Start to Build First Blazor Hybrid App
01:03:10 - Event Handling, Data Binding and Parameters (Slides)
01:09:00 - Add Monkey Data & Fluent UI Blazor Components
01:32:08 - Navigation, NavigationManager, .NET MAUI Pages (Slides)
01:39:19 - Navigation with NavigationManager
01:52:39 - Navigation with NavLinks
01:57:21 - Add .NET MAUI Pages & Components
02:21:11 - Access Platform Functionality (Slides)
02:27:57 - Check Network Connectivity
02:38:04 - Get User Location with Geolocation
02:49:09 - Integration with Other Apps
02:57:42 - App Theming, Light Theme, Dark Theme (Slides)
03:05:36 - JavaScript Interoperability with IJSRuntime
03:20:48 - Theming FluentUI Blazor Components
03:26:05 - Style Status Bar with .NET MAUI Community Toolkit
03:39:00 - .NET MAUI Light & Dark Theme with AppThemeBinding
03:42:58 - Sharing State & Creating Reusable Components (Slides)
03:47:27 - Implement Shared State Blazor Hybrid & .NET MAUI
04:02:47 - Create Reusable Razor Components
04:08:31 - CONGRATULATIONS!
NET Core 3.1.10. منتشر شد
.NET Core 3.1.10 - November 10, 2020
The .NET 3.1.10 and .NET SDK 3.1.110 releases are available for download. The latest 3.1 release is always listed at .NET 3.1 Releases.
Downloads
| SDK Installer1 | SDK Binaries1 | Runtime Installer | Runtime Binaries | ASP.NET Core Runtime | Windows Desktop Runtime |
---|---|---|---|---|---|---|
Windows | x86 | x64 | x86 | x64 | Arm | x86 | x64 | x86 | x64 | Arm | x86 | x64 | Arm | Hosting Bundle 2 | x86 | x64 |
macOS | x64 | x64 | x64 | x64 | x64 1 | - |
Linux | Snap Install | x64 | Arm | Arm64 | x64 Alpine | - | x64 | Arm | Arm64 | x64 Alpine | Arm64 Alpine | x64 1 | Arm 1 | Arm64 1 | x64 Alpine | Arm64 Alpine | - |
RHEL6 | - | x64 | - | x64 | - | |
| Checksums | Checksums | Checksums | Checksums | Checksums | Checksums |
خطای 500.19
این خطا زمانی رخ میدهد که ماژول هاستینگ ASP.NET Core، توسط IIS شناسایی نشده باشد. نصب مجدد آن این مشکل را برطرف میکند.
لیست تمام ماژولهای هاستینگ را همواره در اینجا میتوانید پیدا کنید.
خطای 502.5 و یا گاهی از اوقات 502
باید دقت داشته باشید که اگر تنظیم disableStartUpErrorPage در IIS فعال باشد (قابل افزودن به تگ aspNetCore تنظیمات وب کانفیگ ذیل)، صرفا خطای 502 را دریافت میکنید.
این خطا به معنای شکست در اجرای ماژول هاستینگ ASP.NET Core است و ممکن است به یکی از دلایل ذیل ایجاد شده باشد:
الف) در حین اجرای برنامهی شما، استثنایی در کدهای فایل آغازین startup.cs برنامه، رخ دادهاست.
ب) پورت مورد استفادهی برنامه، توسط پروسهی دیگری در حال استفاده است.
ج) برنامهی شما برای SDK با نگارش 1.1.2 تنظیم و کامپایل شدهاست؛ اما بر روی سرور حداکثر، SDK نگارش 1.1.1 نصب شدهاست.
د) ممکن است پروسهی IIS قادر به یافتن و حتی اجرای dotnet.exe نباشد.
برای لاگ کردن مورد «الف»، باید لاگ کردن خطاهای برنامه را در web.config آن فعالسازی کنید:
<system.webServer> <handlers> <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" /> </handlers> <aspNetCore processPath="dotnet" arguments=".\MyApp.dll" stdoutLogEnabled="true" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="true" /> </system.webServer>
- اگر این مورد به مسیر logs\stdout\. تنظیم شدهاست، باید پوشهی logs را در ریشهی پروژه به صورت دستی ایجاد کنید؛ و گرنه IIS آنرا به صورت خودکار ایجاد نخواهد کرد.
- کاربر App Pool برنامه (با نام پیشفرض « IIS AppPool\DefaultAppPool») باید دسترسی نوشتن در این پوشه را داشته باشد؛ وگرنه فایل لاگی در آن ایجاد نخواهد شد.
- همچنین اگر با رعایت تمام این موارد، محتوای این فایل تولید شده باز هم خالی بود، یکبار IIS را ریاستارت کنید. ممکن است IIS کار نوشتن در فایل لاگ را تمام نکرده باشد و با این کار مجبور به تکمیل و بستن فایل میشود.
- برای حالت «ب» قبل از هر تغییری، یکبار کل سرور را ریاستارت کنید.
- برای مورد «ج» نیز باید آخرین SDK هاستینگ را بر روی سرور نصب کنید.
لیست تمام SDKهای نصب شدهی بر روی سیستم را در مسیر «C:\Program Files\dotnet\sdk» میتوانید مشاهده کنید. همچنین دستور «dotnet --list-sdks» نیز لیست SDKهای نصب شده را نمایش میدهد.
- برای رفع حالت «د»، نیاز است این موارد را بررسی کنید:
1- «Load User Profile» را به true تنظیم کنید.
برای اینکار به قسمت Application pools مراجعه کرده و تنظیمات پیشرفتهی App pool مورد استفاده را ویرایش کنید (تصویر فوق).
این تنظیم برای دائمی کردن کلیدهای رمزنگاری برنامههای ASP.NET Core نیز ضروری است و باید جزو چک لیست نصب برنامههای ASP.NET Core قرار گیرد.
2- مورد «د» حتی میتواند به علت عدم تعریف مسیر «C:\Program Files\dotnet\» در path ویندوز باشد. برای این منظور دستور env:path$ را در power shell اجرا کنید و بررسی کنید که آیا این مسیر در خروجی آن موجود است یا خیر؟ اگر نبود، پس از اضافه کردن آن به path ویندوز، باید یکبار IIS را هم ریست کنید تا این تنظیمات جدید را بخواند.
3- مورد «د» ممکن است به علت اشتباه تنظیم پوشهی اصلی برنامه در IIS نیز باشد. یعنی dotnet.exe قادر به یافتن اسمبلیهای برنامه نیست.
4- برای رفع مورد «د» دو دسترسی دیگر را نیز باید بررسی کنید:
الف) آیا کاربر Application pool برنامه به پوشهی برنامه دسترسی read & execute را دارد یا خیر؟
ب) آیا کاربر Application pool برنامه به پوشهی C:\Program Files\dotnet دسترسی read & execute را دارد یا خیر؟
اگر خیر، نحوهی دسترسی دادن به آنها به صورت زیر است:
Right click on the folder -> Properties -> Security tab -> Click at Edit button -> Enter `IIS AppPool\DefaultAppPool` user (IIS AppPool\<app_pool_name>) -> Click at Check names -> OK -> Then give it `read & execute` or other permissions.
خطای 502.3 و یا گاهی از اوقات 500
این خطا به صورت خلاصه به معنای «Bad Gateway: Forwarder Connection Error» است و زمانی رخ میدهد که پروسهی dotnet.exe به درخواست رسیده شده یا پاسخی ندادهاست (مشاهده خطای 0x80072EE2 یا ERROR_WINHTTP_TIMEOUT) و یا بیش از اندازه این پاسخ دهی طول کشیدهاست (این تنظیمات را در configuration editor میتوانید مشاهده کنید که در حقیقت همان تگ aspNetCore در تنظیمات وب کانفیگ فوق است).
برای دیباگ بهتر این مورد نیاز است علاوه بر تنظیم web.config فوق، به فایل appsettings.json مراجعه کرده و سطح پیش فرض لاگ کردن اطلاعات را که warning است به information تغییر دهید:
"Console": { "LogLevel": { "Default": "Information" } }
و یا اگر پردازشی دارید که بیش از 2 دقیقه طول میکشد (مطابق تنظیمات تصویر فوق)، میتوانید مقدار request time out را بیشتر کنید.
خطای 0x80004005 : 80008083
Application ‘<IIS path>’ with physical root ‘<Application path>’ failed to start process with commandline ‘”dotnet” .\MyApp.dll’, ErrorCode = ‘0x80004005 : 80008083.
این خطا زمانی رخ میدهد که برنامهی خود را ارتقاء داده باشید، اما ماژول هاستینگ ASP.NET Core را بر روی سرور به روز رسانی نکرده باشید.
خطای 500.19
HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed because the related configuration data for the page is invalid.
برای اینکار ابتدا IIS را متوقف کنید. سپس SDK جدید را نصب و پس از آن IIS را مجددا راه اندازی نمائید.
خطای 503
برنامه اجرا نشده و سطر ذیل در Event Viewer ویندوز قابل مشاهده است:
The Module DLL C:\WINDOWS\system32\inetsrv\aspnetcore.dll failed to load. The data is the error.
پروژه SimpleIdServer
SimpleIdServer is an open source framework enabling the support of OPENID, OAUTH2.0, SCIM2.0, UMA2.0, FAPI and CIBA. It streamlines development, configuration and deployment of custom access control servers. Thanks to its modularity and extensibility, SimpleIdServer can be customized to the specific needs of your organization for authentication, authorization and more.
Developers can enforce Authentication middleware onto incoming requests by adding the AddAuthentication() middleware to the service pipeline. Apart from JWT Bearer authentication middleware which focuses on validating Jwt token header in incoming http requests and OpenId middlewares which validate Users and sets up Session Cookies in web applications
Alternate Keys در Entity Framework 7
ارسال ایمیل در ASP.NET Core
using (var client = new SmtpClient ()) { client.ServerCertificateValidationCallback = (s,c,h,e) => true; client.CheckCertificateRevocation = false; // ... }
NET Core 2.0.3. منتشر شد
ایجاد یک پروژهی Blazor WASM جدید
یک پوشهی جدید دلخواه را به نام BlazorWasmSQLite ایجاد کرده و با اجرای دستور dotnet new blazorwasm، یک پروژهی Blazor Web Assembly خالی جدید را در آن آغاز میکنیم. همانطور که از دستور نیز مشخص است، این پروژه از نوع hosted که به همراه Web API هم هست، نمیباشد.
افزودن Context و مدل EF-Core به برنامه
مدل برنامه به صورت زیر در پوشهی Models آن قرار میگیرد:
namespace BlazorWasmSQLite.Models; public class Car { public int Id { get; set; } public string Brand { get; set; } public int Price { get; set; } }
using Microsoft.EntityFrameworkCore; using BlazorWasmSQLite.Models; namespace BlazorWasmSQLite.Data; public class ClientSideDbContext : DbContext { public DbSet<Car> Cars { get; set; } = default!; public ClientSideDbContext(DbContextOptions<ClientSideDbContext> options) : base(options) { } }
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly"> <ItemGroup> <!-- EF Core and Sqlite --> <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="6.0.1" /> </ItemGroup> </Project>
using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using BlazorWasmSQLite; using Microsoft.EntityFrameworkCore; using BlazorWasmSQLite.Data; var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add<App>("#app"); builder.RootComponents.Add<HeadOutlet>("head::after"); builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); // Sets up EF Core with Sqlite builder.Services.AddDbContextFactory<ClientSideDbContext>(options => options .UseSqlite($"Filename=DemoData.db") .EnableSensitiveDataLogging()); await builder.Build().RunAsync();
ثبت تعدادی رکورد در بانک اطلاعاتی
در ادامه سعی میکنیم در فایل Index.razor، تعدادی رکورد را به بانک اطلاعاتی اضافه کنیم:
@page "/" @using Microsoft.Data.Sqlite @using Microsoft.EntityFrameworkCore @using BlazorWasmSQLite.Data @using BlazorWasmSQLite.Models <PageTitle>Index</PageTitle> <h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" /> @code { [Inject] private IDbContextFactory<ClientSideDbContext> _dbContextFactory { get; set; } = default!; protected override async Task OnInitializedAsync() { await using var db = await _dbContextFactory.CreateDbContextAsync(); await db.Database.EnsureCreatedAsync(); // create seed data if (!db.Cars.Any()) { var cars = new[] { new Car { Brand = "Audi", Price = 21000 }, new Car { Brand = "Volvo", Price = 11000 }, new Car { Brand = "Range Rover", Price = 135000 }, new Car { Brand = "Ford", Price = 8995 } }; await db.Cars.AddRangeAsync(cars); await db.SaveChangesAsync(); } await base.OnInitializedAsync(); } }
اولین سعی در اجرای برنامه
در ادامه سعی میکنیم تا برنامه را اجرا کنیم. با خطای زیر متوقف خواهیم شد:
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: The type initializer for 'Microsoft.Data.Sqlite.SqliteConnection' threw an exception. System.TypeInitializationException: The type initializer for 'Microsoft.Data.Sqlite.SqliteConnection' threw an exception. ---> System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation. ---> System.DllNotFoundException: e_sqlite3 at SQLitePCL.SQLite3Provider_e_sqlite3.SQLitePCL.ISQLite3Provider.sqlite3_libversion_number()
رفع مشکل کار با SQLite با کامپایل ویژهی آن
برای دسترسی به کدهای native در Blazor WASM و مرورگر، باید آنها را توسط کامپایلر emcc به صورت زیر کامپایل کرد:
$ git clone https://github.com/cloudmeter/sqlite $ cd sqlite $ emcc sqlite3.c -shared -o e_sqlite3.o
مرحلهی بعد، معرفی این object file تولید شده به برنامه است. برای اینکار ابتدا باید dotnet workload install wasm-tools را نصب کرد (مهم). سپس به فایل csproj برنامه مراجعه کرده و فایل e_sqlite3.o را به آن معرفی میکنیم:
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly"> <ItemGroup> <!-- EF Core and Sqlite --> <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="6.0.1" /> <NativeFileReference Include="Data\e_sqlite3.o" /> </ItemGroup> </Project>
سعی در اجرای مجدد برنامه
پس از نصب wasm-tools و ذکر NativeFileReference فوق، اکنون اگر برنامه را اجرا کنیم، برنامه بدون مشکل اجرا خواهد شد:
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: BlazorWasmSQLite.zip