با یک درس جدید از دوره آموزش تکنولوژی Blazor برای برنامه نویسان ASP.NET Web Forms از وبسایت پرووید در خدمت شما هستیم در همین ابتدای کار از شما خواهش میکنیم که در صورت مطالعه نکردن قسمتهای قبلی حتماً این کار را انجام بدهید چرا که در این آموزش درک کردن مطالب مطرح شده در هر درس نیازمند داشتن درک درستی از مطالب ارائه شده در دروس قبلی می باشد. ضمنا در صورت تمایل توصیه میکنیم از بسته ی آموزش ویدئویی شروع به کار با Blazor در ASP.NET Core و بسته ی آموزش ویدئویی بلیزر (Blazor) پیشرفته و ساخت برنامه های تجاری و بسته ی آموزش ویدئویی Authentication و Authorization در بلیزر (Blazor) وب سایت پرووید دیدن بفرمایید.
در این قسمت قصد داریم این بحث مربوط به Page ها و یا صفحات را در Blazor آغاز کرده و در قسمت های بعدی موضوعات متنوع و بسیار مفیدی را در این رابطه به شما ارائه بدهیم. احتمالاً میدانید که در فریم ورک ASP.NET Web Forms و اپلیکیشن هایی که با آن ساخته میشوند صفحاتی وجود دارند که با پسوند aspx تعریف می گردد، در واقع می توان چنین گفت که اپلیکیشنهای نوشته شده با ASP.NET Web Forms از Page هایی تشکیل گردیده اند که در فایل هایی با پسوند aspx قرار می گیرند هر کدام از این Page ها یک آدرس فیزیکی دارد که در پروژه لحاظ می گردد. به عبارت دیگر زمانی که یک Request از سمت مرورگر برای یکی از این Page ها وارد میشود بر اساس مسیر فیزیکی فایل مورد نظر آن Page انتخاب شده و محتوای مربوطه به صورت داینامیک بر روی سرور رندر و سپس به سمت مرورگر ارسال می گردد.این فرآیند رندر شدن هم هم محتوای HTML مربوط به Page و هم Server Control ها را در نظر میگیرد. برای یادگیری برنامه نویسی در ASP.NET Web Forms می توانید از بسته ی آموزش ویدئویی ASP.NET Web Forms و Entity Framework در قالب پروژه و برای یادگیری HTML می توانید از بسته ی آموزش ویدئویی HTML5 استفاده بفرمایید.
خوب حال بحث را با Blazor مقایسه میکنیم در تکنولوژی Blazor هر Page در برنامه در واقع در قالب یک کامپوننت پیاده سازی می شود در رابطه با کامپوننت ها در Blazor در ایجاد کردن Component های قابل استفاده مجدد با Blazor و استفاده کردن از کامپوننت ها و بررسی پارامترهای مربوط به آنها بیشتر صحبت کردیم. یک کامپوننت در Blazor به طور معمول در یک فایل با پسوند razor تعریف می گردد و می تواند یک و یا چندین Route و یا مسیر داشته باشد مکانیزم Routing به طور کامل Client-side و بدون درگیر کردن یک ServerRequest خاص انجام می پذیرد. روال انجام کار به این شکل است که مرورگر در ابتدا یک Request به Root Addressمربوط به اپلیکیشن ارسال کرده و سپس یک کامپوننت به نام Router که در اپلیکیشنهای Blazor تعریف میگردد، این Navigation Request را دریافت کرده و سپس آن را به سمت کامپوننتی ارسال می کند. در Blazor از مفهوم Deep Linking این نیز پشتیبانی می شود. مکانیزم Deep Linking زمانی اتفاق میافتد که مرورگر یک Request را به یک Route خاص از برنامه و نه لزوماً Root برنامه ارسال میکند. Request های مربوط به این Deep Linking ها که به سمت سرور ارسال می شوند، به برنامه نوشته شده با Blazor اصطلاحات Route شده و سپس به سمت کامپوننت مناسب ارسال می گردند. برای بررسی هر چه بهتر محتوای Page ها در یک اپلیکیشن نوشته شده با ASP.NET Web Forms میتوانید نگاهی به Markup زیر بیندازید:
<%@ Page Title="Name" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Name.aspx.cs" Inherits="WebApplication1.Name" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div>
What is your name?<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" ="Button1_Click" />
</div>
<div>
<asp:Literal ID="Literal1" runat="server" />
</div>
</asp:Content>
ضمناً فایل CodeBehind مربوط به این Page با نام Name.aspx.cs نیز در کد زیر نشان داده شده است :
public partial class Name: System.Web.UI.Page {
protected void Button1_Click1(object sender, EventArgs e) {
Literal1.Text = "Hello " + TextBox1.Text;
}
}
معادل همین فایل در یک اپلیکیشن ایجاد شده با Blazor شبیه به کد زیر خواهد بود:
@page "/Name" @layout MainLayout
<div> What is your name?<br /> <input @bind="text" /> <button @="OnClick">Submit</button> </div>
<div> if (name != null) { Hello @name } </div>
@code { string text; string name; void () { name = text; } }
به منظور ایجاد کردن یک Page در Blazor ابتدا یک کامپوننت را ایجاد کرده و سپس یک Razor Directive به شکل @page را به Route مربوط به آن کامپوننت اضافه می کنیم . دستور @page یک پارامتر تک دریافت میکند که در واقع Route Template مورد نظر برای آن کامپوننت خواهد بود. کدی که در قسمت زیر مشاهده میکنید این موضوع را نشان می دهد:
دقت کنید که این پارامتر مربوط به Route Template اجباری است علیرغم آنچه که در فریم ورک ASP.NET Web Forms داشتیم Route مربوط به یک کامپوننت در Blazor بر اساس مکان فایل مورد نظر تشخیص داده نمی شود. البته ممکن است که این قابلیت در ادامه به Blazor اضافه گردد. ضمناً نحوه نوشتن Route Template در Blazor شبیه به نحوه انجام دادن همین کار برای ASP.NET Web Forms میباشد.
پارامترهای مربوط به Route در Template با استفاده از علامت {} تنظیم می گردد. فریم ورک Blazor به صورت خودکار مقادیر مربوط به Route که اصطلاحاً با نام Route Value شناخته میشوند را به پارامترهای مربوط به کامپوننت اصطلاحاً Bind می کند. این کار زمانی اتفاق میافتد که این دو مورد نام یکسانی داشته باشند. ضمنا دقت کنید که در این راستا Blazor به حروف کوچک و بزرگ اهمیتی نمی دهد. کد زیر این موضوع را نشان می دهد:
@page "/product/{id}"
<h1>Product @Id</h1>
@code { [Parameter] public string Id { get; set; } }
ضمنا میتواند در صورت تمایل بر روی مقادیر مجاز مربوط به پارامترهای Route محدودیتهایی را اعمال کرد. برای مثال در کد زیر تنظیم کردهایم که پارامتر ورودی که ID نام دارد، حتماً باید از نوع داده int باشد در رابطه با نوع های داده ای مختلف در بسته ی آموزش ویدئویی سی شارپ دات نت بیشتر صحبت کردهایم.
@page "/product/{id:int}"
<h1>Product @Id</h1>
@code { [Parameter] public int Id { get; set; } }
این بحث را در همین قسمت به پایان می رسانیم و در درس بعدی میخواهیم در Router به عنوان یکی از کامپوننت های Blazor صحبت کنیم.
منبع: وبسایت پرووید