يکی از ملاک‌های يک سايت حرفه‌ای اينه که تمام صفحات سايت از اين قالب واحد پيروی کنن و هر صفحه‌ای شکلی متفاوت نداشته باشه.

در ASP.NET چيزی وجود داره به اسم User Control که به ما اين امکان را می‌ده که کدها رو بنويسم و طراحی‌های خودمون رو يک بار توش انجام بديم و بعد هر جا و هر چند بار که لازم بود ازش استفاده کنيم.

ما می‌تونيم برای اينکه طراحی‌ همه صفحات شکل هم باشن طراحی بخش بالايی صفحه رو توی يک User Control و طراحی بخش پايينی را توی يک User Control ديگه قرار بديم و داخل همه صفحات از اون‌ها استفاده کنيم. به اين صورت طراحی همه صفحات عينا شبيه هم می‌شن و در صورتی که بخواهيد طراحی صفحه رو عوض کنيد فقط کافيه اون دو تا رو عوض کنيد تا همه صفحات عوض بشن.

فايل‌های User Cntrolها پسوند ASCX دارن. برای ايجاد User Control توی پنل Solution Explorer روی اسم پروژه راست کليک کنيد از منو Add گزينه Add Web User Control… رو انتخاب کنيد.

اينجا می‌خوايم طرح بالا را برای برای پروژه‌ای که در دفعات قبل ساختيم استفاده کنيم.

کد HTML صفحه بالا با اين صورت است:

ما دو تا User Control برای بخش بالايی و پايينی ايجاد می‌کنيم و از اون‌ها توی صفحه استفاده می‌کنيم. بخش بالای کد (بالای «به سايت ما خوش‌آمديد») توی يه User Control و بخش پايينی سايت (پايين «عوض خواهد شد») توی يه User Control ديگه قرار می‌گيره.

توی پنل Solution Explorer روی اسم پروژه راست کليک کنيد و از منو Add زير منو Add Web User Control… رو انتخاب کنيد. توی پنجره‌ای که باز می‌شه نام Header رو تايپ کنيد. به بخش بالايی سايت معمولا Header می‌گن به همين خاطر ما اين اسم رو برای اين User Control انتخاب می‌کنيم.

User Control که باز شد توی بخش HTML بريد و کدهای بخش بالايی رو اضافه کنيد:

(يادتون هست که برای ذخيره صفحات فارسی چيکار بايد می‌کرديم!؟) ما مجبور نيستيم اينجا کدها رو مستقيما وارد کنيم و می‌تونيم در صورت تمايل در بخش Design هم طراحی خودمون رو انجام بديم. بخش بالا می‌تونه حتی فقط شامل عنوان سايت باشه.

يک User Control ديگه به نام Footer به ترتيبی که گفتم ايجاد کنيد و کدهای بخش پايينی صفحه رو بهش اضافه کنيد:

خب حالا ما طراحی صفحات رو داريم و فقط بايد از اون‌های توی صفحات خودمون استفاده کنيم. فايل 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 لينکش کنيد. پروژه رو اجرا کنيد. حالا تقريبا سايتی داريم که شبيه به يه سايت واقعی به نظر می‌رسه!

[ 09:33 AM ]   .   [ Comments (8) ]

حالا که ظاهر صفحه رو درست کرديم می‌رسيم به نوشتن کد صفحه. همون‌طور که گفتم می‌خوايم کاری کنيم که وقتی روی دکمه کليک شد کدمون اجرا بشه و متن خوش‌آمدگويی نمايش داده بشه. روی دکمه دابل کليک کنيد تا Visual Studio کدهای لازم برای اين کار رو آماده کنه.

همه کنترل‌ها دارای رويداد‌های (Events) هستند که هر موقع اون رويدادها اتفاق افتادند کدی که برای اون رويداد نوشته شده اجرا می‌شه. رويداد OnClick که يکی از پراستفاده‌ترين رويداد‌ها هست وقتی روی کنترل کليک شد اجرا می‌شود. وقتی روی کنترل دابل کليک می‌کنيد Visual Studio تابع مورد نياز رو می‌سازه و اون رو به عنوان رويداد OnClick منصوب می‌کنه. فقط لازمه شما توی اون تابع کدتون رو بنويسيد.

توی ويرايش‌گر تايپ کنيد: Label1 (به ويرايش‌گرتون دست نزنيد تا بعدش بگم چيکار کنيد!)

هميشه يادتون باشه C# به بزرگی کوچيکی حروف به شدت حساسه! و هرگز Label1 برابر با label1 نيست. خيلی از مشکلات برنامه‌ها به همين خاطر پيش می‌آن.

هر کنترلی برای خودش يه اسم منحصربه‌فرد داره که بهش ID می‌گن. ما برای اشاره به هر کدام از کنترل‌های داخل صفحه و کار با هر کدوم بايد از اين ID استفاده کنيم. ID مربوط به Label ما Label1 هستش و چون ما می‌خوايم با اون کار کنيم و متن اون رو عوض کنيم به اين نام اشاره می‌کنيم.

موقع ايجاد يک کنترل‌ Visual Studio به طور خودکار برای اون ID تعيين می‌کنه. مثلا ID اولين Label صفحه Label1 و ID دومين Label صفحه Label2 می‌شه. توی پنل مشخصات می‌تونيد ID کنترل رو ببينيد و عوض کنيد. بهتره برای کنترل‌های خودتون اسم بامسما انتخاب کنيد تا اگر تعداد کنترل‌ها زياد شد برای پيدا کردن اون‌ها به مشکل برنخوريد.

بعد از Label1 يه دونه نقطه بذاريد. اون وقت يه پنجره باز می‌شه مثل اين:

توی C# (و اکثر زبان‌های ديگه) وقتی از نقطه استفاده می‌کنيم که می‌خوايم از يکی از خصوصيات (يا متدهای) مربوط به کلاس مورد نظر خود استفاده کنيم. (Label هم يه نوع کلاس هستش) ما اينجا می‌خوايم خصوصيت Text مربوط به Label رو تغيير بديم به خاطر همين نقطه رو می‌ذاريم که بتونيم به خصوصيت Text برسيم.

ما وقتی نقطه رو می‌زنيم Visual Studio همه موارد مربوط به کلاس رو نشون می‌ده تا بتونيم از بين موارد يکی رو انتخاب کنيم. (با استفاده از اين قابليت می‌تونيم حتی با کلاس‌هايی که آشنايی هم نداريم تا حد زيادی کار کنيم) در ادامه کد Tex… رو وارد کنيد تا مورد Text انتخاب بشه، اون وقت Enter رو بزنيد تا عبارت تکميل بشه.

خب حالا ما به خصوصيت Text مربوط به Label خودمون دسترسی داريم و می‌خوايم توی اون متن خوش‌آمدگويی رو بنويسيم. به عباری ديگه می‌خوايم متنی رو به خصوصيت Text منتصب کنيم. اين کار با علامت = انجام می‌شه. در آخر کد علامت = رو وارد کنيد.

ما چی رو می‌خوايم داخل Label قرار بديم؟ می‌خوايم نام شخص بعلاوه متن خوش‌آمد رو داخل Label بنويسيم. مثلا اگر کاربر اسم «نويد» رو وارد کرده باشه بايد بنويسه: «نويد، خوش‌آمدی!»

برای خوندن متن وارد شده داخل Textbox بايد خصوصيت Text مربوط به Textbox1 را بخونيم. بعد ما اون رو با متن «، خوش‌آمدی!» جمع می‌بنديم. در ادامه کد اين رو وارد کنيد:

برای اين‌که C# متوجه بشه با يه رشته متنی طرفه بايد متن رو داخل علامت نقل قول قرار بدين. علامت + هم دو متن رو به هم پيوند می‌ده. در آخر علامت ; را وارد کنيد. در C# بايد آخر همه خط‌ها يک علامت ; باشه. کد نهايی ما به اين صورت خواهد بود:

حالا می‌تونيم پروژه رو اجرا کنيم. اما اول بايد مشخص کنيم پروژه ما با کدوم صفحه شروع به کار کنه. برای اين کار توی Solution Explorer روی فايل Default.aspx راست کليک کنيد و گزينه Set As Start Page رو بزنيد. بعد توی نوار ابزار بالا روی Start کليک کنيد. در صورتی که نوار ابزار مربوطه رو نمی‌بينيد منو View > Toolbars > Debug رو تيک بزنيد.

در صورتی که همه‌چيز مرتب باشه صفحه شما توی Internet Explorer باز می‌شه. اسمی وارد کنيد و نتيجه کار رو ببينيد! موفق باشيد!

[ 10:34 AM ]   .   [ Comments (7) ]

اين دفعه می‌خوام نحوه ايجاد يک برنامه خيلی ساده ASP.NET و اجرای اون رو توضيح بدم. می‌خوايم صفحه‌ای ايجاد کنيم که اسم کاربر رو می‌گيره و يه پيام خوش‌آمدگويی نشون می‌ده.

اول پروژه‌ای رو که توی مطالب قبلی ساختيم رو باز کنيد. اگه فايل Default.aspx باز نيست با کليک روی اون توی Solution Explorer بازش کنيد.

معمولا سمت چپ صفحه پنلی به اسم Toolbox هست که از توی اون می‌تونيم اشيائی که مربوط به صفحه هستن رو توی صفحه بکشيم و از اون‌ها برای طراحی صفحه استفاده کنيم. اگر اين پنل رو نمی‌بينيد از منو View گزينه Toolbox رو انتخاب کنيد. اين پنل چندين زبانه داره که ما اينجا از زبانه Web Forms استفاده می‌کنيم.

دفعه قبل گفتم که با اضافه کردن خصوصيت runat="server" به تگ‌های عادی می‌تونيد اون‌ها رو برای استفاده توی ASP.NET آماده کنيد. به اين نوع کنترل‌ها HTML Control می‌گن که برای ايجاد سازگاری بين ASP.NET و صفحات HTML قديمی درست شدن. اما کنترل‌های ديگه‌ای هم وجود دارن به اسم Server Control که نسبت به اون کنترل‌ها قابليت‌های بيشتری دارن. تگ‌های ايجاد شده با اين کنترل‌ها با <ASP:… شروع می‌شن. موارد موجود در زبانه Web Forms شامل Server Controlها می‌شن.

ما به اين کنترل‌ها نياز داريم:

• کنترل Label که به ما اجازه می‌ده متن داخلش رو با استفاده از کد خودمون تغيير بديم. اين کنترل متن خوش‌آمدگويی ما رو نشون می‌ده.
   
• کنترل Textbox که به کاربر اجازه می‌ده متنی رو توش وارد کنه. ما با استفاده از کدمون می‌تونيم نوشته کاربر رو بخونيم. از اين کنترل ما برای گرفتم اسم کاربر استفاده می‌کنيم.
   
• کنترل Button که يک دکمه است و کاربر می‌تونه روی اون کليک کنه. وقتی روی دکمه کليک شد کدی که ما نوشتيم اجرا می‌شه. ما برای اين دکمه کدی می‌نويسيم که اسم کاربر رو از کنترل Textbox بخونه و متن خوش‌آمدگويی رو توی Lable بنويسه.

اول کنترل‌های Label ، Textbox و Button رو از توی Toolbox به داخل صفحه بکشيد.

بعد با دکمه‌های فلش‌دار صفحه‌کليد نشانگر رو ما بين کنترل‌ها ببريد و دکمه Enter رو بزنيد تا هر کنترل توی يه خط قرار بگيره.

در صورتی که فاصله‌های زياد ايجاد شده با دکمه Enter رو دوست نداريد می‌تونيد از ترکيب دکمه‌های Shift+Enter استفاده کنيد.

می‌بينيد که Label و Button متن پيش‌فرض خودشون رو دارن. برای تغيير متن داخل دکمه روی کنترل Button کليک کنيد. با کليک روی هر کنترل در پنل Properties که معمولا پايين سمت راست صفحه قرار داره ليست خصوصيات اون نمايش داده می‌شه و شما می‌تونيد اون خصوصيات رو ويرايش کنيد. در صورتی که اين پنل رو پيدا نمی‌کنيد از منو View گزينه Properties Window رو انتخاب کنيد.

برای تغيير متن داخل دکمه بايد خصوصيت Text اون رو عوض کنيد. توی پنل خصوصيات (Properties) اين خصوصيت رو پيدا کنيد و توی اون متن «ارسال» رو وارد کنيد. وقتی Enter رو بزنيد می‌بينيد که نوشته داخل دکمه عوض شده. (می‌تونيد خودتون امتحان کنيد ببينيد بقيه خصوصيات باعث چه تغييراتی توی کنترل می‌شن!)

اين کار رو برای کنترل Label هم تکرار کنيد و متن اون رو بکنيد: «لطفا نام خود را وارد کنيد».

ASP.NET و کلا تکنولوژی .NET از يونی‌کد استفاده می‌کنه و به راحتی می‌شه هر جا از کاراکترهای غير لاتين هم استفاده کرد. البته شما هنگام ذخيره صفحاتی که شامل کاراکترهای يونی‌کد هستند بايد مشخص کنيد که به صورت يونی‌کد ذخيره شوند. برای اين کار از منو File مورد Save As… رو بزنيد و بعد روی فلش کوچيک کنار دکمه Save کليک کنيد و Save with Encoding... رو بزنيد و اونجا Unicode (UTF-8 with signature) – Codepage 65001 رو انتخاب کنيد. در صورتی که داخل کد يا HTML باشيد به منو File گزينه Advanced Save Options… اضافه می‌شه که اونجا هم می‌تونيد نوع کدگذاری رو تعيين کنيد.

[ 10:52 AM ]   .   [ Comments (3) ]

باز کردن پروژه‌های ايجاد شده قبلی

در مطلب قبلی يه پروژه جديد ايجاد کرديم. حالا می‌خوايم با باز کردن همون پروژه به کار خودمون ادامه بديم. با باز کردن دوباره Visual Studio پنجره‌ای باز می‌شه به اسم Start Page که توی اون اسم چهار پروژه‌ای که اخيرا روی اون‌ها کار می‌کرديم وجود داره که با کليک روی هر کدوم می‌تونيم اون پروژه رو باز کنيم. همچنين با استفاده از منو File > Open > Project می‌تونيد پروژه‌های قبلی رو باز کنيد. پروژه قبلی ما بايد توی C:\Inetpub\wwwroot\ASPNETmojde1 قرار داشته باشه.

بخش طراحی (Design) و بخش برنامه‌نويسی (Code) صفحات

هنگام ايجاد پروژه جديد به طور پيش‌فرض يک فايل ساخته می‌شه به اسم WebForm1.aspx ، بهتره اسم اين فايل رو به Default.aspx تغيير بديد تا اون فايل به عنوان صفحه اول سايتتون در نظر گرفته بشه. برای اين کار توی پنل Solution Explorer روی اسم فايل راست کليک کنيد و Rename رو بزنيد.

همون‌طور که می‌دونيد توی سايت‌ها برای هر صفحه‌ای يه فايل وجود داره. مثلا وقتی وارد Mojde.com می‌شيد صفحه‌ای که می‌بينيد يه فايل هستش، ولی شما که اسم فايلی رو وارد نکرديد! برای سرور يه سری فايل تعريف شده که وقتی شما اسم فايلی رو وارد نمی‌کنيد سرور به طور پيش‌فرض اون فايل‌ها رو می‌آره. مثلا اگه توی بخش آدرس www.mojde.com رو وارد کنيد سرور فايل www.mojde.com/index.html رو بهتون نشون می‌ده. در اينجا index.html فايل پيش‌فرض سرور هستش. توی سرورهای ويندوز Default.aspx يه فايل پيش‌فرض هستش.

اگه فايل Default.aspx باز نيست روش دابل کليک کنيد تا باز بشه. صفحه‌ای که می‌بينيد بهش می‌گن Design View که توی اون می‌تونيد طراحی صفحه خودتون رو انجام بديد. می‌تونيد نوشته‌های خودتون رو توی اون بنويسيد و با استفاده از نوار ابزار Formatting شکل و فرم نوشته‌ها رو تعيين کنيد. (اگه اين نوار ابزار رو نمی‌بينيد بريد توی منو View > Toolbars > Formatting) از منوهای Format و Table هم می‌تونيد استفاده کنيد.

همه اين‌ها باعث ايجاد کد HTML می‌شن. اين کد رو می‌تونيد توی بخش HTML ببينيد و در صورت نياز ويرايش کنيد.

همين‌طور که می‌بينيد کدهای صفحات ASPX تا حد بسيار زيادی شبيه صفحات HTML هستن و فقط چند مورد جديد توی اون‌ها وجود داره. مثلا به بعضی تگ‌ها خصوصيت runat="server" اضافه شده که مشخص می‌کنه تگ شما در سرور قابل دستری، تغيير و دستکاری هست و شما با برنامه خودتون می‌تونيد خصوصيات اون مثل رنگ و فونت و بقيه ظواهر رو تعيين کنيد.

در واقع شما می‌تونيد فقط با اضافه کردن اين خصوصيت به بعضی از تگ‌های صفحات HTML فعلی خودتون يک صفحه ASPX کامل داشته باشيد.

توی بخش HTML شما می‌تونيد هر کد HTML را که می‌خواهيد بدون هيچ محدوديتی اضافه کنيد و به صفحه خودتون شکل بديد.

چيزهايی رو که ديديد مربوط به طراحی ظاهری صفحات هستن و شامل هيچ کد برنامه‌نويسی نمی‌شن. همه کدهای برنامه‌نويسی شما توی يه فايل جداگونه نوشته و نگهداری می‌شن تا ظاهر صفحه و برنامه‌نويسی اون باهم قاطی نشه. اين باعث می‌شه خوانايی کدهای شما بهتر بشه و انجام تغييرات ظاهری ساده احيانا باعث تغيير در برنامه‌نويسی و ايجاد باگ نمی‌شه.

برای ديدن کدهای صفحه روی فايل Default.aspx راست کليک کنيد و مورد View Code رو انتخاب کنيد. از دکمه‌های بالای Solution Explorer هم می‌تونيد برای رفت و آمد بين کد و طراحی (Design) استفاده کنيد:

دفعه بعد ساخت يه صفحه ساده با برنامه‌نويسی و اجرای اون رو بهتون ياد می‌دم.

[ 10:10 PM ]   .   [ Comments (4) ]