|آموزش کامل Blazor Framework|ساخت اولین برنامه با Blazor Framework|

ساخت برنامه در Blazor Framework

Blazor

فریمورکی از خانواده .NET است که از C# یا Razor و HTML استفاده می کند و در مرورگر به همراه

WebAssembly

اجرا می شود.

فریمورک بلیزر

تمامی مزایای یک فریمورک وب برای واسط کاربری (UI) را بوسیله .NET در سمت کاربر و سرور (به صورت اختیاری) فراهم می کند.

پس از تنظیم محیط، می توانید

برنامه کاربردی Blazor

را از مسیر File > New در منو، و سپس انتخاب گزینه Project... بسازید.

در صفحه پروژه جدید، گزینه web موجود در سمت چپ را انتخاب کنید . سپس گزینه ASP.NET Core Web Application را در وسط صفحه انتخاب کنید. نام پروژه را در فیلد نام مشخص کنید و روی ok کلیک کنید.

در بخش New ASP.NET Core Web Application ،

قالب Blazor

را انتخاب و روی ok کلیک کنید. پس از ایجاد پروژه، برنامه کاربردی را ساخته و اجرا کنید.

1.

برنامه کاربردی

بلیزر

در مرورگر اجرا می شود و سه صفحه دارد: Home ، Counter و fetch data.

2.

این صفحات توسط سه فایل Razor در پوشه صفحات، پیاده سازی شده اند.

3.

هر کدام از این فایل ها یک مولفه

blazor

را پیاده سازی می کند که در مرورگر سمت کاربر کامپایل و اجرا می شود.

مزیت اصلی

وب اسمبلی

در مقایسه با جاوا اسکریپت، اداره کردن کارهای نیازمند به حافظه بالا (memory-rich) و چند رشته ای (multi-threading) به خوبی جاوا اسکریپت است.

Home Page

فریم ورک بلیزر

پیاده سازی home page در فایل Index.cshtml قرار دارد.

@ page "/"

< h1>Hello, world!< /h1>

Welcome to your new app.

< SurveyPrompt Title="How is Blazor working for you?" />

Counter page

صفحه شمارنده دارای یک دکمه می باشد که با هر بار انتخاب دکمه، شمارنده بدون تازه کردن(refresh) صفحه افزایش می یابد.

پیاده سازی صفحه شمارنده در فایل Counter.cshtml قرار دارد.

@ page "/counter"

< h1>Counter< /h1>

< p>Current count: @ currentCount< /p>

< button class="btn btn-primary" onclick="@ IncrementCount">Click me< /button>

@ functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

به طور معمول، این نوع رفتار سمت کاربر توسط جاوا اسکریپت (JavaScript) اداره می شود، اما در اینجا با استفاده از مولفه شمارنده (Counter) با C# و .NET پیاده سازی شده است.

Fetch data

نگاهی به پیاده سازی مولفه دسترسی به داده در فایل FetchData.cshtml بیاندازید.

@ page "/fetchdata"
@ inject HttpClient Http

< h1>Weather forecast< /h1>
  
< p>This component demonstrates fetching data from the server.< /p>

@ if (forecasts == null)
{
                    < p>< em>Loading...< /em>< /p>
}
else
{
                    < table class="table">
                    < thead>
                    < tr>
                    < th>Date< /th>
                    < th>Temp. (C)< /th>
                    < th>Temp. (F)< /th>
                    < th>Summary< /th>
            < /tr>
        < /thead>
                    < tbody>
            @ foreach (var forecast in forecasts)
            {
                    < tr>
                    < td>@forecast.Date.ToShortDateString()< /td>
                    < td>@forecast.TemperatureC< /td>
                    < td>@forecast.TemperatureF< /td>
                    < td>@forecast.Summary< /td>
                < /tr>
            }
        < /tbody>
     table>
}

@ functions {
    WeatherForecast[] forecasts;

    protected override async Task OnInitAsync()
    {
        forecasts = await Http.GetJsonAsync< WeatherForecast[]>("sample-data/weather.json");
    }

    class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF { get; set; }
        public string Summary { get; set; }
    }
}

از بخش @inject برای تزریق یک نمونه HttpClient به درون مولفه استفاده می شود. مولفه FetchData برای بازیابی داده JSON از سرور در زمان اولیه سازی (initialize) مولفه، از HttpClient تزریق شده استفاده می کند.