کاربرد پارامتر RenderFragment در Blazor چیست ؟

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

RenderFragment یک نوع delegate در Blazor است که به ما این امکان را می دهد که بخشی از رابط کاربری (UI) را به صورت دینامیک در کامپوننت ها تعریف و استفاده کنیم. در واقع، این یک روش برای ایجاد محتوای قابل اجرا و قابل تعریف مجدد است که می توان آن را در مکانی دیگر در کد استفاده کرد.

با استفاده از RenderFragment، می توانیم مقاطع کد HTML را به کامپوننت ها ارسال کنیم که در نهایت می تواند به عنوان پارامتر در متد Render استفاده شود. این ویژگی به توسعه دهندگان کمک می کند تا کدهای قابل استفاده مجدد و بهینه تری ایجاد کنند.

در زیر یک مثال عملی از نحوه استفاده از RenderFragment در یک کامپوننت Blazor ارایه شده است:

@page "/example"

کامپوننت اصلی

    
        
این محتوای فرزند است!
        
ما می توانیم هر محتوایی را در اینجا قرار دهیم.
    


@code {
    // هیچ کدی برای این بخش نیاز نیست.
}

@code {
    public class MyComponent : ComponentBase
    {
        [Parameter] public RenderFragment ChildContent { get; set; }
        
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "div");
            builder.AddContent(1, ChildContent);
            builder.CloseElement();
        }
    }
}

در این مثال، یک کامپوننت به نام MyComponent تعریف شده است که یک پارامتر از نوع RenderFragment به نام ChildContent دارد. سپس می توانیم هر محتوایی را از داخل کامپوننت والد به آن ارسال کنیم و در نهایت، این محتوا در کامپوننت داخلی رندر می شود.

RenderFragment  چیست ؟کاربرد RenderFragment در Blazor چیست ؟

یک Fragment در Blazor در واقع به مجموعه ای کدهای Html و Css گفته میشه که میتونه به صورت یک کامپوننت مجتمع دربیاد که RenderFragment نامیده میشه. برای فهمیدن بهتر این مطلب اجازه بدید یه مثال رو بررسی کنیم.

فرض کنید که یک فرم ثبت نام می خواید طراحی کنید که تعداد فیلدهای ورودی مشابه بسیار زیادی داره. مثلا نام، نام خانوادگی، نام پدر، شماره ملی، شماره تماس، کدپستی، نام معرف و ...

خب میبینید که بسیاری از فیلدهایی که در این فرم داریم مشابه هستن و همه یک string رو دریافت میکنن. بنابراین موقع طراحی این فرم کدهای html و Css و کلاسهای تکراری زیادی داریم که باعث میشه اولا، حجم کدنویسی زیاد بشه، ثانیا اگر تغییری خواستیم بدیم باید تک تک این ورودیها تغییر کنن. خب توسط قابلیت RenderFragment در Blazor شما میتونید یک کامپوننت ایجاد کنید و یکبار یک Template بهش بدید و هرجا نیاز بود از این Template استفاده کنید. 

چگونه یک RenderFragment در Blazor ایجاد کنیم؟

خب ابتدا یک پروژه از نوع Blazor ایجاد کنید. تفاوتی نمی کند که این پروژه از نوع Blazor WebAssembly باشد یا Blazor Server. در index.razor کدهای زیر را کپی و پیست کنید.

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<form>
    <div>
        <label>FirstName</label>
        <div>
            <input id="FirstName" type="text" />
        </div>
    </div>

    <div>
        <label>Family</label>
        <div>
            <input id="Family" type="text" />
        </div>
    </div>

    <div>
        <label>Tel</label>
        <div>
            <input id="Tel" type="text" />
        </div>
    </div>
</form>

همانطور که ملاحظه می کنید یک فرم با 3 فیلد داریم که برای هر فیلد جداگانه دستورات Html و css نوشته شده است. حال فرض کنید اگر تعداد این فیلدها زیاد باشد و style هم به این فیلدها داده شود چقدر حجم کدها زیاد خواهد شد.

ایجاد و استفاده از Component در Blazor

خب در این مرحله روی نام پروژه کلیک راست کنید و یک پوشه جدید به نام Controls ایجاد کنید. روی پوشه Controls کلیک راست کنید و گزینه Add و یک Razor Page به نام FiledComponent ایجاد کنید. در این مرحله باید Solution شما به شکل زیر باشد.

خب حالا در FieldComponent کدهای زیر رو بنویسید

<div>
    <label>@Label</label>
    <div>
        @Control
    </div>
</div>

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

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

در کد بالا دو پارامتر به نام Label و Control ایجاد کرده ایم. Label برای نمایش عنوان فیلدها و Control هم که یک RenderFragment می باشد برای جایگزین کردن مقدار فیلد می باشد. حالا کافیست در index.razor به جای نوشتن کدهای Html و css از FieldComponent استفاده کنیم. بنابراین index.razor به صورت زیر تغییر می کند.

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<form>

    <FieldComponent Label="FirstName">
        <Control>
            <input id="FirstName" type="text" />
        </Control>
    </FieldComponent>

    <FieldComponent Label="Family">
        <Control>
            <input id="Family" type="text" />
        </Control>
    </FieldComponent>

    <FieldComponent Label="Tel">
        <Control>
            <input id="Tel" type="text" />
        </Control>
    </FieldComponent>

</form>

در کدهای بالا هر فیلد با یک RenderFragment جایگزین شده است.

کاربرد RenderFragment در Blazor

برخی از کاربردهای RenderFragment در Blazor

• کاهش حجم کدنویسی
• ایجاد Component هایی به صورت Template
• استفاده مجدد از کامپوننت ها
• تغییر سریع کد و اعمال در سراسر پروژه

درود بر استاد گرامی - توی .Net 5 وقتی renderFragment را اسمش را چیزی بجز ChildContent میذاریم ارور میده - نمیدونم شما چطوری این کد را اجرا کردید احیانا  با توجه به این توضیحات :

RenderFragment