14-10-12, 11:03 PM
MasterPages :
لعلك تلاحظ في عدد كبير من المواقع ان جزءاً ثابتاً من الموقع لا يتم تغييره في كل الصفحات ، حيث يبدو كجزء من الصفحة ويتفاعل معها ولكنه يبدو مكرراً في كل الصفحات .
في الواقع هذا الجزء ليس موجوداً في كل الصفحات ، لتتخيل ان الموقع به 100 صفحة وقمت بعمل نفس الجزء في كل مرة ، ثم رغبت في تغيير احد خصائصه ، فستضطر للتعديل في ال 100 صفحة كاملة .
من هنا ظهر مبدأ ال include في ASP والذي كان يتيح لك عمل Include لصفحة بعينها في اي جزء من صفحتك ، ومع ASP.net ظهرت لنا ال Master Pages والتي تجعل من صفحة ما صفحة رئيسية لكل الصفحات .
سنجرب هذا المبدأ سوية ، قم باضافة New Item واختر Master Page بالشكل التالي :
بعد انشاءك لها ، اول ملا تلاحظه في صفحة الكود هو وجود العنصر الجديد التالي :
يمثل هذين الوسمين الصفحة التي سيتم عمل Master Page لها ، قم بوضع اكوادك المختلفة قبل وبعد هذه المنطقة ، اما هذه المنطقة فسيتم عرض الصفحة الرئيسية فيها .
ليس هذا فقط ، اي أن كتابة الكود فوق وتحت الوسم لا يعني انها ستظل فوق وتحت الصفحة فقط ، في المثال التالي سنجعل الصفحة الرئيسية تظهر في مربع صغير فقط وسط الصفحة فيما ال 9 مربعات الاخرى تحتوي على بيانات ما ، بالصورة التالية مثلاً :
الكود الخاص بهذه الصفحة سيكون بالشكل التالي :
وطبعاً يمكن تصميمها من خلال ال Designer وليس من الكود فقط ، بعد الانتهاء من التصميم قم بانشاء صفحة جديدة ، وفي شاشة طلب Master Page قم بتحديدها له بالشكل التالي :
لاحقاً سيطلب منك تحديدها في شاشة اخرى ، والآن مع اي صفحة ترغب في حصولها على نفس الشكل ستقوم باعطاءها نفس القيمة ، حتى لو كانت صفحة قديمة يمكنك تعديل الخاصية التالي في Page :
ومراعاة وجود هذا الوسم تحديداً :
لكن لا تنس ان لا تحتوي على تكرارات مثل ال head ووسم html .
*** اي تغيير في ال Master Page سيغير في كل الصفحات .
لعلك تلاحظ في عدد كبير من المواقع ان جزءاً ثابتاً من الموقع لا يتم تغييره في كل الصفحات ، حيث يبدو كجزء من الصفحة ويتفاعل معها ولكنه يبدو مكرراً في كل الصفحات .
في الواقع هذا الجزء ليس موجوداً في كل الصفحات ، لتتخيل ان الموقع به 100 صفحة وقمت بعمل نفس الجزء في كل مرة ، ثم رغبت في تغيير احد خصائصه ، فستضطر للتعديل في ال 100 صفحة كاملة .
من هنا ظهر مبدأ ال include في ASP والذي كان يتيح لك عمل Include لصفحة بعينها في اي جزء من صفحتك ، ومع ASP.net ظهرت لنا ال Master Pages والتي تجعل من صفحة ما صفحة رئيسية لكل الصفحات .
سنجرب هذا المبدأ سوية ، قم باضافة New Item واختر Master Page بالشكل التالي :
بعد انشاءك لها ، اول ملا تلاحظه في صفحة الكود هو وجود العنصر الجديد التالي :
كود :
[color=#000080]<asp:ContentPlaceHolder id=[COLOR=#0000ff]"ContentPlaceHolder1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]</asp:ContentPlaceHolder>[/color]يمثل هذين الوسمين الصفحة التي سيتم عمل Master Page لها ، قم بوضع اكوادك المختلفة قبل وبعد هذه المنطقة ، اما هذه المنطقة فسيتم عرض الصفحة الرئيسية فيها .
ليس هذا فقط ، اي أن كتابة الكود فوق وتحت الوسم لا يعني انها ستظل فوق وتحت الصفحة فقط ، في المثال التالي سنجعل الصفحة الرئيسية تظهر في مربع صغير فقط وسط الصفحة فيما ال 9 مربعات الاخرى تحتوي على بيانات ما ، بالصورة التالية مثلاً :
الكود الخاص بهذه الصفحة سيكون بالشكل التالي :
كود :
[color=#000080]<%@ Master Language=[COLOR=#0000ff]"C#"[/color] AutoEventWireup=[color=#0000ff]"true"[/color] CodeFile=[color=#0000ff]"MasterPage.master.cs"[/color] Inherits=[color=#0000ff]"MasterPage"[/color] %>[/COLOR]
[color=#000080]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/color]
[color=#000080]<html xmlns=[COLOR=#0000ff]"http://www.w3.org/1999/xhtml"[/color]>[/COLOR]
[color=#000080]<head runat=[COLOR=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]<title>[/color]Untitled Page[color=#000080]</title>[/color]
[color=#000080]<asp:ContentPlaceHolder id=[COLOR=#0000ff]"head"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]</asp:ContentPlaceHolder>[/color]
[color=#000080]</head>[/color]
[color=#000080]<body>[/color]
[color=#ff8000]<form id=[COLOR=#0000ff]"form1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]<div>[/color]
[color=#000080]<center>[/color]
[color=#008080]<table border=[COLOR=#0000ff]"1"[/color] width=80%>[/COLOR]
[color=#008080]<tr>[/color]
[color=#008080]<td>[/color]hiiii, i am here[color=#008080]</td>[/color]
[color=#008080]<td>[/color][color=#800080]<img src=[COLOR=#0000ff]"http://vb4arab.com/vb/attachments/logo.jpg"[/color] />[/COLOR][color=#008080]</td>[/color]
[color=#008080]<td>[/color]any thing[color=#008080]</td>[/color]
[color=#008080]</tr>[/color]
[color=#008080]<tr>[/color]
[color=#008080]<td>[/color]hii again[color=#008080]</td>[/color]
[color=#008080]<td>[/color]
[color=#000080]<asp:ContentPlaceHolder id=[COLOR=#0000ff]"ContentPlaceHolder1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]</asp:ContentPlaceHolder>[/color]
[color=#008080]</td>[/color]
[color=#008080]<td>[/color][color=#ff8000]<input type=[COLOR=#0000ff]"button"[/color] />[/COLOR][color=#008080]</td>[/color]
[color=#008080]</tr>[/color]
[color=#008080]<tr>[/color]
[color=#008080]<td colspan=2>[/color]large TD :)[color=#008080]</td>[/color]
[color=#008080]<td>[/color]bye[color=#008080]</td>[/color]
[color=#008080]</tr>[/color]
[color=#008080]</table>[/color]
[color=#000080]</center>[/color]
[color=#000080]</div>[/color]
[color=#ff8000]</form>[/color]
[color=#000080]</body>[/color]
[color=#000080]</html>[/color]وطبعاً يمكن تصميمها من خلال ال Designer وليس من الكود فقط ، بعد الانتهاء من التصميم قم بانشاء صفحة جديدة ، وفي شاشة طلب Master Page قم بتحديدها له بالشكل التالي :
لاحقاً سيطلب منك تحديدها في شاشة اخرى ، والآن مع اي صفحة ترغب في حصولها على نفس الشكل ستقوم باعطاءها نفس القيمة ، حتى لو كانت صفحة قديمة يمكنك تعديل الخاصية التالي في Page :
ومراعاة وجود هذا الوسم تحديداً :
كود :
[color=#000080]<asp:Content ID=[COLOR=#0000ff]"Content2"[/color] ContentPlaceHolderID=[color=#0000ff]"ContentPlaceHolder1"[/color] Runat=[color=#0000ff]"Server"[/color]>[/COLOR]
[color=#000080]</asp:Content>[/color]لكن لا تنس ان لا تحتوي على تكرارات مثل ال head ووسم html .
*** اي تغيير في ال Master Page سيغير في كل الصفحات .