استفاده کردن از کامپوننت ها و بررسی پارامترهای مربوط به آنها

در این قسمت از وبسایت پرووید درس بعدی مربوط به دوره آموزش متنی و رایگان فریم ورک Blazor در ASP.NET Web Forms را به شما ارائه میدهیم. حتما توصیه می‌کنیم که قسمتهای قبلی مربوط به این آموزش را مطالعه کنید، علاوه بر این در صورت تمایل می توانید از بسته ی آموزش ویدئویی شروع به کار با Blazor در ASP.NET Core و بسته ی آموزش ویدئویی بلیزر (Blazor) پیشرفته و ساخت برنامه های تجاری و بسته ی آموزش ویدئویی Authentication و Authorization در بلیزر (Blazor) دیدن بفرمایید. در این قسمت می خواهیم در رابطه با استفاده کردن از Component های ساخته شده و همچنین پارامترهای مربوط به آن ها صحبت کنیم.

استفاده کردن از Component ها

گذشته از کد های معمول HTML، می‌توان از Component ها به عنوان بخشی از Rendering Logic مربوط به یک Component دیگر استفاده کرد Syntax مربوط به استفاده کردن از یک Component در Razor شبیه به استفاده کردن از یک User Control در ASP.NET Web Forms میباشند. Component ها با استفاده از Element Tag که همنام با Type Name مربوط به یک Component می باشد، مورد استفاده قرار می گیرند. برای مثال پس از تعریف کردن یک Component به نام Counter می‌توانیم از آن به شکل زیر استفاده کنید:

علیرغم اتفاقی که در ASP.NET Web Forms رخ می دهد، در Blazor Component ها دو ویژگی زیر را دارند:

• آنها از Element Prefix شبیه به asp: استفاده نمی کنند. این موضوع در ASP.NET اتفاق می افتند.
• آنها نیازی به رجیستر شدند بر روی Page و یا در فایل Web.Config را ندارند.

بهتر است که به Component های Razor شبیه به تایپ های معمولی در فریم ورک .Net فکر کنید چراکه آنها دقیقاً همین نیز هستند اگر اسمبلی حاوی یک Component رفرنس بشود آن Component ها به سادگی برای استفاده کردن در دسترس خواهند بود. برای استفاده کردن از Namespace مربوط به Component ها در Scope میتوان از دستور @using شبیه به قسمت زیر استفاده کرد:

@using MyComponentLib

<Counter />

همانطور که در پروژه‌های پیشفرض Blazor مشاهده می شود، معمول است که دستور @using را در فایل _Imports.razor قرار بدهیم.این موضوع باعث می‌شود که این Namespace ها به درون تمامی فایل های Razor موجود در یک Directory و یا Child Directory ها لحاظ بگردند. اگر Namespace مربوط به یک Component در Scope نباشد، با لحاظ کردن Type Name کامل یک Component می توانید از آن استفاده کنید. این موضوع در کد زیر نشان داده شده است:

بررسی کردن پارامترها در Component ها

احتمالاً می‌دانید که در ASP.NET Web Forms میتوانیم پارامترها و داده هایی را به کنترل ها با استفاده از Property های Public تحویل بدهیم برای یادگیری هرچه بهتر ASP.NET Web Forms می توانید از بسته ی آموزش ویدئویی ASP.NET Web Forms و Entity Framework در قالب پروژه استفاده کنید. این Property ها می توانند با استفاده از Attribute ها در کدهای Markup لحاظ بگردند و یا به طور مستقیم در کد برنامه تنظیم شوند. Component های Blazor نیز به شکلی مشابه کار می کند. تفاوت اصلی Property های مربوط به Component ها در Blazor استفاده کردن از [Parameter] به عنوان یک Attribute می باشد. برای یادگیری مباحث مربوط به Attribute ها در سی شارپ می توانید از بسته ی آموزش ویدئویی Attribute ها در سی شارپ دیدن کنید.

< h1 > Counter < /h1>

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

<button class = &quotbtn btn-primary&quot@ = &quotIncrementCount&quot > Click me < /button>

@code

{

int currentCount = 0;

[Parameter]

public int IncrementAmount { get; set; } = 1;

void IncrementCount()

{

currentCount+=IncrementAmount;

}

}

Component معمولی زیر که به نام Counter تعریف شده است، یک پارامتر به نام Increment Amount را تعریف کرده که با استفاده از آن می توانیم مقداری که این Component در شمارنده خود می‌بایست در هر دفعه افزایش لحاظ کند را تنظیم کنیم. کد زیر دقیقاً این موضوع را نشان می‌دهد:

حال برای استفاده کردن از این Component و تنظیم نمودن پارامتر آن در Blazor می توانیم شبیه به کد زیر عمل کنید:

این درس را در این قسمت به پایان می رسانیم و در درس بعدی در رابطه با موضوع بسیار مهم Event handler ها و Data binding در Blazor صحبت خواهیم کرد.