جدا کردن کدها در کلاس جداگانه از دستورات قالب در Razor Page در بلیزر (Blazor)

نوشتن کدهای Razor Page در کلاس جداگانه در Blazor

گاهی ممکنه برای تمیز تر شدن Razor Page ها شما علاقه داشته باشید کدهای سی شارپ رو خارج از Razor Page بنوسید. برای این کار میتونید مراحل زیر رو انجام بدید.

• فرض کنید Razor Page زیر رو داریم :

@page "/learnblazor" 
<h3 class="text-info pb-3">@WelcomeText</h3>

<p>On Change &nbsp; <input @bind="name" /></p>
<p>On Spontaneous &nbsp; <input @bind="name" @bind:event="oninput" /></p>

<p>I am @(name != null ? @name : "---")</p>

<p><button @onclick="getName">Surprise Me!</button></p>

@code {
    protected string name = "Spark";
    protected string WelcomeText = "Time to learn Blazor!";

    protected void getName()
    {
        name = "Blazor Learner";
    }
}

خب این Razor Page از 3 قسمت تشکیل شده.

1. قسمت بالایی که using ها و inject و ... توش انجام میشه.
2. قسمت وسطی که UI رو تشکیل میده.
3. و قسمت Code که دستورات و منطق برنامه  رو می نویسید توش.

حالا قصد داریم قسمت سوم که کدهای شما هست رو جدا کنیم.

• یک کلاس دقیقا هم نام با نام Razor Page ایجاد کنید. مثلا اگر نام Razor Page شما LearnBlazor.razor هست اسم کلاس شما میشه LearnBlazor.razor.cs
• خب حالا در کلاس LearnBlazor.razor.cs کدهای زیر رو بنویسید. این کلاس از کلاس ComponentBase مشتق می شود.

    public class LearnBlazorComponent : ComponentBase
    {
        protected string name = "Spark";
        protected string WelcomeText = "Time to learn Blazor!";

        protected void getName()
        {
            name = "Blazor Learner";
        }
    }

• در مرحله قبلی کدهای سی شارپ که در بخش code در Razor Page نوشته بودیم رو به کلاس انتقال دادیم. حالا برای اینکه این کلاس رو به صفحه Razor Page بشناسونیم به صورت زیر عمل میکنم .

@inherits LearnBlazorComponent
@page "/learnblazor"

<h3 class="text-info pb-3">@WelcomeText</h3>

<p>On Change &nbsp; <input @bind="name" /></p>
<p>On Spontaneous &nbsp; <input @bind="name" @bind:event="oninput" /></p>

<p>I am @(name != null ? @name : "---")</p>

<p><button @onclick="getName">Surprise Me!</button></p>

@code {

}

همانطور که می بینید از inherits در بالای صفحه استفاده شده.

دانلود سورس