البرنامج التعليمي لنماذج الويب ASP.NET: أمثلة على عناصر تحكم المستخدم

في ASP.Net، من الممكن إنشاء تعليمات برمجية قابلة لإعادة الاستخدام. يمكن استخدام الكود القابل لإعادة الاستخدام في العديد من الأماكن دون الحاجة إلى كتابة الكود مرة أخرى.

يُساعد الكود القابل لإعادة الاستخدام في تقليل الوقت الذي يقضيه المطور بعد كتابة الكود. إذ يُمكن كتابته مرة واحدة وإعادة استخدامه في أماكن متعددة.

إنشاء عنصر تحكم المستخدم في ASP.Net

تتيح ASP.Net إمكانية إنشاء عناصر تحكم ويب. تحتوي هذه العناصر على شفرة قابلة لإعادة الاستخدام، ويمكن استخدامها في مختلف أقسام التطبيق حسب الحاجة.

دعونا نلقي نظرة على مثال لكيفية إنشاء عنصر تحكم مستخدم ويب في ASP.Net.

في مثالنا:

• سنقوم بإنشاء عنصر تحكم الويب.
• سيتم استخدامه لإنشاء مكون الرأس.
• سيحتوي على النص المذكور أدناه: "Guru"99 برنامج تعليمي" و "هذا البرنامج التعليمي مخصص لـ ASP.Net".

دعونا نعمل مع تطبيق الويب الحالي الذي تم إنشاؤه في الأقسام السابقة. دعونا نتبع الخطوات التالية لإنشاء عنصر تحكم مستخدم الويب.

الخطوة 1) الخطوة الأولى هي إنشاء عنصر تحكم مستخدم الويب وإضافته إلى حل Visual Studio الخاص بنا.

1. انتقل إلى مستكشف الحلول في Visual Studio وانقر بزر الماوس الأيمن على حل DemoApplication.
2. اختر عنصر القائمة إضافة -> عنصر جديد.

الخطوة 2) في الخطوة التالية، نحتاج إلى اختيار خيار إنشاء عنصر تحكم مستخدم الويب.

1. في مربع حوار المشروع، يمكننا رؤية خيارات مختلفة لإنشاء أنواع مختلفة من المكونات. انقر فوق خيار "الويب" على الجانب الأيسر.
2. عند النقر على خيار "الويب"، سترى خيار "عنصر تحكم مستخدم نماذج الويب". انقر فوق هذا الخيار.
3. ثم نُطلق اسمًا على عنصر التحكم في الويب، "Guru"99Control".
4. أخيرًا، انقر فوق الزر "إضافة" للسماح لـ Visual Studio بإضافة عنصر تحكم مستخدم الويب إلى حلنا.

سترى بعد ذلك "Guruتمت إضافة "99Control" إلى الحل.

الخطوة 3) حان الآن وقت إضافة الكود المخصص إلى عنصر تحكم مستخدم الويب. سيعتمد الكود الخاص بنا على بنية HTML خالصة. أضف الكود التالي إلى 'Guruملف 99Control.ascx.

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Code تفسير:-

1. في ملف التحكم الخاص بنا على الويب، نقوم أولاً بإنشاء عنصر جدول. سيُستخدم هذا العنصر لعرض صفين من النص، وسيتم عرضهما كالتالي: "Guru"99 درسًا تعليميًا" و "هذا الدرس التعليمي مخصص لـ ASP.Net".
2. بعد ذلك، نحدد صف الجدول الأول ونضع النص كالتالي: "Guru99 درسًا تعليميًا.
3. ثم نحدد صف الجدول الثاني ونضع النص على النحو التالي: "هذا البرنامج التعليمي مخصص لـ ASP.Net."

NOTE: لا يمكننا الآن تنفيذ هذا الكود وعرض الناتج. الطريقة الوحيدة للتأكد من عمله هي تضمينه في تطبيقنا (ملف aspx). سنتناول هذا في الموضوع التالي.

تسجيل عناصر تحكم المستخدم في نموذج ويب ASP.NET

في القسم السابق، رأينا كيف يمكننا إنشاء عنصر تحكم ويب مخصص. يمكن استخدام هذا العنصر لعرض السطرين التاليين في نموذج ويب:

• "Guru99 درسًا تعليميًا
• "هذا البرنامج التعليمي مخصص لـ ASP.Net."

بعد إنشاء عنصر التحكم المخصص، نحتاج إلى استخدامه في تطبيق الويب الخاص بنا. الخطوة الأولى هي تسجيل المكون في تطبيقنا (Demo.aspx). هذا شرط أساسي لاستخدام أي عنصر تحكم ويب مخصص في تطبيق ASP.NET.

دعونا نرى كيف يمكننا تحقيق ذلك. الخطوات التالية هي استكمال للقسم السابق، حيث أنشأنا عنصر التحكم المخصص الخاص بنا. في هذا القسم، سنستخدم عنصر التحكم في Demo.aspx نموذج الويب. أولاً، سنقوم بتسجيل عنصر التحكم المخصص الخاص بنا في ملف Demo.aspx.

الخطوة 1) تأكد من أنك تعمل على ملف demo.aspx. سيتم تسجيل عنصر تحكم المستخدم على الويب في هذا الملف. يمكنك القيام بذلك بالنقر المزدوج على ملف demo.aspx في مستكشف الحلول الخاص بحل .NET الخاص بك.

بمجرد النقر المزدوج على النموذج، ستظهر لك على الأرجح الشيفرة البرمجية التالية. هذه هي الشيفرة الافتراضية التي يضيفها Visual Studio عند إضافة نموذج ويب إلى مشروع ASP.NET. تتضمن هذه الشيفرة خطوات ضرورية لضمان تشغيل النموذج كنموذج ويب ASP.NET في المتصفح.

الخطوة 2) والآن، لنضف الكود الخاص بنا لتسجيل عنصر التحكم الخاص بالمستخدم. تُظهر لقطة الشاشة أدناه تسجيل عنصر التحكم الخاص بالمستخدم بعد إضافته إلى الكود الأساسي المذكور أعلاه.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Code تفسير:-

1. الخطوة الأولى هي تسجيل عنصر تحكم المستخدم على الويب. ويتضمن ذلك المعايير الأساسية التالية:
   1. يتم استخدام الكلمة الأساسية "تسجيل" لتسجيل عنصر تحكم مستخدم الويب.
   2. تُستخدم المعلمة Src لتحديد اسم عنصر التحكم، وهو في حالتنا هو Guru99Control.ascx.
   3. يُطلق على عنصر التحكم اسم TagName و TagPrefix، وهما اسمان فرديان يُمنحان له. ويتم ذلك لكي يُمكن الرجوع إليهما في صفحات HTML كعنصر تحكم HTML عادي.
2. بعد ذلك، نشير إلى عنصر تحكم المستخدم الخاص بنا على الويب عبر TagPrefix:TagName الذي تم تعيينه سابقًا. يُعد TagPrefix:TagName مؤشرًا على أننا نريد استخدام عنصر تحكم الويب المخصص الخاص بنا. عند معالجة الصفحة بواسطة خادم الويب، يمكنك أن ترى أننا استخدمنا علامة TWebControl:WebControl. ثم سيقوم بمعالجة 'Guru99Control وفقًا لذلك.
   1. يُمنح عنصر التحكم "Header" معرّفًا اختياريًا. ومن الممارسات الجيدة عمومًا منح معرّف لعنصر تحكم HTML.
   2. وأخيرًا، تضمن السمة runat="server" تشغيل عنصر التحكم على خادم الويب. هذه السمة هي القيمة الافتراضية لجميع عناصر تحكم ASP.NET. يجب تشغيل جميع عناصر تحكم ASP.NET (بما في ذلك عناصر التحكم المخصصة) على الخادم. ثم تُرسل مخرجاتها من الخادم إلى العميل وتُعرض في المتصفح.

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

انتاج:-

تظهر رسالة الإخراج المعروضة في المتصفح أن عنصر تحكم مستخدم الويب تم تنفيذه بنجاح.

تسجيل عناصر تحكم ASP.Net بشكل عام في ملف تكوين web.config

قد يرغب المستخدم أحيانًا في استخدام عناصر تحكم المستخدم في صفحات متعددة ضمن تطبيق .NET. في هذه الحالة، لا يُنصح بتسجيل عناصر تحكم المستخدم في كل صفحة من صفحات ASP.NET.

• في .Net، يمكنك إجراء التسجيل في ملف "web.config".
• ملف web.config هو ملف تكوين مشترك تستخدمه جميع صفحات الويب في مشروع .Net.
• يحتوي على تفاصيل التكوين الضرورية لمشروع ويب ASP.Net. على سبيل المثال، أحد التكوينات الشائعة في ملف web.config هو معلمة الإطار المستهدف.
• يتم استخدام هذه المعلمة لتحديد إصدار .Net Framework الذي يستخدمه التطبيق.

فيما يلي لقطة من الكود الافتراضي في ملف web.config. الجزء المميز هو جزء الإطار المستهدف.

دعونا نرى كيف يمكننا تسجيل Guru99Control في ملف web.config.

الخطوة 1) افتح ملف web.config من مستكشف الحلول بالنقر المزدوج على الملف.

عند فتح ملف web.config، قد ترى التكوين أدناه. تتم إضافة ملف "web.config" تلقائيًا بواسطة Visual Studio عند إنشاء المشروع. هذا هو التكوين الأساسي المطلوب لجعل مشروع ASP.Net يعمل بشكل صحيح.

الخطوة 2) الآن دعونا نسجل المكون الخاص بنا في ملف web.config. نحن بحاجة إلى إضافة الأسطر أدناه لذلك.

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src="~/Guru99Control.ascx" tagName="WebControl" />
		</controls>
	</pages>
	</system.web>
</configuration>

يتضمن التسجيل الخطوات الفرعية التالية:

1. أضف علامة تسمى . وهذا يعني أن كل تكوينات عناصر التحكم ستكون قابلة للتطبيق على جميع صفحات ASP.Net الموجودة في الحل.
2. ال تعني العلامة أنك تقوم بإضافة تكوين لتحكم المستخدم.
3. ثم نقوم بتسجيل عنصر التحكم الخاص بالمستخدم مع الوسم الإضافي. وتبقى المعلمات المتبقية، وهي tagPrefix و tagName و src، كما هي من قبل.

الخطوة 3) تذكر أن تنتقل إلى صفحة "demo.aspx" وتزيل الأسطر الخاصة بالعنصر الذي تم تسجيله. Guruالمكون رقم 99. إذا لم تقم بهذه الخطوة، فإن 'Guruسيتم تنفيذ ملف '99Control.ascx' من ملف 'demo.aspx' بدلاً من ملف 'web.config'.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

بمجرد ضبط الكود أعلاه، وتنفيذ المشروع باستخدام Visual Studio، ستحصل على المخرجات التالية.

انتاج:-

توضح رسالة الإخراج أنه تم تنفيذ عنصر تحكم مستخدم الويب بنجاح.

إضافة الخصائص العامة إلى عنصر تحكم الويب

الخاصية هي زوج من المفتاح والقيمة مرتبط بأي عنصر تحكم. لنأخذ مثالاً بسيطاً وسم HTML. تظهر أدناه لقطة شاشة توضح شكل الوسم.

<html>
<body>
	<div style="color:#0000FF">

		Demo Form

	</div>
</body>
</html>

تُستخدم علامة "div" لإنشاء قسم في مستند HTML. تحتوي علامة "div" على خاصية تسمى خاصية النمط. يمكن استخدام هذه الخاصية لإعطاء نمط مختلف للنص المعروض في علامة div. عادةً ما سترى الكود الخاص بعلامة div كما هو موضح أدناه.

<div style="color:#0000FF">

لذا فإن سمة اللون ليست سوى زوج من القيمة الرئيسية والذي يوفر المزيد من المعلومات حول العلامة نفسها. في الحالة المذكورة أعلاه، اسم المفتاح هو "style" وقيمة المفتاح هي "color:#0000FF".

وبالمثل، بالنسبة لعناصر تحكم المستخدم، يمكنك إنشاء خصائصك الخاصة التي تصف عنصر التحكم.

لنأخذ مثالاً بسيطاً ونبني عليه ما لديناGuruتم إنشاء عنصر التحكم 99Control في الأقسام السابقة. في مثالنا، سنضيف خاصية عددية بسيطة تُسمى MinValue. تمثل هذه القيمة الحد الأدنى لعدد الأحرف في النص المعروض في عنصر التحكم.

دعونا ننفذ الخطوات المذكورة أدناه لتحقيق ذلك.

الخطوة 1) فتح Guruملف 99Control.ascx. أضف الكود اللازم لإضافة خاصية MinValue.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

	<script runat="server">
	  public int MinValue = 0;
	</script>

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Code تفسير:-

تُستخدم السمة `runat="server"` في البرنامج النصي للإشارة إلى أننا نضيف بعض التعليمات البرمجية الخاصة بـ .NET، والتي يجب تشغيلها على خادم الويب. هذا ضروري لمعالجة أي خاصية تُضاف إلى عنصر تحكم المستخدم. بعد ذلك، نضيف الخاصية `MinValue` ونُعطيها قيمة افتراضية تساوي 0.

الخطوة 2) الآن دعنا نشير إلى هذه الخاصية في ملفنا التجريبي.aspx. كل ما نقوم به الآن هو مجرد الرجوع إلى خاصية MinValue وتعيين قيمة جديدة قدرها 100.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" MinValue="100" />
	</form>
</body>
</html>

NOTE: عند تشغيل هذا الكود، لن يظهر أي ناتج. والسبب هو أن الناتج يقع ضمن الحد الأقصى المسموح به وهو 100 حرف.

الأسئلة الشائعة