بسم الله الرحمن الرحيم
سنتكلم اليوم عن كيفية بناء واستخدام أدوات المستخدم User Controls Web سأغطي ما أعرفه عنها إن شاء الله
نقاط الدرس:
-ما هي أدوات المستخدم Web User Controls ؟
-ماذا نستفيد من أدوات المستخدم Web User Controls؟
-كيف نبني الأداة ؟
-كيف نستخدم الأداة؟
-مثال على أداة (أداة التاريخ) DatePicker .
ومن ثم نستقبل الأسئلة والتعقيبات,,,
بسم الله نبدأ
أولا: ما هي أدوات المستخدم User Controls؟
هي عبارة عن ملفات بإمتداد ascx تحتوي على أدوات مخصصة مبينة من قبل المستخدم يتم إستخدامها عبر صفحات الويب Web Forms
ثانيا: ماذا نستفيد من أدوات المستخدم User Controls؟
توفير الوقت والجهد وإعادة الاستخدام والتحكم الكامل بالأداة بالتعامل معها ككائن مستقل كأنك تتعامل مع أداة ASP.NET عادية مثل button أو ال TextBox ولكنها من صنعك
ثالثا: كيف نبني الأداة؟
الفكرة بسيطة 3 خطوات بسيطة:
1- شغل Visual Studio .NET وإفتح مشروع ASP.NET Web Application
2- من القائمة Project اختر Add Web User Control أعطها إسم WebUserControlSample
3- صمم أداتك بشكل طبيعي
رابعا: كيف نستخدم الأداة؟
فقط خطوتين:
1- من Solution Explorer إختر WebForm1.aspx بالنقر المزدوج.
2- أيضا من Solution Explorer اسحب WebUserControlSample.ascx وضعا في داخل الصفحة.
قم الضغط على مفتاح F5 للتشغيل الحمد لله نجحنا.
أنا متأكد أن لديك تساؤلات؟ تابع والمثال وستحل إن شاء الله
خامسا: مثال على أداة (أداة التاريخ) DatePicker
فكرة الأداة بسيطة وهي عبارة عن ثلاثة قوائم منسدلة DropDownList اليوم الشهر السنة على التوالي
كل قائمة تحتوي على مجموعة أرقام
فقائمة اليوم تحتوي على الأرقام من 1-31
والشهر يحتوي على الأرقام من 1-12
والسنة تحتوي على الارقام من 2004-2020
وذلك كلي نمكننا من التعامل مع الاداة على شكل كائن واحد وليس على شكل 3 كائنات
نبدأ بالخطوات التالية:
1- شغل Visual Studio .NET وإفتح مشروع ASP.NET Web Application وسمه UserControlSample
2- من القائمة Project اختر Add Web User Control أعطها إسم DatePicker
3- سنفصل هنا: أضف جدولا يحتوي على صف واحد و3أعمدة
4- ضع في كل خلية من الجدول قائمة منسدلة DropDowList من خلال سحبها من قائمة الأدوات Tool Box
5- إختر القائمة المنسدلة الأولى وغير خاصية ID الى ddlDay
والقائمة المنسدلة الثانية الى ddlMonth
والقائمة المنسدلة الثالثة الى ddlYear
6- غير الخاصية Items في كل قائمة منسدلة كالتالي:
ddlDay اضف إليها الأرقام من 1- 31
ddlMonth أضف إليها الأرقام من 1-12
ddYear أضف إليها الأرقام من 2004-2020
الله يعينكم ?
الحمد لله إنتهينا من تصمم الأداة
بقي نقطة واحدة وهي وضع كود نستطيع من خلاله جلب التاريخ الذي إختاره المستخدم.
من القائمة View إختر Code وضع الكود التالي:
الكود هو:
//C# Code
Public DateTime GetSelectedDate()
{
DateTime d=new DateTime(Convert.ToInt16(ddlYear.SelectedValue ),
Convert.ToInt16(ddlMonth.SelectedValue) ,
Convert.ToInt16(ddlDay.SelectedValue));
return d;
}
'Visul Basic Code
Public Function GetSelectedDate() As DateTime
Dim d as DateTime =new DateTime(Cint(ddlYear.SelectedValue ),
Cint(ddlMonth.SelectedValue) ,
Cint(ddlDay.SelectedValue))
return d
End Functionالحمد لله انتهينا من بناء الأداة.
الآن سنستخدم الأداة:
1- من Solution Explorer إختر WebForm1.aspx بالنقر المزدوج.
2- أيضا من Solution Explorer اسحب DatePicker.ascx وضعا في داخل الصفحة.
3- من قائمة الأدوات Tool Box أسحب Label وضعه في الصفحة
4- من قائمة الأدوات Tool Box أسحب button وغير خاصية Text الى Show Seleted Date
5- من القائمة View إختر Code
أعلن عن الأداة بعد تحت الاعلان عن label و Button بالشكل التالي
protected System.Web.UI.WebControls.Label Label1; protected System.Web.UI.WebControls.Button Button1; protected UserControlSample.DatePicker DatePicker1;//هذه أداتنا
6- من القائمة View اختر Designer ثم أنقر نقرا مزدوجا على الزر لتنتقل لكتابة الحدث الخاص به
7- نربد الان كتابة كود يقوم بقراءة التاريخ من الأداة التي قمنا ببنائها وهو كود بسيط
//C# Label1.Text=DatePicker.GetSelectedDate().ToShortDateString(); 'Visual Basic Label1.Text=DatePicker.GetSelectedDate().ToShortDateString()
الحمد لله الآن اضغط مفتاح F5 للتشغيل مبروك لقد تعلمت كيف تصنع أداوت ويب Web User Controls خاصة بك
أعتذر عن أي تقصير
المثال موجود في المرفقات ولكنه مطور قليلا
الأن جاء دور النقاش والاسئلة
حقوق النسخ متاحة ولكن مع الاشارة الى المصدر:)
