يکی از ملاکهای يک سايت حرفهای اينه که تمام صفحات سايت از اين قالب واحد
پيروی کنن و هر صفحهای شکلی متفاوت نداشته باشه.
در ASP.NET چيزی وجود داره به اسم User Control که به ما اين امکان را میده که
کدها رو بنويسم و طراحیهای خودمون رو يک بار توش انجام بديم و بعد هر جا و هر چند
بار که لازم بود ازش استفاده کنيم.
ما میتونيم برای اينکه طراحی همه صفحات شکل هم باشن طراحی بخش بالايی صفحه رو
توی يک User Control و طراحی بخش پايينی را توی يک User Control ديگه قرار بديم و
داخل همه صفحات از اونها استفاده کنيم. به اين صورت طراحی همه صفحات عينا شبيه هم
میشن و در صورتی که بخواهيد طراحی صفحه رو عوض کنيد فقط کافيه اون دو تا رو عوض
کنيد تا همه صفحات عوض بشن.
فايلهای User Cntrolها پسوند ASCX دارن. برای ايجاد User Control توی پنل
Solution Explorer روی اسم پروژه راست کليک کنيد از منو Add گزينه Add Web User
Control… رو انتخاب کنيد.
اينجا میخوايم طرح بالا را برای برای پروژهای که در دفعات قبل ساختيم استفاده
کنيم.
کد HTML صفحه بالا با اين صورت است:
<table border="1" width="100%">
<tr>
<td bgcolor="#FFFF00" align="center">
<h1>عنوان سايت</h1>
</td>
</tr>
<tr>
<td bgcolor="#FFFF00" align="center">صفحه اول - درباره
ما -محصولات - تماس با ما</td>
</tr>
<tr>
<td height="200px">
به سايت ما خوشآمديد. اينجا متن اصلی هر صفحه
قرار میگيرد و در هر صفحهای اين بخش عوض خواهد شد.
</td>
</tr>
<tr>
<td bgcolor="#00FF00" align="center">کليه حقوق محفوظ است</td>
</tr>
</table>
ما دو تا User Control برای بخش بالايی و پايينی ايجاد میکنيم و از اونها توی
صفحه استفاده میکنيم. بخش بالای کد (بالای «به سايت ما خوشآمديد») توی يه User
Control و بخش پايينی سايت (پايين «عوض خواهد شد») توی يه User Control ديگه قرار
میگيره.
توی پنل Solution Explorer روی اسم پروژه راست کليک کنيد و از منو Add زير منو Add
Web User Control… رو انتخاب کنيد. توی پنجرهای که باز میشه نام Header رو تايپ
کنيد. به بخش بالايی سايت معمولا Header میگن به همين خاطر ما اين اسم رو برای اين
User Control انتخاب میکنيم.
User Control که باز شد توی بخش HTML بريد و کدهای بخش بالايی رو اضافه کنيد:
<table border="1" width="100%" dir="rtl">
<tr>
<td bgcolor="#FFFF00" align="center">
<h1>عنوان سايت</h1>
</td>
</tr>
<tr>
<td bgcolor="#FFFF00" align="center">صفحه اول - درباره
ما -محصولات - تماس با ما</td>
</tr>
<tr>
<td height="200px">
(يادتون هست که برای ذخيره صفحات فارسی چيکار بايد میکرديم!؟) ما مجبور نيستيم
اينجا کدها رو مستقيما وارد کنيم و میتونيم در صورت تمايل در بخش Design هم طراحی
خودمون رو انجام بديم. بخش بالا میتونه حتی فقط شامل عنوان سايت باشه.
يک User Control ديگه به نام Footer به ترتيبی که گفتم ايجاد کنيد و کدهای بخش
پايينی صفحه رو بهش اضافه کنيد:
</td>
</tr>
<tr>
<td bgcolor="#00FF00" align="center">کليه حقوق محفوظ است</td>
</tr>
</table>
خب حالا ما طراحی صفحات رو داريم و فقط بايد از اونهای توی صفحات خودمون استفاده
کنيم. فايل Default.aspx رو باز کنيد و از توی Solution Explorer کنترلهای Header
و Footer را به داخل صفحه بکشيد:
بعد از اجرای پروژه صفحه شما به اين صورت خواهد بود:
 |
در ASP.NET 2.0 مورد جديدی اضافه شده به نام Master Page که کار طراحی صفحه رو خيلی
راحتر میکنه. ما میتونيم داخل Master Page بالا و پايين صفحه و کلا همه طراحی رو
انجام بديم و جای قرار گرفتن نوشتههای صفحه رو تعيين کنيم. برای استفاده از طراحی
فقط کافيه مشخص کنيم هر صفحه از چه Master Pageای استفاده کنه.
|
حالا میتونيد چندتا صفحه جديد درست کنيم و از User Control های خودتون داخل اونها
هم استفاده کنيم. میخوايم دو تا از لينکهای بالا رو درست کنيم.
اول صفحه درباره ما رو میسازيم. توی Solution Explorer روی اسم پروژه راست کليک
کنيد و از منو Add زيرمنو Add Web Form… رو انتخاب کنيد. اسم صفحه جديد رو AboutUs
بذاريد. بعد همون طوری که قبلا توضيح دادم Layout صفحه رو FlowLayout بذاريد و
بخشهای Header و Foter رو به اون صفحه اضافه کنيد.
حالا لينکهای بالا رو درست میکنيم. اگه User Control بخش بالايی (Header) باز
نيست، بازش کنيد. داخل بخش Design بريد و متن «صفحه اول» رو انتخاب کنيد. بعد
دکمههای Ctrl+L رو بزنيد و اسم فايل مربوط به صفحه اول رو وارد کنيد:
همينکار رو برای «درباره ما» هم تکرار کنيد و به صفحه AboutUs.aspx لينکش کنيد.
پروژه رو اجرا کنيد. حالا تقريبا سايتی داريم که شبيه به يه سايت واقعی به نظر
میرسه!
