The Microsoft.Fast.Components.FluentUI
package provides a lightweight set of Blazor component wrappers around Microsoft's official FluentUI Web Components. The FluentUI Web Components are built on FAST and work in every major browser. To get up and running with Microsoft.Fast.Components.FluentUI
see the Getting Started section below.
اشتراکها
لیست تغییرات جدید ASP.NET Core 5.0
عناوین برخی از امکانات و بهبود ها
- MVC model binding improvements, including support for C# 9 record types
- Blazor Server & Blazor WebAssembly support and improvements
- Built-in OpenAPI and Swagger UI support for Web APIs
- SignalR Hub filters and parallel Hub invocations
- Azure AD authentication with MIcrosoft.Identity.Web
- Auto browser refresh with dotnet watch
- HTTP/2 and gRPC performance improvements
یک نکتهی تکمیلی: استفاده از فقط یک فضای نام برای کل پروژهی کتابخانهای
فرض کنید که یک کتابخانه از کامپوننتهای Blazor را با پوشهبندیهای مختلفی ایجاد کردهاید. هر کدام از این پوشهها به صورت خودکار به همراه فضای نام متناظر با نام آن پوشه هم خواهند بود. برای مثال اگر در پوشهی C:\Prog\BlazorLib\Folder1 کامپوننت Component1.razor قرار گیرد، فضای نام پیشفرض آن BlazorLib.Folder1 خواهد بود. این مساله توزیع و استفادهی از کامپوننتهای پوشهبندی شده را برای استفاده کنندگان ثالث مشکل میکند؛ چون باید به ازای هر پوشه، یک using را تعریف کنند. برای استفاده از تنها یک فضای نام در کل پروژه میتوان از روش
@namespace BlazorLib
اشتراکها
مقایسه React و Blazor
Web application development has evolved with the rise of new technologies and frameworks. Two of the most popular technologies for building interactive web applications are Blazor and React. In this article, we will compare Blazor and React and highlight their differences with examples.
Here’s the list of what’s new in this preview:
- New Razor features:
@attribute
,@code
,@key
,@namespace
, markup in@functions
- Blazor directive attributes
- Authentication & authorization support for Blazor apps
- Static assets in Razor class libraries
- Json.NET no longer referenced in project templates
- Certificate and Kerberos Authentication
- SignalR Auto-reconnect
- Managed gRPC Client
- gRPC Client Factory
- gRPC Interceptors
اشتراکها
سری آموزشی Blazor Server در داتنت 8
.NET Blazor Server Beginner to Advance
A complete Blazor Server Web App Development series in which we have developed a complete Job listing site along with admin panel, fully equipped with all the authentication and authorization features where Admin and Manager of the site have different authorities according to their roles.
In this series you will learn all the basic and advance concept of .NET Blazor Web Application Development and project management also as in this series we are tracking the progress of the project using the JetBrain’s YouTrack Project management tool and agile board.
تا اینجا به صورت بسیار مختصری با نحوهی مسیریابی برنامههای مبتنی بر Blazor توسط دایرکتیو page@ آشنا شدیم. برای مثال با داشتن تعریف زیر در ابتدای یک کامپوننت:
این کامپوننت جدید، صرفنظر از محل قرارگیری فایل آن که برای مثال در پوشهی Pages\LearnBlazor\LearnRouting.razor است، در مسیر https://localhost:5001/LearnRouting قابل دسترسی خواهد شد و برای تعریف مدخل منوی جدید آن، به کامپوننت Shared\NavMenu.razor مراجعه کرده و NavLink جدیدی را برای آن تعریف میکنیم:
در اینجا برچسب مدخل جدید تعریف شده، Learn Routing است و href لینک به آن، دقیقا به مسیریابی تعریف شده اشاره میکند.
یک نکته: مسیریابیهای تعریف شدهی در Blazor، حساس به حروف کوچک و بزرگ نیستند.
امکان تعریف بیش از یک مسیریابی برای یک کامپوننت نیز وجود دارد
در کامپوننتهای Blazor، محدودیتی از لحاظ تعداد بار تعریف دایرکتیو page@ وجود ندارد:
در این حالت میتوان در حین تعریف یک مسیریابی جدید، مسیریابی قبلی را نیز حفظ کرد. در اینجا کامپوننت فوق، از طریق هر دو آدرس https://localhost:5001/LearnRouting و https://localhost:5001/NewRouting تعریف شده، قابل دسترسیاست.
روش تعریف پارامترهای مسیریابی
تا اینجا اگر مسیر جدید https://localhost:5001/NewRouting/1/2 را درخواست کنیم چه اتفاقی رخ میدهد؟
در مورد نحوهی تعریف قالب «یافت نشد» فوق، در قسمت دوم بیشتر بحث شد.
برای تعریف پارامترهای مسیریابی، میتوان مسیریابی سومی را با پارامترهای مدنظر تعریف کرد که در مثال زیر، ذکر پارامتر دوم اختیاری است؛ چون سومین مسیریابی تعریف شده، امکان پردازش مسیرهایی با یک پارامتر را هم ممکن میکند:
سپس جهت دستیابی به مقادیر این پارامترها میتوان در قسمت کدهای کامپوننت، از خواص عمومی مزین شدهی با ویژگی Parameter استفاده کرد. در اینجا هر خاصیت تعریف شده، باید هم نام پارامتر تعریف شده باشد (و این مورد نیز غیر حساس به حروف بزرگ و کوچک است).
پس از این تعاریف، مسیریابی مانند https://localhost:5001/LearnRouting/1 با یک پارامتر و یا https://localhost:5001/LearnRouting/1/2 که به همراه دو پارامتر است، قابل فراخوانی میشود.
روش تعریف لینک به سایر کامپوننتهای Blazor
در ادامه کامپوننت جدید Pages\LearnBlazor\LearnAdvancedRouting.razor را اضافه میکنیم؛ با این محتوای آغازین:
بنابراین یک روش تعریف لینک به کامپوننتی دیگر، استفاده از کامپوننت NavLink است که href آن به مسیریابی مقصد اشاره میکند:
ارسال کوئری استرینگها به کامپوننتهای مختلف
پس از تعریف لینکی به کامپوننتی دیگر از درون یک کامپوننت، اکنون میخواهیم دو کوئری استرینگ param1 و param2 را نیز به آن ارسال کنیم:
در کامپوننت LearnAdvancedRouting برای دریافت این پارامترها، نیاز است آنها را از URL جاری استخراج کرد:
ابتدا سرویس توکار NavigationManager توسط دایرکتیو inject@ به کامپوننت جاری تزریق شدهاست که برای کار و دسترسی به آن، نیاز به تنظیمات ابتدایی خاصی نیست و پیشتر به مجموعهی سرویسهای برنامه افزوده شدهاست. برای نمونه توسط آن میتوان به Uri در حال پردازش، دسترسی یافت. اکنون که این Uri را داریم، با استفاده از متد HttpUtility.ParseQueryString میتوان به مجموعهی کوئری استرینگهای ارسالی، به صورت key/value دسترسی یافت و برای مثال آنها را در روال رویدادگردان OnInitialized، دریافت و با انتساب آنها به دو فیلد تعریف شده، سبب نمایش مقادیر دریافتی شد:
هدایت به یک کامپوننت دیگر با کد نویسی
فرض کنید میخواهیم دکمهای را اضافه کنیم که با کلیک بر روی آن، ما را به کامپوننت LearnRouting هدایت میکند:
در اینجا روشهای مختلف تعریف لینک به کامپوننتی دیگر را مشاهده میکنید. یا میتوان از کامپوننت NavLink استفاده کرد و یا از یک anchor tag استاندارد، که href هر دوی آنها به مسیریابی مقصد اشاره میکنند و یا میتوان با استفاده از سرویس NavigationManager و متد NavigateTo آن مانند کدهای فوق، سبب هدایت کاربر به صفحهای دیگر شد.
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-10.zip
@page "/LearnRouting" <h3>Learn Routing</h3>
<li class="nav-item px-3"> <NavLink class="nav-link" href="LearnRouting"> <span class="oi oi-list-rich" aria-hidden="true"></span> Learn Routing </NavLink> </li>
یک نکته: مسیریابیهای تعریف شدهی در Blazor، حساس به حروف کوچک و بزرگ نیستند.
امکان تعریف بیش از یک مسیریابی برای یک کامپوننت نیز وجود دارد
در کامپوننتهای Blazor، محدودیتی از لحاظ تعداد بار تعریف دایرکتیو page@ وجود ندارد:
@page "/LearnRouting" @page "/NewRouting" <h3>Learn Routing</h3>
روش تعریف پارامترهای مسیریابی
تا اینجا اگر مسیر جدید https://localhost:5001/NewRouting/1/2 را درخواست کنیم چه اتفاقی رخ میدهد؟
در مورد نحوهی تعریف قالب «یافت نشد» فوق، در قسمت دوم بیشتر بحث شد.
برای تعریف پارامترهای مسیریابی، میتوان مسیریابی سومی را با پارامترهای مدنظر تعریف کرد که در مثال زیر، ذکر پارامتر دوم اختیاری است؛ چون سومین مسیریابی تعریف شده، امکان پردازش مسیرهایی با یک پارامتر را هم ممکن میکند:
@page "/LearnRouting" @page "/NewRouting" @page "/LearnRouting/{parameter1}" @page "/LearnRouting/{parameter1}/{parameter2}" <h3>Learn Routing</h3> <p>Parameter1: @Parameter1</p> <p>Parameter2: @Parameter2</p> @code { [Parameter] public string Parameter1 { set; get; } [Parameter] public string Parameter2 { set; get; } }
پس از این تعاریف، مسیریابی مانند https://localhost:5001/LearnRouting/1 با یک پارامتر و یا https://localhost:5001/LearnRouting/1/2 که به همراه دو پارامتر است، قابل فراخوانی میشود.
روش تعریف لینک به سایر کامپوننتهای Blazor
در ادامه کامپوننت جدید Pages\LearnBlazor\LearnAdvancedRouting.razor را اضافه میکنیم؛ با این محتوای آغازین:
@page "/LearnAdvancedRouting" <h3>Learn Advanced Routing</h3>
در اینجا قصد نداریم لینک به این کامپوننت را به منوی اصلی برنامه اضافه کنیم؛ بلکه میخواهیم از طریق همان کامپوننت LearnRouting.razor ابتدای بحث، این مسیریابی را برقرار کنیم. برای اینکار یا میتوان از یک anchor tag استاندارد استفاده کرد و یا همانند کامپوننت Shared\NavMenu.razor، از کامپوننت NavLink استفاده نمود. NavLinkها نیز همانند anchor tagهای استاندارد HTML هستند، با این تفاوت که این کامپوننت، افزودن کلاس active مخصوص بوت استرپ را هم بر اساس فعال بودن مسیریابی مرتبط به آن، انجام میدهد ("class="nav-link active). به همین علت است که اگر گزینهی منوی خاصی را انتخاب کنیم، این گزینه با رنگ متمایزی نشان داده میشود:
بنابراین یک روش تعریف لینک به کامپوننتی دیگر، استفاده از کامپوننت NavLink است که href آن به مسیریابی مقصد اشاره میکند:
<NavLink class="btn btn-secondary" href="LearnAdvancedRouting"> <span class="oi oi-list-rich" aria-hidden="true"></span> Learn Advanced Routing </NavLink>
پس از تعریف لینکی به کامپوننتی دیگر از درون یک کامپوننت، اکنون میخواهیم دو کوئری استرینگ param1 و param2 را نیز به آن ارسال کنیم:
<NavLink class="btn btn-secondary" href="LearnAdvancedRouting?param1=value1¶m2=value2"> <span class="oi oi-list-rich" aria-hidden="true"></span> Learn Advanced Routing </NavLink>
@page "/LearnAdvancedRouting" @inject NavigationManager NavigationManager <h3>Learn Advanced Routing</h3> <h4>Parameter 1 : @Param1</h4> <h4>Parameter 2 : @Param2</h4> @code { string Param1; string Param2; protected override void OnInitialized() { base.OnInitialized(); var absoluteUri = new Uri(NavigationManager.Uri); var queryParam = System.Web.HttpUtility.ParseQueryString(absoluteUri.Query); Param1 = queryParam["Param1"]; Param2 = queryParam["Param2"]; } }
هدایت به یک کامپوننت دیگر با کد نویسی
فرض کنید میخواهیم دکمهای را اضافه کنیم که با کلیک بر روی آن، ما را به کامپوننت LearnRouting هدایت میکند:
@page "/LearnAdvancedRouting" @inject NavigationManager NavigationManager @*<NavLink href="/learnrouting" class="btn btn-secondary">Back to Routing</NavLink>*@ @*<a href="/learnrouting" class="btn btn-secondary">Back to Routing</a>*@ <button class="btn btn-secondary" @onclick="BackToRouting">Back to Routing</button> @code { private void BackToRouting() { NavigationManager.NavigateTo("learnrouting"); } }
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-10.zip
اشتراکها
بررسی NET CLI.
اشتراکها