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

من قبل: يعقوب لي يعقوب لي
Hours تحديث

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

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

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

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

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

في مثالنا ،

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

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

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

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

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

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

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

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

سترى إضافة "Guru99Control" إلى الحل.

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

الخطوة 4) الآن حان الوقت لإضافة الكود المخصص إلى عنصر تحكم مستخدم الويب. سيعتمد الكود الخاص بنا على بناء جملة HTML الصرف. أضف الكود التالي إلى الملف "Guru99Control.ascx"

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

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

شرح الكود :-

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

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

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

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

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

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

تسجيل عناصر تحكم المستخدم على ASP.NET

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

أولاً، سوف نقوم بتسجيل "التحكم" المخصص الخاص بنا في الملف Demo.aspx.

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

تسجيل عناصر تحكم المستخدم على ASP.NET

بمجرد النقر المزدوج على النموذج، فمن المحتمل أن ترى الكود أدناه في النموذج. هذا هو الكود الافتراضي الذي يضيفه Visual Studio عند إضافة نموذج ويب إلى مشروع ASP.Net.

يتكون الرمز الافتراضي من خطوات مطلوبة للتأكد من إمكانية تشغيل النموذج كنموذج ويب ASP.Net في المستعرض.

تسجيل عناصر تحكم المستخدم على ASP.NET

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

تسجيل عناصر تحكم المستخدم على ASP.NET

<%@ 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.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

شرح الكود :-

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

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

انتاج:-

تسجيل عناصر تحكم المستخدم على ASP.NET

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

تسجيل عناصر تحكم asp.net عالميًا في ملف تكوين تكوين الويب asp

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

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

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

ذات المواد

تسجيل عناصر تحكم asp.net عالميًا في تكوين الويب

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

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

تسجيل عناصر تحكم asp.net عالميًا في تكوين الويب

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

تسجيل عناصر تحكم asp.net عالميًا في تكوين الويب

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

تسجيل عناصر تحكم asp.net عالميًا في تكوين الويب

<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" وإزالة سطور التحكم، التي تحتوي على تسجيل مكون Guru99. إذا لم تقم بتنفيذ هذه الخطوة، فسيتم تنفيذ ملف "Guru99Control.ascx" من ملف "demo.aspx" بدلاً من ملف "web.config".

تسجيل عناصر تحكم asp.net عالميًا في تكوين الويب

<%@ 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.ore/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. ستحصل على الناتج الموضح أدناه.

انتاج:-

تسجيل عناصر تحكم asp.net عالميًا في تكوين الويب

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

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

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

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

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

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

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

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

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

لنأخذ مثالاً بسيطًا ونبني على "Guru99Control" الذي تم إنشاؤه في الأقسام السابقة.

في مثالنا، سنضيف خاصية عدد صحيح بسيطة تسمى MinValue. ستمثل هذه القيمة الحد الأدنى لعدد الأحرف في النص المعروض في عنصر التحكم الخاص بالمستخدم.

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

الخطوة 1) افتح الملف Guru99Control.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
	</tr>
</table>

شرح الكود :-

يتم استخدام سمة البرنامج النصي runat=server للإشارة إلى أننا نضيف بعض التعليمات البرمجية الخاصة بـ.Net وأنه يجب تشغيلها على خادم الويب.

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

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

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

!DOCTYPE html>
<html xmlns="http://www.w3.ore/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>

نوت: – عند تشغيل هذا الكود لن يظهر أي مخرجات. وذلك لأن الإخراج يقع تحت حد 100 حرف.

ملخص

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

تلخيص هذه التدوينة بـ: