هام لكل مبرمج :: التعامل مع صفحات ال Web User Control واهميتها

[nothing4u]

السلام عليكم ورحمة الله وبركاته

في المشاريع الكبيره والتي تحتوي على صفحات كثيره ومتعدده فغالباً يكون تقسيم الصفحات بنفس الشكل والنظام مثلا نتحدث عن مجلة او برنامج ادارة محتوى مثل مجلة النيوك

نلاحظ ان الصفحة تنقسم لخمسة اقسام
1- منطقة الهيدر (الترويسة العلوية)
2- منطقة الفوتر (الترويسة السفليه)
3- منطقة القوائم اليمين
4- منطقة القوائم اليسار
5- محتوى الصفحه في المنتصف بين الاقسام الاربعه اعلاه

كل الصفحات تكون تتكون من خمس اقسام تتشابه فيها اربع اقسام وهي
1- منطقة الهيدر (الترويسة العلوية)
2- منطقة الفوتر (الترويسة السفليه)
3- منطقة القوائم اليمين
4- منطقة القوائم اليسار

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

بما ان لدينا اربعة اقسام متشابهه ولنفرض ان عندنا في المشروع مئة صفحة واردت ان تقوم بالتغيير على احد هذه المناطق مثلا القوائم او الهيدر او الفوتر فانت هنا مجبر على التعديل في المئة صفحة كاااامله وهذا امر غير منطقي بينما لدينا طريقة اسهل وعملية اكثر

الطريقة هي باستخدام صفحات ال Web User Control

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

نفرض ان لدينا صفحة في الموقع هي index.aspx
تتكون الخمس اجزاء التي تم ذكرها اعلاه


طريقة العمل :-

نقوم باضافة اربع صفحات Web User Control
ونسميها هكذا مثلا
header.ascx الترويسة العلوية
footer.ascx الترويسة السفلية
rightmenu.ascx القوائم على اليمين
leftmenu.ascx القوائم على اليسار


نستدعي هذه الاربع صفحات في صفحة الاندكس index.aspx

في السورس كود لصفحة الاندكس ومباشرة تحت اول سطر وهو

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" StylesheetTheme="Andalus" Theme="Andalus" %>

نقوم باستدعاء الاربع صفحات Web User Control
وكود الاستدعاء هو

<%@ Register TagPrefix="NewsTemp" TagName="header" Src="controlpages/header.ascx" %>
<%@ Register TagPrefix="NewsTemp" TagName="footer" Src="controlpages/footer.ascx" %>
<%@ Register TagPrefix="NewsTemp" TagName="rightmenu" Src="controlpages/rightmenu.ascx" %>
<%@ Register TagPrefix="NewsTemp" TagName="leftmenu" Src="controlpages/leftmenu.ascx" %>

لاحظ انني وضعت الاربع صفحات في داخل مجلد خاص بها وهو ControlPages
كما ان كل صفحة لها اسم خاص بها سنسخدمه في استدعاء الصفحة فيما بعد في المكان الذي نريد عرضها به واسمها هو TagName
صفحة الهيدر اسمها header
وصفحة الفوتر اسمها footer
وصفحة القوائم اليمين اسمها rightmenu
وصفحة القوائم اليسار اسمها leftmenu

هذه الاسماء مسنده لل TagName في الكود ويمكن ان تعتبرها مثل الاسماء البرمجية التي نستدعي بها الادوات


الان في داخل الفورم للصفحة الاندكس Form
نقوم باستدعاء هذه الصفحة بالطريقة التي نرغب بها

مثلا صفحة الهيدر تكون في اول الصفحة من الاعلى فمباشرة تحت فتحة ال Form
نستدعيها بهذا الكود

<NewsTemp:header runat="server" ID="HeaderTemp" />

وصفحة الفوتر تكون في اخر الصفحة نستدعيها قبل اغلاق ال Form بهذا الكود

<NewsTemp:footer runat="server" ID="FooterTemp" />

الان بين منطقة الهيدر والفوتر نريد عمل منطقة للقوائم اليمين ومنطقة للقواتم اليسار وفي المنتصف محتوى الصفحة

ببساطه نقوم بعمل جدول يتكون من صف واحد وثلاثه اعمدها قسمها مثلا العامود الاول من اليمين عرضه 25% من الصفحة والعامود الثاني وهو عامود المنتصف عرضه 50% من الصفحة والعامود الثالث وهو عامود القوائم اليسار عرضه 25% من الصفحة

هذا هو الجدول

<table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center" style="width: 20%; height: 16px;" valign="top">
                هنا منطقة القوائم اليمين
                </td>
                <td align="center" style="width: 60%; height: 16px;" valign="top">
                هنا محتوى الصفحة
                </td>
                <td align="center" style="width: 20%; height: 16px;" valign="top">
                هنا منطقة القوائم اليسار
                </td>
            </tr>
        </table>

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

<NewsTemp:rightmenu runat="server" ID="RightMenuTemp" />

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

<NewsTemp:leftmenu runat="server" ID="LeftMenuTemp" />

ومكان جملة محتوى الصفحة نعرض محتوى الصفحة فيه


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



نتطرق قليلا لصفحات ال Web User Control
هذه الصفحات لا تختلف عن صفحات ال aspx كثيراً فهي لها سورس كود ولها ايضاً صفحة الكود البرمجي الخاص بها ويمكن وضع اي نوع من الادوات تريده وتستخدمه وايضاً كتابة اي كود تريده في صفحة الكود مثل صفحات ال aspx تماماً


فمثلا ممكن ان تقوم بعمل نظام بلوكات او قواااائم يتم اضافة القوائم من لوحة التحكم مثل مجلة النيوك وفي اليمين او اليسار ومن خلال صفحة الكنترول للقوائم اليمين او اليسار تستدعي هذه القوائم وتفرغها في الصفحة فيكون لديك نظااام قوااائم كما هو في برامج إدارة المحتوى والمجلات العالمية مثل مجلة النيوك في ال php او اي مجلة اخرى حتى مجلات ال asp


اسأل الله تعالى ان اكون وفقت في الشرح واي استفسار انا موجود اخواني

في امان الله وحفظه ولاتنسونا من دعائكم ابدا

[الثلج]

ربي يوفقك دنيا وآخره وهذا اللي كنا ندور عليه زمان

ياليت ما تحرمنا من جديدك وإبداعك

[asp2asp]

ألف شكر أخي أحمد على الدرس ..

وجاري إن شاء الله التطبيق

[nothing4u]

بارك الله فيكم اخواني وتسلمون على الردود

[الثلج]

اخوي احمد فكرة تطبيق البلوكات دارت بعقلي لكن فكرة تطبيقها ماقدر اتوصلها ممكن توضحلنا الفكرة وكيف نقدر نطبقها
خطر ببالي اانا نستعمل قواعد البيانات للإضافة لكن واجهتني مشكلة اضافتها في سطور الـ html
وشاكر لك تعاونك

[nothing4u]

اخوي احمد فكرة تطبيق البلوكات دارت بعقلي لكن فكرة تطبيقها ماقدر اتوصلها ممكن توضحلنا الفكرة وكيف نقدر نطبقها
خطر ببالي اانا نستعمل قواعد البيانات للإضافة لكن واجهتني مشكلة اضافتها في سطور الـ html
وشاكر لك تعاونك

هلا اخوي

فكرتها بسيطة جداً

اعمل جدول جديد خاص للبلوكات واعمل فيه ثلاث حقول او على حسب حاجتك لكن بالاساس هم ثلاث حقول الاول حقل ال ID الثاني عنوان القائمة MenuTitle الثالث كود ال html للقائمة اسمه مثلا MenuHtmlCode

في لوحة التحكم للمدير العام اعمل صفحة اضافة قائمة جديده مثلا وصفحة تعديل القوائم وحذفها ووو على راحتك

المهم ان صفحة الاضافة للقائمة سوف تحتوي على TextBox الاول ادخال عنوان القائمة والثاني ادخال كود ال html للقائمة وبعدين يتعمد عملية الاضافة

عادي طبعا الحقول في قاعدة البيانات بتكون نوعها Text وهذا النوع بياخذ بيانات من بينها كود ال html من دون اي مشاااكل ويتخزن فيها كود html

في صفحة الموقع استدعي عنوان القوائم وكودها وخليه يطبع كود ال html للقائمة في جدول وعنوان الجدول يكون عنوان القائمة وبالطبع تحتاج ادخاله في تكرار من اجل طباعة جداول القوائم كلها

تطويرات اخرى مثلا تقدر تضيف حقل جديد للجدول في قاعدة البيانات انه يختار المدير تكون القائمة في اليمين او اليسار مثلا واي تطويرات اخرى تحتاجها

[الثلج]

جزاك ر بي كل خير

بس يعني لو استعديه ما يطلعه على انه text يتعامل معه كانه كود html

هذا سؤالي

[nothing4u]

جزاك ر بي كل خير

بس يعني لو استعديه ما يطلعه على انه text يتعامل معه كانه كود html

هذا سؤالي

نعم اخوي طالما انه كود html الي مخزن في الحقل خلاص بترجمه في الصفحة بدون اي مشاكل ان شاء الله

[الثلج]

مشكور ياغلاي

[الثلج]

أستاذ أحمد آسف على رفع الصفحة من جديد لكن اتمنى منك أخباري ماهي الطريقة للتحكم بوجود أو الغاء الكنترول عن طريق لوحة التحكم

[nothing4u]

أستاذ أحمد آسف على رفع الصفحة من جديد لكن اتمنى منك أخباري ماهي الطريقة للتحكم بوجود أو الغاء الكنترول عن طريق لوحة التحكم

لم افهم اخي ماذا تقصد بالغائها عن طريق لوحة التحكم ؟

[الثلج]

يعني كيف أتحكم بوجودها أو عدمها

تفعيل ظهروها بالصفحه أو الغاء تفعيلها كما تفضلت وقلت نظام البلوكات

[nothing4u]

يعني كيف أتحكم بوجودها أو عدمها

تفعيل ظهروها بالصفحه أو الغاء تفعيلها كما تفضلت وقلت نظام البلوكات

اخوي بخصوص نظام البلوكات فانت لا تخفي او تظهر صفحة الكنترول نفسها
انت تقوم باظهار البلوكات مثلا اوضح لك الامر اكثر

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

الان في نفس صفحة الكنترول نقوم بجلب القوائم التي تم اضافتها من لوحة المدير العام في قاعدة البيانات في يمين الصفحة وحتى تعرف اذا كانت القائمة مفعله يعني منشورة او طلب المدير العام عدم نشرها وكذلك لكي تعرف ان كانت القائمة مطلوب نشرها في يمين الموقع او يساره

تقوم بعمل حقلين في جدول القوائم الاول مثلا نسيمه
IsActive
وهو من نوع char طوله 1 يعني حرف واحد فقط
ومن لوحة المدير العام تحدد لو اختار المدير العام عدم نشر القائمة نخزن في هذا الحقل N
لو اختار ان يتم نشرها نخزن فيه Y

ونفس العملية لليسار واليمين نعمل حقل اسمه مثلا MenuAlign
لو اختار ان يكون في اليسار نخزن في حقل الاتجاه L
لو اختار يكون يمين نخزن في R

الان في صفحة الكنترول للقوائم التي على اليمين نقوم بجلب عنوان ومحتوى جميع القوائم التي في اليمين والمنشوره يعني جملة ال SQL للاستدعاء تكون هكذا مثلا

select title,htmlcode from tab_menu where IsActive Like 'Y' and MenuAlign Like 'R'

وثم تفرغ القوائم بالترتيب وبالتنسيق الذي تريد

[الثلج]

أستاذ احمد اشكرك على تجاوبك
أنا قمت بتنفيذ عملية قاعدة البيانات وقمت بإدخالهم يدوياً في الوقت الحالي وقمت بسحبهم ووضعهم في dataset

آخر مرحله وهي إدراجهم بالصفحه كيف هذا ما حيرني واشغل فكري

[nothing4u]

هلا اخوي
الان انت مخزن جميع القوائم التي تنطبق عليها شروط النشر في داخل ال DataSet
هناك طرق كثيره والبعض ممكن يستخدم ادوات جاهزه لاظهار القوائم لكن انا عندي طريقة افضلها وارتاح لها سوف اشرحها لك

تعرف طبعا ال ViewState وهي تستخدم للاحتفاظ بقيم في مجال الصفحة كامله
اذا ماتعرفها تقدر تشوف هذا الدرس للاخ خليل يشرح عنها
http://www.swalif.net/softs/swalif46/softs206739/

الان الذي سوف نقوم به هو ان نقوم بجلب معلومات كل قائمة في داخل viewstate وواحده لعنوانها والثانيه لمحتواها او كود ال html للمحتوى
وهكذا لكل القوائم حيث سوف يكون اسم ال viewstate لعنوان القائمة الاولى هو menutitle1
واسم ال viewstate لمحتوى القائمة الاولى هو menubody1

وكذلك اسم ال viewstate لعنوان القائمة الثانيه هو menutitle2
واسم ال viewstate لمحتوى القائمة الثانيه هو menutitle2

وهكذا حتى نهاية القوائم

ولكن نحن لا نعلم كم هو عدد القوائم الذي عاد في داخل ال dataset
ولهذا يجب ان ندخله في حلقة تكرارية for تبدا من 1 وتنتهي عند عدد الحقول العائده داخل ال dataset
ولمعرفة عدد الحقول العائده يكون هو dataset.table(0).rows.count


الان ندخل الداتا ست في حلقة

'نقوم بتخزين عدد الحقول العائده في الداتا ست داخل viewstate من اجل استخدامها في صفحة ال html
viewstate("FNumber")=dsRightMenu.Tables(0).Rows.Count
Dim I As Integer = 0
For Ir = dsRightMenu.Tables(0).Rows.Count To 1 Step -1

'هنا نفرغ عنوان ومحتوى كل قائمة في داخل vewstate خاصة بها يكون رقم كل قائمة هو رقم ال I
viewstate("menutitle" & I) = dataset.table(0).rows(I)(0)
viewstate("menubody" & I) = dataset.table(0).rows(I)(1)

Next

بعد الانتهاء من الحلقة يكون لدينا عدد من ال viewstate
كل واحده على حسب رقمها تحتوي على قيمة عنوان او محتوى القائمة ذات نفس الرقم
مثلا ال menutitle1 هي عنوان القائمه الاولى
menutitle2 هي عنوان القائمة الثانيه
و ال menubody3 هو محتوى القائمة الثالثه
وال menubody1 هو محتوى القائمة الاولى

وهكذا


الان نذهب الي صفحة ال html التصميم ونقوم في المكان الذي نريد بافراغ القوائم فيه بوضع نفس الحلقة اعلاه وتكون بدايتها من ال viewstate("FNumber") لان هذه هي نفس رقم الذي عاد في نتائج الداتا ست في صفحة الكود

وفي داخل الحلقه نقوم بافراغ ال viewstate للعنوان المحتوى باستخدام كود html كما يحلوى لنا

ملاحظات :-
لكي تطبق كود vb داخل صفحة ال html ضعه بين الوسمين <%%>
ولكي تجلب الناتج الموجود في داخل ال viewstate يكون هكذا

<%=viewstate("title1")%>

على سبيل المثال

<%
if x=1 then
%>

هنا تكتب كود ال html بالتنسيق الذي ترغب

<%
end if
%>