كيفية الحصول على متغير من إدخال HTML في Blazor C#

يعد Blazor إطارًا قويًا لبناء تطبيقات الويب التفاعلية باستخدام لغة C# بدلاً من JavaScript. إحدى الميزات الأساسية لـ Blazor هي القدرة على ربط كود C# مع عناصر HTML، مما يجعل من السهل التقاط مدخلات المستخدم واستخدامها في التطبيق الخاص بك. في هذه المقالة، سنستكشف كيفية الحصول على متغير من عنصر إدخال HTML في Blazor، في كل من تطبيقات Blazor Server وBlazor WebAssembly.

مقدمة إلى ربط بيانات Blazor ثنائي الاتجاه

يقدم Blazor ميزة تُعرف باسم "ربط البيانات ثنائي الاتجاه"، والتي تسمح بإجراء تغييرات في واجهة المستخدم (UI) لتحديث متغير C# الأساسي تلقائيًا، والعكس صحيح. يعد هذا مفيدًا للغاية عندما تريد التقاط البيانات التي أدخلها المستخدم في حقل إدخال HTML وتعكس هذه التغييرات على الفور في كود C# الخاص بك.

ابدء

للحصول على متغير من حقل إدخال HTML، تحتاج إلى بعض المكونات الأساسية:

1. إدخال HTML : حقل الإدخال حيث يقوم المستخدم بإدخال البيانات.
2. متغير C# : متغير C# الذي يقوم بتخزين البيانات من الإدخال.
3. ربط البيانات : الاتصال بين حقل الإدخال ومتغير C#، عادةً من خلال التوجيه @bind في Blazor.

في الأقسام التالية، سنستعرض أمثلة مختلفة لتوضيح كيفية عمل ذلك.

المثال 1: ربط إدخال نص بسيط

إن أبسط طريقة لالتقاط مدخلات المستخدم هي استخدام التوجيه @bind . يؤدي هذا تلقائيًا إلى ربط عنصر إدخال HTML بمتغير C#.

مثال التعليمات البرمجية (مكون الحلاقة)

 @page "/input-example" <h3>Simple Input Binding in Blazor</h3> <label for="userName">Enter your name:</label> <input type="text" @bind="userName" /> <p>Hello, @userName!</p> @code { private string userName = string.Empty; }

توضيح:

1. يربط @bind bind عنصر input بمتغير userName في C#. كلما قام المستخدم بالكتابة في حقل الإدخال، يتم تحديث متغير userName تلقائيًا.
2. تعرض الفقرة <p>Hello, @userName!</p> قيمة userName ديناميكيًا، مما يعرض النص المحدث في الوقت الفعلي أثناء قيام المستخدم بالكتابة.

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

المثال 2: الحصول على الإدخال واستخدامه عند النقر على الزر

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

مثال التعليمات البرمجية (مكون الحلاقة)

 @page "/submit-input" <h3>Submit Input in Blazor</h3> <label for="age">Enter your age:</label> <input type="number" @bind="age" /> <button @>Submit</button> <p>You entered: @age</p> @code { private int age; private void SubmitAge() { // Do something with the age variable (eg, validation, submission, etc.) Console.WriteLine($"User's age is {age}"); } }

توضيح:

1. يربط التوجيه @bind="age" حقل الإدخال بمتغير age .
2. يربط @ حدث النقر على الزر بطريقة SubmitAge .
3. عندما ينقر المستخدم على الزر، يتم استدعاء أسلوب SubmitAge ، الذي يطبع العمر الذي تم إدخاله إلى وحدة التحكم.

في هذا المثال، يمكن للمستخدم إدخال عمره، وعندما ينقر فوق الزر "إرسال"، يتم تشغيل طريقة SubmitAge لتنفيذ إجراء باستخدام متغير age .

المثال 3: التحقق من صحة الإدخال

يتيح لك Blazor إجراء التحقق من صحة الإدخال بسهولة من خلال دمج ربط البيانات مع مكونات النموذج مثل <EditForm> .

مثال التعليمات البرمجية (مكون الحلاقة)

 @page "/validation-example" <h3>Input Validation in Blazor</h3> <EditForm Model="@person" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <label for="firstName">First Name:</label> <InputText @bind-Value="person.FirstName" /> <ValidationMessage For="@(() => person.FirstName)" /> <button type="submit">Submit</button> </EditForm> <p>You entered: @person.FirstName</p> @code { private Person person = new Person(); private void HandleValidSubmit() { // Process the valid input Console.WriteLine($"First Name: {person.FirstName}"); } public class Person { [Required] public string FirstName { get; set; } } }

توضيح:

1. يتم استخدام مكون <EditForm> لتغليف حقول الإدخال وإجراء التحقق من الصحة.
2. @bind-Value="person.FirstName" يربط حقل الإدخال بخاصية FirstName لكائن person .
3. يستخدم مكون DataAnnotationsValidator التعليقات التوضيحية للبيانات (مثل [Required] ) للتحقق من صحة الإدخال.
4. إذا كان الإدخال صالحًا وتم إرسال النموذج، فسيتم استدعاء طريقة HandleValidSubmit لمعالجة البيانات.

تصديق:

• إذا لم يقدم المستخدم الاسم الأول (بسبب التعليق التوضيحي [Required] )، فستظهر رسالة التحقق من الصحة، ولن يتم إرسال النموذج حتى يصبح الإدخال صالحًا.

الربط المتقدم مع أنواع الإدخال الأخرى

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

مثال: ربط خانة الاختيار

 @page "/checkbox-example" <h3>Checkbox Binding in Blazor</h3> <label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" @bind="isSubscribed" /> <p>You are @(isSubscribed ? "subscribed" : "not subscribed") to the newsletter.</p> @code { private bool isSubscribed = false; }

في هذا المثال، يرتبط مربع الاختيار بالمتغير isSubscribed ، وعندما يقوم المستخدم بتحديد المربع أو إلغاء تحديده، يتم تحديث قيمة isSubscribed تلقائيًا.

خاتمة

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

سواء كنت تقوم ببناء نماذج بسيطة أو منطق معقد للتحقق من صحة المدخلات، فإن إمكانيات ربط البيانات في Blazor تعمل على تبسيط عملية العمل مع مدخلات المستخدم. من مربعات النص إلى مربعات الاختيار، يتعامل Blazor مع التكامل بين HTML وC# بسلاسة، مما يجعله خيارًا ممتازًا لبناء تطبيقات الويب التفاعلية.