آموزش Blazor قسمت 1

Balzor یک کتابخانه سمت کاربر همانند React و Angular است. به عبارت دیگر Blazor یک چارچوب برای برنامه های مبتنی بر مرورگر (کلاینت) نوشته شده در دات نت است، که تحت WebAssembly اجرا می شود. این روش به شما تمام مزایای یک پلت فرم ثروتمند و یکپارچه مدرن (SPA) را می دهد، در حالی که اجازه می دهد از تمامی ویژگی های  دات نت استفاده کنید، از جمله به اشتراک گذاری کد در سرور و سرویس گیرنده.
می توان گفت که استفاده از Blazor باعث میشود تا بتوانید از امکانات چارچوب .Net در برنامه های سمت کاربر نیز استفاده کنید. از این موارد می توان به گزینه های زیر اشاره کرد:
نوشتن کد در c#  بجای نوشتن جاوااسکریپت
استفاده از پتانسیل بسیاز قدرتمند موجود در .Net برای ایجاد برنامه های سمت کاربر
امکان اشتراک اپلیکیشن بین سرور و برنامه های سمت کاربر
استقاده از امنیت، بهینه گی، و کتابخانه های دات نت
قابلیت توسعه در ویژوال استدیو و ماندگاری در Windows, Linux, and macOS

Component
برنامه های Blazor بر پایه کامپوننت ها بنا میشوند. یک کامپوننت در Blazor  در حقیقت  میتواند هر المانی در UI باشد. مانند یک صقحه، یک Dialog یا هر حتی داده های ورودی روی فرم ها.
درحقیقت کامپوننت ها، کلاس های Build شده دات نت هستند که در داخل اسمبلی های دات نت قرار گرفته اند و در برخورد با UI ها بسیار انعطاف پذیر هستند.
کامپوننت ها میتوان بصورت  Razor class libraries  یا  NuGet packages نیز توزیع و به اشتراک گذاشت.
معمولا کلاس کامپوننت با سینتکس razor در فایلی با پسوند .razor نوشته میشوند. به همین علت کامپوننت ها در Blazor را Razor Component هم می نامند.
همانطور که میدانید Razor ترکیبی از HTML با کد C # است که برای بهره وری توسعه دهنده ها طراحی شده است. Razor به شما این امکان را می دهد تا تگهای HTML و دستورات C #  را در یک صفحه داشته باشید و از مزایای IntelliSense نیز استفاده کنید. Razor Pages و MVC همچنین از Razor استفاده می کنند. برخلاف Razor Pages و MVC ، که حول یک مدل درخواست / پاسخ ساخته شده اند ، کامپوننت ها بطور خاص برای استفاده در سمت کلاینت ساخته شده اند.
بیایید برای اینکه دیدمان کمی به کامپوننت ها بازتر شود کد یک کامپوننت را بررسی کنیم. الیه نگران جزییات و یا مبهم بودن آن نباشید ما فقط برای آشنایی بیشتر اینکار را میکنیم و در دروس بعدی به صور مفصل تمامی موارد را شرح خواهینم داد. در زیر کدی را میبینید که کامپوننتی به نام Dialog.razor را تشریح میکند که خود داخل کامپوننتی دیگر قرار است استفاده شود.

<div>

    <h1>@Title</h1>

 

    @ChildContent

 

    <button @onclick="OnYes">Yes!</button>

</div>

 

@code {

    [Parameter]

    public string Title { get; set; }

 

    [Parameter]

    public RenderFragment ChildContent { get; set; }

 

    private void OnYes()

    {

        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");

    }

}

با یک نگاه ساده میتوان فهمید که دقیقا چه اتفاقی دارد می افتد. کد از دو بخش تشکیل شده است یکی کدهای Html

<div>

    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>

</div>

دیگری  کدهای C#

@code {

    [Parameter]

    public string Title { get; set; }

 

    [Parameter]

    public RenderFragment ChildContent { get; set; }

 

    private void OnYes()

    {

        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");

    }

}

همانطور که میبینید در کد Html  کدی داریم که قرار است عنوان صفحه را نمایش دهد
<h1>@Title</h1>
اما این عنوان از کجا میآید. علامت @ در ابتدا کلمه Title بیانگر این است که محتوای آن از کد C# ما استخراج خواهد شد.
در کد C# قسمتی داریم که خاصیتی به نتم Title را تعریف میکند

[Parameter]

    public string Title { get; set; }

همچنین اگر دقت کرده باشید میبینید که در کد HTml  دکمه ای بصورت زیذ تعریف شده که دارای رویدادی به نام OnYes است
<button @onclick="OnYes">Yes!</button>
این رویداد نیز در کد C# تعریف شده است

private void OnYes()

    {

        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");

اگر قبلا در Asp.Net MVC یا .Net Core یا کد Razor  کارکرده باشید مفاهیم بالا برای شما بدیهی است وگرنه نگران نباشید در فصول بعدی به تدریج با تمامی این مفاهیم آشنا میشویم.
حالا کامپوننت Index.razor را درنظر بگیرید که قصد داریم در آن کامپوننت Dialog را بازیابی کنیم

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Dialog Title="Blazor">

    Do you want to <i>learn more</i> about Blazor?

</Dialog>

خیلی ساده است! تگ <Dialog> بیانگر همان کامپوننت Dialog  است. خاصیت Title  در این تگ هم نام با خاصیت تعریف شده در کامپوننت Dialog است که مشخص میکند ما قصد مقدار دهی به همان خاصیت را داریم. محتوای بین تک <Dialog> هم در خاصیت ChildContent قرار میگیرد.
در نهایت اگر کامپوننت Index را در برنامه استفاده کنیم خروجی زیر را خواهیم داشت