اپدیت های جدید در AspNetCore 5 preview 8

.NET 5  Preview 8  اکنون در دسترس و برای ارزیابی آماده است . 

موارد به روز شده و جدید این نسخه عبارت است از : 

• 1- تایید اعتبار و اعتبار سنجی Azure Active Directory با استفاده از Microsoft.Identity.Web
• 2- هر کامپوننتBlazor  می تواند استایل css خاص خودش را دارا باشد .
• 3- بارگزاری تنبل برای Blazor WebAssembly
• 4- پشتیبانی از globalization
• 5- InputRadio جدید و توکار در blazor component
• 6- متد جدید UI focus برای فکوس کردن بر روی عناصر
• 7- شما می توانید اشیای نمونه سازی شده را کنترل کنید
• 8- کنترل و دینامیک کردن تگ های Title, Link در head
• 9- ذخیره امن وضعیت فعلی کاربر
• 10- بایند کردن مدل ها و اعتبار سنجی با سی شارپ 9
• 11- کنترل بیشتر روی RouteValue و endpoint ها
• 12- رفرش و تازه سازی با استفاده از ساعت dotnet
• 13- قابلیت تغییر ظاهر console log در مرورگر
• 14- قابلیت تغییر ظاهر console log در مرورگر برای خروجی های json

برای شروع  NET 5 Preview 8 .NET 5 SDK. را نصب کنید.

برای استفاده از NET 5 Preview 8. شما باید از Visual Studio 2019 16.8 Preview 2 یا نسخه جدیدتر استفاده کنید. .NET 5 همچنین با آخرین پیش نمایش Visual Studio برای Mac پشتیبانی می شود. برای استفاده از .NET 5 با Visual studio code ، آخرین نسخه از پسوند C# را نصب کنید.

یک پروژه موجود را ارتقا دهید

برای به روزرسانی یک برنامه موجود ASP.NET Core از .NET 5 Preview 7 به .NET 5 Preview 8

Update all Microsoft.AspNetCore.* package references to 5.0.0-preview.8.*.
Update all Microsoft.Extensions.* package references to 5.0.0-preview.8.*.
Update System.Net.Http.Json package references to 5.0.0-preview.8.*.

تایید اعتبار و اعتبار سنجی Azure Active Directory با استفاده از Microsoft.Identity.Web

اکنون الگوهای پروژه ASP.NET Core با Microsoft.Identity.Web ادغام می شوند تا احراز هویت را با Azure Activity Directory  انجام دهند .  بسته Microsoft.Identity.Web تجربه بهتری برای احراز هویت از طریق Azure AD و همچنین راهی آسان تر برای دسترسی به منابع Azure از طرف کاربران خود ، از جمله Microsoft Graph فراهم می کند .

هر کامپوننت Blazor می تواند استایل  css  خاص خودش را دارا باشد .

شما می توانید استایل و css های خاص و مربوط به هر کامپوننت blazor را بدون تداخل و تاثیر گذاری روی بقیه استایل ها تعریف کنید . البته باید فایل استایل هم نام کامپوننت و پسوند razor.css باشد .

به عنوان مثال در صورتی که کامپوننتی با نام MyComponent.razor وجود داشته باشد .

MyComponent.razor

<h1>My Component</h1>
<ul class="cool-list">
    <li>Item1</li>
    <li>Item2</li>
</ul>

سپس می توانید یک MyComponent.razor.css برای MyComponent تعریف کنید

MyComponent.razor.css

h1 {
    font-family: 'Comic Sans MS'
}
.cool-list li {
    color: red;
}

این استایل پس از رندر شدن فقط روی کامپوننت خودش اعمال می شود . در کد بالا تگ h1 روی عناصر و کامپوننت های دیگر اثر ندارد . 

برای نوشتن یک انتخابگر در سبک های خاص کامپوننت  که بر child components تأثیر می گذارد ، از ترکیب ::deep استفاده کنید.

.parent ::deep .child {
    color: red;
}

با استفاده از  ::deep ، فقط انتخابگر کلاس .parent محدود شده به component انتخابگر کلاس .child محدود نیست ، و با محتوای child components مطابقت دارد.

blazor  از سبک های sass  و less پشتیبانی نمی کند . 

بارگزاری تنبل برای Blazor WebAssembly

بارگذاری تنبل شما را قادر می سازد با به تعویق انداختن بارگیری وابستگی های برنامه خاص تا زمان نیاز ، زمان بارگذاری برنامه Blazor WebAssemble خود را بهبود ببخشید. اگر برنامه Blazor WebAssemble شما وابستگی زیادی داشته باشد که فقط برای قسمتهای خاصی از برنامه استفاده می شود ، بارگذاری تنبل ممکن است مفید باشد.

برای به تأخیر انداختن بارگیری و استفاده از آن  باید اینترفیس LazyAssemblyLoader را به صفحه تزریق کنید .

مجموعه هایی که برای بارگذاری تنبل علامت گذاری شده اند باید قبل از استفاده توسط برنامه بارگذاری شوند. برای نصب بارگزاری تنبل در هنگام اجرا ، از سرویس LazyAssembleLoader استفاده کنید

@inject LazyAssemblyLoader LazyAssemblyLoader
@code {
    var assemblies = await LazyAssemblyLoader.LoadAssembliesAsync(new string[] { "Lib1.dll" });
}

پشتیبانی از globalization

به روزرسانی و اپدیت جدید  International Components for Unicode  در  .net5

InputRadio جدید در blazor component

در به روز رسانی جدید blazor هم اکنون InputRadio  و  InputRadioGroup داخلی و توکار معرفی شده است که می تواند به داده ها اتصال و اعتبار سنجی یکپارچه را داشته باشد . 

Opinion about blazor:
<InputRadioGroup @bind-Value="survey.OpinionAboutBlazor">
    @foreach (var opinion in opinions)
    {
        <div class="form-check">
            <InputRadio class="form-check-input" id="@opinion.id" Value="@opinion.id" />
            <label class="form-check-label" for="@opinion.id">@opinion.label</label>
        </div>
    }
</InputRadioGroup>

 متد جدید UI focus برای فکوس کردن بر روی عناصر

یک روش راحت برای فکوس بر روی عناصر و ورودی ها به مثال زیر توجه کنید در صورتی که روی دکمه کلیک شود فکوس بر روی input text  قرار می گیرد .

<button @onclick="() => textInput.FocusAsync()">Set focus</button>
<input @ref="textInput"/>

اشیای نمونه سازی شده را کنترل کنید

شما می توانید با استفاده از رابط اینترفیس IComponentActivator و پیاده سازی از ان نحوه نمونه سازی از اجزای blazor component  را سفارشی کنید  .

کنترل و دینامیک کردن تگ های Title, Link در html head

استفاده از کامپوننت های Title, Link  و Meta بصورت دینامیک و برنامه نویسی می توانید مقادر پویا به صفحات خود اضافه کنید . 

@if (unreadNotificationsCount > 0)
{
    var title = $"Notifications ({unreadNotificationsCount})";
    <Title Value="title"></Title>
    <Link rel="icon" href="icon-unread.ico" />
}

ذخیره امن وضعیت فعلی کاربر

در برنامه های Blazor Server ، ممکن است بخواهید وضعیت فعلی کاربر و  برنامه را در محل ذخیره local یا session حفظ کنید تا در صورت لزوم ،  بعداً بتوانید از انها استفاده کنید . هنگام ذخیره وضعیت برنامه در مرورگر کاربر باید اطمینان حاصل کنید  که دستکاری نشده است.

Blazor در .NET 5 با ارائه دو سرویس جدید ProtectedLocalStorage و ProtectedSessionStorage به حل این مشکل کمک می کند. این سرویس ها به ترتیب به شما در ذخیره سازی محلی و ذخیره جلسه و محافظت از انها به شما کمک می کند . در ادامه نحوه استفاده ذکر شده است .

افزودن پکیج زیر به پروژه

Microsoft.AspNetCore.Components.Web.Extensions

فراخوانی سرویس ان در فایل پیکر بندی startup.cs

services.AddProtectedBrowserStorage()

تزریق وابستگی ها به صفحه و استفاده 

@inject ProtectedLocalStorage ProtectedLocalStorage
@inject ProtectedSessionStorage ProtectedSessionStorage
private async Task IncrementCount()
{
    await ProtectedLocalStorage.SetAsync("count", ++currentCount);
}

بایند کردن مدل ها و اعتبار سنجی با سی شارپ 9

در سی شارپ 9 یک نوع جدیدی به نام record معرفی شده است که می توان از ان در بایند اطلاعات در MVC controller  یا Razor Page از ان استفاده کرد و یک روش عالی برای مدل سازی داده ها می باشد .

برای مثال کنترل person در زیر از روش record برای مدل سازی و اعتبار سنجی استفاده کرده است .

public record Person([Required] string Name, [Range(0, 150)] int Age);

public class PersonController
{
   public IActionResult Index() => View();

   [HttpPost]
   public IActionResult Index(Person person)
   {
          // ...
   }
}

Person/Index.cshtml

@model Person
Name: <input asp-for="Model.Name" />
<span asp-validation-for="Model.Name" />

Age: <input asp-for="Model.Age" />
<span asp-validation-for="Model.Age" />

کنترل بیشتر روی RouteValue و endpoint ها

در  asp.net core 3.1 با استفاده از DynamicRouteValueTransformer می توان مسیر یابی MVC controller action و razor page را انجام داد . در .net5 کنترل بیشتر و فیلتر کردن endpoint ها و همچنین ارسال وضعیت فعلی به مسیر یاب اضافه شده است .

رفرش و تازه سازی با استفاده از ساعت dotnet

در .net5  در صورتی dotnet watch اجرا باشد و شما تغییری روی کد بدهید به طور خودکار مرورگر پیش فرض اجرا و تغییرات شما روی کد اعمال خواهد شد این به بدین معنی است شما می توانید پروژه خود را روی ویراشگر دلخواه خود باز کنید و dotnet watch را اجرا کنید و روی کد های خود کار کنید . به طور خودکار rebuilding و restarting  و reloading  برنامه شما انجام خواهد شد

قابلیت تغییر ظاهر console log در مرورگر

با استفاده از کتابخانه  Microsoft.Extensions.Logging اکنون توسعه دهندگان می توانند برای اعمال کنترل کامل بر قالب بندی و رنگ آمیزی خروجی کنسول ، از یک ConsoleFormatter سفارشی استفاده کنند.

قابلیت تغییر ظاهر console log در مرورگر برای خروجی های json

علاوه بر قالب بندی  و رنگ امیزی سفارشی console log  شما می توانید فرمت و قالب بندی خروجی های json  را داشته باشید . می توانید از logger ساده پیش فرض به JSON تغییر وضعیت دهید ، قطعه زیر را به Program.cs خود اضافه کنید:

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
+       .ConfigureLogging(logging =>
+       {
+           logging.AddJsonConsole(options =>
+           {
+               options.JsonWriterOptions = new JsonWriterOptions() { Indented = true };
+           });
+       })
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.UseStartup<Startup>();
        });

پیامهای ورودی که به کنسول ارسال می شوند ، پس از فعال شدن ، اکنون قالب JSON دارند.

{
  "EventId": 0,
  "LogLevel": "Information",
  "Category": "Microsoft.Hosting.Lifetime",
  "Message": "Now listening on: https://localhost:5001",
  "State": {
    "Message": "Now listening on: https://localhost:5001",
    "address": "https://localhost:5001",
    "{OriginalFormat}": "Now listening on: {address}"
  }
}

با نظرات خود ما را در تکمیل این مقاله کمک کنید