مفهوم و کاربرد Event CallBack در Blazor چیست ؟

مفهوم و کاربرد Event CallBack در Blazor

به طور خیلی خلاصه و ساده می توان گفت عملیاتی که قبلا برای کنترل رویدادها در جاوااسکریپت انجام می شد حالا میتونیم توسط Event CallBack انجام بدیم. مثلا شما قصد دارید اگر روی یک Button کلیک شد پیغامی را نمایش دهید. خب قبلا برای انجام این کار باید از جی کوئری یا جاوااسکریپت استفاده می کردید اما در بلیزر برای انجام این کار از Event CallBack استفاده می شود.

خب برای اینکه مفهوم Event CallBack رو توضیح بدم ابتدا توضیحی باید در مورد Child Component ها بدم. همونطوری که میدونید بلیزر بر اساس کامپوننت ها کار میکنه. یعنی هر بخش از صفحه خودش یک Component هست. حالا کامپوننت ها هم میتونن به صورت Parent-Child باشن. به این معنی که یک کامپوننت ممکنه از یک یا چند کامپوننت کوچکتر تشکیل بشه. 

حالا با دونستن نکته بالا بهتر میشه مفهوم Event CallBack در Blazor رو توضیح داد. در ادامه با یک مثال به توضیح این مفهوم می پردازیم.

• ابتدا یک پروژه خالی از نوع Blazor Server ایجاد کنید.

• حالا یک Component به نام ParentComponent ایجاد کنید.

• یک پوشه به نام Components در پوشه Pages ایجاد کنید و درون آن هم یک کامپوننت دیگر به نام ChildComponent ایجادک  کنید.

• خب در ChildComponent دستورات زیر رو کپی کنید. همانطوری که می دانید ChildComponent ها در بالای دستورات دارای دستور page@ نیستند. یعنی به عبارتی مسیر ندارند چون قرار است در یک کامپوننت دیگر مورد استفاده قرار بگیرند.

<div class="panel panel-default">
    <div class="panel-heading alert alert-info">@Title</div>
    <div class="panel-body alert alert-success">@ChildContent</div>

    <button class="btn btn-danger">
        Button to be clicked!
    </button>
</div>


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

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

• حالا می خواهیم از ChildComponent بالا در ParentComponent استفاده کنیم. بنابراین دستورات زیر را در ParentComponent بنویسید.

@page "/ParentComponent"

<h1 class="text-danger">Parent child Component</h1>


<EventCallBack.Pages.Components.ChildComponent                                               Title="This is a Text Child Component!">
    Content id displayed here
    Content id displayed here

</EventCallBack.Pages.Components.ChildComponent>

@code {

}

• خب حالا اگر پروژه را اجرا کنید باید صفحه ای مشابه با تصویر زیر داشته باشید. همانطور که در کدهای بالا مشاهده می کنید ما در ChildComponent از دو پارامتر به نام های Title و ChildContent استفاده کردیم که پارامتر ChildContent یک RenderFragment می باشد.

خب تا اینجا هنوز به مفهوم و کاربرد Event CallBack اشاره نکرده ایم. در تصویر بالا یک دکمه (button) با متن Button to Clicked داریم. فرض کنید می خواهیم وقتی روی این دکمه کلیک کردیم مثلا پیغامی نمایش داده شود. یا مثلا برای رویدادهایی مثل MouseUp و یا MouseDown تابع تعریف کنیم. (مثل نرم افزارهای دسک تاپ!) قبلا این عملیات را توسط جاوااسکریپت انجام می دادیم. مثلا توسط جاوااسکریپت کنترل میکردیم اگر روی Button کلیک صورت گرفت چه تابعی انجام شود. اما در بلیزر این کار خیلی ساده تر شده است. ما میتوانیم توسط Event CallBack رویدادهای یک المنت را کنترل کنیم.

خب برای انجام این کار می توانیم در ChildComponent یک متغیر از نوع EventCallBack تعریف کنیم. همچنین از رویداد onClick هم در تگ Button استفاده میکنیم. به این ترتیب به راحتی مشخص می کنیم وقتی روی دکمه کلیک شد باید عملیاتی انجام شود. بنابراین ChildComponent را به شکل زیر تغییر دهید. (می توانید دستورات زیر را کپی و پیست کنید.)

<div class="panel panel-default">
    <div class="panel-heading alert alert-info">@Title</div>
    <div class="panel-body alert alert-success">@ChildContent</div>

    <button class="btn btn-danger" @onclick="OnClickMethodTest">
        Button to be clicked!
    </button>
</div>


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

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public EventCallback OnClickMethodTest { get; set; }
}

حال در ParentComponent یک پارامتر اضافی به نام OnClickMethodTest داریم که میتوانیم مقدار آن را مشخص کنیم. دستورات زیر را در کامپوننت ParentComponent کپی و پیست کنید.

@page "/ParentComponent"

<h1 class="text-danger">Parent child Component</h1>


<EventCallBack.Pages.Components.ChildComponent OnClickMethodTest="ShowText"
                                                Title="This is a Text Child Component!">
    Content id displayed here
    Content id displayed here

</EventCallBack.Pages.Components.ChildComponent>


<p><b>@myMessage</b></p>
@code {
    private string myMessage;
    private void ShowText()
    {
        myMessage = "This Is Event CallBack Text!";
    }
}

در دستورات بالا مشخص شد وقتی روی دکمه کلیک می شود تابعی به نام ShowText صدا زده می شود. و در متغیر myMessage مقداری قرار می گیرد که در خروجی نمایش داده می شود.

دانلود سورس