ربط عناصر التحكم بالبيانات في تطبيقات Blazor

مكتمل

يتيح لك تطبيق Blazor ربط وحدات تحكم HTML بالخصائص، بحيث تُعرض القيم المتغيرة تلقائياً في واجهة المستخدم (UI).

افترض أنك تقوم بتطوير صفحة تجمع معلومات من العملاء حول تفضيلات البيتزا الخاصة بهم. تريد تحميل المعلومات من قاعدة بيانات وتمكين العملاء من إجراء تغييرات، مثل تسجيل الإضافات المفضلة لديهم. عندما يحدث تغيير من المستخدم أو تحديث في قاعدة البيانات، فأنت تريد عرض القيم الجديدة في واجهة المستخدم بأسرع ما يمكن.

في هذه الوحدة، تتعلم كيفية استخدام ربط البيانات في Blazor لربط عناصر واجهة المستخدم بقيم البيانات أو الخصائص أو التعبيرات.

ما المقصود بربط البيانات؟

إذا كنت تريد من عنصر HTML أن يعرض قيمة ما، يمكنك كتابة التعليمات البرمجية لتغيير العرض. تحتاج إلى كتابة تعليمات برمجية إضافية لتحديث الشاشة عندما تتغير القيمة. في Blazor، يمكنك استخدام ربط البيانات لتوصيل عنصر HTML بحقل أو خاصية أو تعبير. بهذه الطريقة، عندما تتغير القيمة، يتم تحديث عنصر HTML تلقائياً. عادةً ما يحدث التحديث بسرعة بعد التغيير ولا يتعين عليك كتابة أي تعليمة برمجية للتحديث.

لربط عنصر تحكم، يمكنك استخدام الأمر @bind:

@page "/"

<p>
    Your email address is:
    <input @bind="customerEmail" />
</p>

@code {
    private string customerEmail = "user@contoso.com"
}

في الصفحة السابقة، كلما غيَّر المتغير customerEmail قيمته، تُحدث القيمة <input>.

Note

تعمل وحدات التحكم، مثل <input>، على تحديث عرضها فقط عند تقديم المكوّن، وليس عند تغيير قيمة الحقل. نظرا لأن مكونات Blazor يتم عرضها بعد تنفيذ أي تعليمات برمجية لمعالج الأحداث، في الممارسة العملية، عادة ما يتم عرض التحديثات بسرعة.

ربط العناصر بأحداث معينة

يعد توجيه @bind ذكياً ويفهم عناصر التحكم التي يستخدمها. على سبيل المثال، عندما تربط قيمة بمربع نص <input>، فإنها تربط السمة value. يحتوي مربع اختيار HTML <input> على سمة checked بدلاً من سمة value. السمة @bind تستخدم تلقائياً هذه السمة checked بدلاً من ذلك. بشكل افتراضي، يكون عنصر التحكم مرتبطاً بحدث DOM onchange. على سبيل المثال، ضع في اعتبارك هذه الصفحة:

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind="favPizza" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

عندما يتم عرض الصفحة، يتم عرض القيمة الافتراضية Margherita في كل من العنصر <h1> ومربع النص. عندما تكتب بيتزا مفضلة جديدة في مربع النص، فإن العنصر <h1> لا يتغير حتى تخرج من مربع النص أو تحدد Enter لأن هذا هو وقت انطلاق حدث نموذج عنصر مستند onchange.

في كثير من الأحيان، يعد هذا هو السلوك الذي تريده. لكن افترض أنك تريد تحديث عنصر <h1> بمجرد كتابة أي حرف في مربع النص. يمكنك تحقيق هذه النتيجة بالربط بحدث oninput DOM بدلاً من ذلك. للربط بهذا الحدث، يجب عليك استخدام الأمرين @bind-value و@bind-value:event :

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind-value="favPizza" @bind-value:event="oninput" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

في هذه الحالة، يتغير العنوان بمجرد كتابة أي حرف في مربع النص.

تنسيق قيم منضمة

إذا كنت تعرض التواريخ للمستخدم، فقد ترغب في استخدام تنسيق بيانات محلي. على سبيل المثال، افترض أنك تكتب صفحة خصوصاً لمستخدمي المملكة المتحدة، الذين يفضلون كتابة التواريخ بذكر اليوم الأول. يمكنك استخدام توجيه @bind:format لتحديد سلسلة تنسيق تاريخ واحدة:

@page "/ukbirthdaypizza"

<h1>Order a pizza for your birthday!</h1>

<p>
    Enter your birth date:
    <input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>

@code {
    private DateTime birthdate { get; set; } = new(2000, 1, 1);
}

Note

في وقت كتابة هذا التقرير، كانت سلاسل التنسيق مدعومة فقط بقيم التاريخ. قد تتم إضافة تنسيقات العملات وتنسيقات الأرقام وغيرها في المستقبل. للتحقق من أحدث معلومات عن تنسيقات الربط، راجع تنسيق السلاسل في وثائق Blazor.

كبديل لاستخدام التوجيه، يمكنك كتابة التعليمات البرمجية @bind:format C# لتنسيق قيمة مرتبطة. استخدم الموصلين get وset في تعريف العضو، كما في المثال التالي:

@page "/pizzaapproval"
@using System.Globalization

<h1>Pizza: @PizzaName</h1>

<p>Approval rating: @approvalRating</p>

<p>
    <label>
        Set a new approval rating:
        <input @bind="ApprovalRating" />
    </label>
</p>

@code {
    private decimal approvalRating = 1.0;
    private NumberStyles style = NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
    
    private string ApprovalRating
    {
        get => approvalRating.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                approvalRating = Math.Round(number, 3);
            }
        }
    }
}

في الوحدة التالية، يمكنك تطبيق ما تعلمته حول عناصر التحكم المرتبطة بالبيانات.