نحوه ایجاد یک کامپوننت ساده در Blazor چگونه است ؟

پاسخ هوش مصنوعی

برای ایجاد یک کامپوننت ساده در Blazor، می توانید از مراحل زیر پیروی کنید:

1. ابتدا یک فایل جدید با پسوند .razor ایجاد کنید. به عنوان مثال، MyComponent.razor.

2. در این فایل، کد زیر را قرار دهید:

@code {
    private string message = "سلام از کامپوننت Blazor!";
}
@message

3. اکنون می توانید این کامپوننت را در هر صفحه یا کامپوننت دیگر استفاده کنید. کافیست آن را به شیوه زیر در یک فایل .razor دیگر فراخوانی کنید:

با دنبال کردن این مراحل، شما یک کامپوننت ساده در Blazor ایجاد کرده اید که می توان آن را در پروژه تان استفاده کرد.

ایجاد یک کامپوننت در Blazor

• ابتدا یک پروژه از نوع Blazor Server Side در ویژوال استودیو ایجاد کنید.
• در پوشه Pages یک پوشه جدید به نام Components ایجاد کنید.
• روی پوشه Components کلیک راست کنید و گزینه Add و سپس Razor Components را انتخاب کنید.
• یک نام به Component خود بدهید و دکمه Add را بزنید. (نام کامپوننت در این مثال FirstComponent.razor انتخاب شده است.)

در کامپوننت FirstComponent کدهای زیر را بنویسید :

<div class="panel panel-default">
    <div class="panel-heading alert alert-info" style="text-align:center;">@Title</div>
    <div class="panel-body alert alert-success" style="text-align:center;">@Content</div>
</div>

@code {
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public string Content { get; set; }
}

همان طور که می بینید در این کامپوننت ما دو پارامتر هم به نام های Title و Content تعریف کردیم که می توان این پارامترها را موقع صدا زدن کامپوننت مقدار دهی کرد.

چگونه Component تعریف شده در Blazor را صدا بزنیم

خب حالا باید از کامپوننتی که بالا تعریف کردیم استفاده کنیم. استفاده از کامپوننت بسیار ساده است. کافیست در صفحه ای که قصد استفاده از کامپوننت را دارید دستور زیر را بنویسید :

<FirstComponent Title="عنوان" Content="متن دلخواه" />

در این مثال ما در صفحه index از این کامپوننت استفاده کرده ایم.

دانلود سورس

Razor Page چیست

کامپوننت در بلیزر چیست