آموزش تصویری ASP.Net 2010 قسمت 3

[learninweb]

با سلام خدمت تمامی کاربران گرامی در زیر آموزش تصویری ASP.Net 2010 را بررسی میکنیم توجه کنید که شما میتواند آموزش ASP.Net 2010 را به همراه چند بخش آموزشی دیگر که بصورت شبیه سازی شده و تعاملی درس داده شده است و رایگان نیز میباشد از لینک آموزش ASP دانلود کنید. در انتهای این آموزش تصویری نیز کل آموزش (هم متن و هم تصویری) در یک فایل PDF پیوست است.

زماني که سايت ASP.Net شما داراي صفحات بسياري شود شما نياز خواهيد داشت تا از يک کد چندين بار استفاده کنيد. براي اين کار آن کد را در يک فايل ذخيره مي‌کنيم و در مراحل مختلفي از آن استفاده مي‌کنيم. بدون آنکه نياز به دوباره نويسي آن باشد. براي مثال فرض کنيد در تمامي صفحات وب شما يک عکس در بالاي سايت و در پايين آن منوي سايت شما قرار دارد. براي آنکه اين کد در هر صفحه تکرار نشود مي‌توانيد يک بار آن را بصورت يک کنترل کاربر بسازيد و در هر صفحه از آن استفاده کنيد. حال فرض کنيد که مي‌خواهيد در منوي سايت تغييري دهيد در صورتي که از اين روش استفاده کنيد نياز نيست تا تمامي صفحات را تغيير دهيد بلکه فقط کافي است طراحي صفحه کنترل کاربر را تغيير دهيد.
توجه کنيد که فايلهايي که به عنوان کنترل کاربر از آنها استفاده مي‌کنيد حتما بايد در يک شاخه قرار بگيرند و نمي‌توانند در شاخه اصل سايت (شاخه Root) قرار داشته باشند. بهتر است که يک شاخه به نام Control بسازيد و آنها را در آن قرار دهيد.
در اين فصل قصد داريم يک سر صفحه يا Header براي سايت طراحي کنيم و آن را تبديل به يک کنترل کاربر کنيم. اکنون پروژه‌اي با نام ReusableCode ساخته‌ايم. مي‌خواهيم عکسي را به عنوان Header در سايت قرار دهيم. ابتدا يک پوشه ايجاد مي‌کنيم و عکس هاي مورد استفاده خود را در آن قرار مي دهيم. براي ساخت پوشه بر روي نام پروژه در Solution Explorer کليک راست کنيد.




گزينه New Folder را انتخاب کنيد.




در ادامه نام Images را به عنوان نامه پوشه وارد مي‌کنيم و عکس مورد نظر خود را از مکاني که در آنجا قرار دارد کپي کرده و در اين پوشه Paste مي‌کنيم. توجه کنيد که براي Paste کافي است روي پوشه راست کليک کرده و گزينه Paste را انتخاب نمائيد.
اکنون تصوير مورد نظر در داخل شاخه Images کپي شده است. براي قرار دادن تصوير در اين صفحه وب روي کنترل Image کليک کنيد.




با استفاده از ماوس اين کنترل را Drag کرده و داخل ناحيه مشخص شده با کادر قرمز Drop کنيد.
(بر روي کنترل Image دکمه چپ ماوس را فشار دهيد و سپس ماوس را به محل مشخص شده با کادر قرمز برده و دکمه چپ ماوس را رها نمائيد.)




روي خصوصيت ImageUrl کليک کنيد.




روي دکمه ... کليک کنيد.




در اينجا پوشه‌هايي که در پروژه وجود دارند نمايش داده مي‌شوند. روي پوشه Images کليک کنيد.




در قسمت Contents of folder محتويات پوشه نشان داده مي‌شود. روي Baner.jpg کليک کنيد.




روي دکمه OK کليک کنيد.




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

---

بر روي گزينه Add New Item کليک کنيد.

[learninweb]

براي ايجاد يک کنترل کاربر روي Web User Control کليک کنيد.




در اين قسمت مي‌توانيد زباني که از آن در اين کنترل کاربر استفاده مي‌شود را تغيير دهيد. دراين مثال اکنون زبان Visual Basic انتخاب شده است.در قسمت Name دابل کليک کنيد.




عبارت Header را تايپ کنيد.
روي دکمه Add کليک کنيد.




در ابتداي اين کد ابتدا از کلمه Control استفاده شده است و سپس نام زباني که با آن مي‌خواهيم برنامه نويسي کنيم نوشته شده، در ادامه نيز نام کلاس نوشته شده است که مي‌توانيد ان را تغيير دهيد. روي سربرگ Default.aspx کليک کنيد.




قسمت مشخص شده مربوط به کدهايHeader صفحه است که شامل عکس و سه کنترل HyperLink منوي سايت است. مي‌خواهيم اين کد‌ها را در صفحه کنترل کاربر قرار دهيم. روي آيکون Cut در نوار ابزار کليک کنيد.




روي سربرگ Header.ascx کليک کنيد.




بر روي آيکون Paste در نوار ابزار کليک کنيد.




روي سربرگ Default.aspx کليک کنيد.




حال با استفاده از ماوس مي‌خواهيم کنترل کاربر را در ابتداي اين صفحه قرار دهيم. براي اين کار ماوس را روي آيکون صفحه Header.ascx از پنجره Solution Explorer برده و دکمه چپ ماوس را فشرده نگه داشته و ماوس را به محل مشخص شده با کادر قرمز برده و دکمه جپ ماوس را رها نمائيد. (Drag)

---

همان طور که مي‌بينيد اين کنترل به صفحه اضافه شد. روي حالت Source کليک کنيد تا بتوانيد کد توليد شده را مشاهده کنيد.

---

با اين کار دو خط کد به اين صفحه اضافه شده است. اولين خطي که اضافه شده دستور Register است که با استفاده از اين دستور يک کنترل کاربر به نام uc1 تعريف شده است و توسط دستور مشخص شده با کادر آبي اين کنترل در صفحه قرار داده شده است. به اين ترتيب مي‌توانيد اين کنترل در هر صفحه‌اي از پروژه که ساخته مي‌شود استفاده کرد. براي مشاهده نتيجه برنامه بر روي دکمه Start کليک کنيد.




بر روي دکمه Close کليک کنيد.




براي استفاده از کنترل کاربر يا User Control يک راه ديگر نيز وجود دارد. که در ادامه به تشريح آن مي‌پردازيم. در اين روش User Control در Web.config تعريف مي‌شود. بر روي Web.config در پنجره Solution Explorer دابل کليک کنيد تا باز شود.




قبل از شروع کد نويسي توضيح مختصري در مورد Web.Config ارائه مي دهيم. بيشتر برنامه‌هاي کاربردي کامپيوتري داراي بخشي به نام Setup هستند که براي انجام تنظيمات متناسب با استفاده‌هاي مختلف کاربران مورد استفاده قرار مي گيرد. برنامههاي کاربردي مبتني بر Web نيز که داراي کاربران زيادي هستند از اين قائده مستثني نيستند واحتياج به انجام تنظيماتي متناسب با کاربردهاي مختلف خود دارند. در ASP.NET اينگونه تنظيمات که مربوط به منابع مورد استفاده برنامه کاربردي، اطلاعات محلي، اطلاعات امنيتي و... مي‌شوند در داخل يک فايل XML ذخيره مي شوند که نام آن Web.Config است و همانند اسناد XML شامل تعدادي تگ است و به کوچک و بزرگ بودن حروف نيز حساس است. براي اطلاعات بيشتر در مورد XML به نرم افزار آموزشي XML قابل دانلود از سايت http://www.learninweb.com مراجعه نمائيد.
هنگامي که مي‌خواهيم تمام صفحات به کنترلي دسترسي داشته باشند بايد آن کنترل را به صورت Global تعريف کنيم. در ادامه کد مربوط به اضافه کردن User Control را وارد مي کنيم.
<pages >
<controls >
<add tagPrefix="customControls" tagName="header" src="~/control/Header.ascx"/>
</controls>
</pages>


<add tagPrefix="customControls" tagName="header" src="~/control/Header.ascx"/>

در اين قسمت از Tagي به نام add استفاده شده است در کد وارد شده Tagprefix نام مستعاري است که هنگام کد نويسي براي راحتي کار از آن استفاده مي کنيم tagName نيز مي‌تواند هر عبارت که دلخواه شما است باشد در اين مثال از عبارت Header استفاده کرديم تا با نام فايل يکي باشد و خصوصيت src نيز آدرس فايل است. آدرس وارد شده نشان ميدهد که اين فايل Header.ascx نام دارد و در شاخه control موجود در شاخه اصلي (root) موجود است. روي فايل AboutUs.aspx دابل کليک کنيد تا باز شود.




در اين صفحه مي‌خواهيم از کنترلي که در Web.config اضافه کرديم استفاده کنيم. در ادامه کد مربوط به اين عمل را وارد مي‌کنيم.
در کد وارد شده با استفاده از Tagي به نام CustomControl اعلام کرده‌ايم که مي‌خواهيم از CustomControlي به نام Header استفاده کنيم که تعريف آن در فايل Web.config موجود است. براي مشاهده نتيجه روي دکمه Start کليک کنيد.




اکنون نتيجه‌اي که انتظار داريم ظاهر شده است. در ادامه اين بخش مي‌خواهيم با استفاده از CSS يک کلاس براي قسمت منوي سايت خود ايجاد کنيم. روي دکمه Close کليک کنيد.




قبل از شروع ايجاد کلاس، توضيح مختصري در مورد CSS بيان مي کنيم. زبان HTML به عنوان يک سيستم کد سازي استاندارد ايجاد شد تا کاربران قادر باشند بدون توجه به نوع کامپيوتر خود صفحات web را مشاهده کنند. ويژگي مهم HTML قالب بندي ساختاري آن است اما اشکال مهم آن اين است که امکان کنترل کامل بر تمام قسمت‌هاي صفحه را نمي‌دهد. مجمع W3C تلاش زيادي براي توليد CSS کرد و با ايجاد آن امکان طراحي Layout صفحه و توانايي کنترل دقيق بر صفحه را به طراحان داد.
از مهم‌ترين مزاياي CSS اين است كه كاربران مي‌توانند رنگ، فونت، ساختار و ديگر وجوه نمايش متن را تغيير دهند. هدف اصلي از طراحي CSS جدا كردن محتواي متني فايل‌ها از شيوه نمايش آنها است. براي ايجاد يک فايل Css بر روي Website در نوار منو کليک کنيد.




روي Add New Item کليک کنيد.




روي Style Sheet کليک کنيد.

---

روي دکمه Add کليک کنيد.

---

ماوس خود را بر روي Css OutLine ببريد.




روي دکمه Auto Hide کليک کنيد.




روي Style Sheet کليک راست کنيد.




بر روي گزينه Add Style Rule کليک کنيد.




چون مي‌خواهيم کلاس تعريف کنيم گزينه Class Name را انتخاب کنيد.




در ادامه نام کلاس را MenuPanel مي‌گذاريم.
روي دکمه Ok کليک کنيد.




کلاس ها در Css با علامت . قبل از نام کلاس مشخص مي شوند. روي مثلث باز شونده کنار پوشه Classes کليک کنيد.




اکنون تنها ما يک کلاس تعريف کرده ايم که مشخص است. بر روي کلاس MenuPanel کليک راست کنيد.




روي Build Style کليک کنيد.

---

در اين قسمت شما به يک سري تنظيمات مختلف دسترسي داريد که کار با آنها با توجه به نام شان تقريبا واضح است. براي مثال مي‌خواهيم محتوياتي که داراي اين Styleاين کلاس هستند داراي حاشيه باشند براي اين کار روي گزينه Border کليک کنيد.

---

براي تعيين روش رسم حاشيه بالا روي ليست باز شونده قسمت Top کليک کنيد.




روي گزينه Solid را انتخاب کنيد.




چون گزينه Same for all در قسمت border-style فعال است تمامي حاشيه‌هاي راست، پايين و چپ نيز داراي مقدار Solid شده‌اند. در قسمت Preview مي‌توانيد يک نمونه از Style ايجاد شده را نيز مشاهده کنيد. براي تعيين ضخامت حاشيه در جعبه متن border-width کليک کنيد.




عدد 1 را وارد کنيد.
براي تعيين ميزان فاصله با حاشيه روي گزينه Box کليک کنيد.




در ادامه جعبه چک Same for all را غير فعال مي‌کنيم و براي قسمت هاي بالا،پايين و چپ عدد 5 پيکسل را وارد مي‌کنيم.




براي تعيين اندازه روي قسمت Position کليک کنيد.




در داخل کادر Width کليک کنيد.




عدد 250 را وارد کنيد.
روي دکمه OK کليک کنيد.




در صورتيکه‌ با دستورات CSS آشنا باشيد کدهاي ايجاد شده را به سادگي متوجه خواهيد شد. براي اعمال Style ايجاد شده بر روي تصوير و منو روي سربرگ control/Header.ascx کليک کنيد.

---

براي آنکه در تگ asp از کلاس ايجاد شده استفاده کنيم مکان نما را به انتهاي اين خط برده‌ايم. دکمه Space صفحه کليد را فشار دهيد.

---

گزينه CssClass را انتخاب کنيد.




عبارت =”MenuPanel“ را تايپ کنيد.




براي استفاده از يک Style در يک صفحه وب بايد در تگ Head صفحه Style مورد نظر را تعريف کنيد. براي مثال روي سربرگ Default.aspx کليک کنيد.




در خط مشخص شده با استفاده از تگ Link کلاس Style.css تعريف شده است. حال براي استفاده از اين style بايد در تگي که مي‌خواهيد از آن استفاده کنيد اعلام کنيد که از Style تعريف شده استفاده شود. روي دکمه Start کليک کنيد.




همان طور که مشاهده مي کنيد دور قسمت منوي سايت حاشيه ايجاد شده است.

براي اطلاعات بيشتر در مورد Css مي توانيد به نرم افزار آموزشي HTML,Java Script و CSS شرکت انياک قابل دانلود از http://www.learninweb.com مراجعه نمايد.

براي اطلاعات بيشتر در مورد آموزش ASP مي توانيد به نرم افزار آموزش ASP قابل دانلود از http://www.learninweb.com مراجعه نمايد.

توجه کنید که شما میتواند آموزش ASP.Net 2010 را به همراه چند بخش آموزشی دیگر که بصورت شبیه سازی شده و تعاملی درس داده شده است و رایگان نیز میباشد از لینک آموزش ASP دانلود کنید.

کاربر گرامي، شما اکنون در پايان اين بخش قرار داريد.

[rahaamirchermahini]

سلام
ممنون وتشکر بابت اموزشهای زیبا و کامل
من بتازگی شروع به اموختن این زبان کردم با زبانهای html , css چند سالی میشه اشنا م
این سوال رو توی چند انجمن و سایت پرسیدم اما جواب درستی نگرفتم اگه ممکنه شماراهنمایی کنین چون نسبت به مطالب اموزشی مطمئنا تبهر کافی رو دارین
سوال :
1- ایا میشه با با زبان ASP.NET یه وب سایت رو از پایه طراحی کرد یعنی میشه استایل قالب رو هم با ASP.NET نوشت به شکلی که نیاز به زبانهای html , css نباشه یا اینکه برای طراحی قالب سایت حتما به زبانهای html , css نیازه ؟
2 - در صورتی که جواب سوال بالا مثبته و این امکان وجود داره لطفا و در صورت امکان یه قالب خیلی ساده که متشکل از هدر , منوی بالا , کانتینر (وسط صفحه ) , و فوتر باشه البته با نوع پروژه انتخابی برای این کار (یعنی انتخاب نیو پروژه در نیو پروژه ویژوآل استادیو (اینکه برای طراحی وب سایت کدام گزینه رو باید انتخاب کرد ) ) و با چه اسم و پسوندی ذخیره بشه و بعداز کد نویسی چطور اجرا بشه برای تست کردن ( در کد نویسی با html , css قالب اصلی با دونام index , style ذخیره میشد و در مرورگر تست میشد ) اما ایا برای تست قالب هایی با ASP.NET هم میشه به همون روش قالب رو تست کرد ؟
و بطور کلی یه پروژه ساده و مقدماتی رو اگر در اموزشهاتون دارین لطفا معرفی کنین اگر ندارید و ممکنه و اموزشی در این زمینه سراغ دارین واسه مبتدیان لطفا لینک آموزش رو قرار بدهید
با تشکر و ارزوی توفیق
امیدوارم همیشه همین طور پرانرژی و شاد باشید و با اموزشهای خوبتون به مردم کمک کنین
شاد باشید

[rahaamirchermahini]

سلام
از اینکه مجددا مزاحم میشم واقعا عذر میخوام
اما در این اموزش که دارید یه طراحی قالب سایت رو با این زبان انجام میدهید در قسمت اول و بعد از ساخت پروژه برای اون قسمتی که قرار هدر سایت در اون قرار بگیره چه نوع فایلی باید ایجاد کنیم ایا مثل اموزشهای 1 و 2 این سری اموزش برای طراحی هدر هم باید یک نیو وب فرم باز کنیم در این پروژه و بعدا بریم سراغ نیو فولدر و طراحی ؟
ینی بعداز باز کردن یه نیو پروژه (new > website >ASP.NET Emptywebsite ) برای اون فایلی که قرار هدر در اون قرار بگیره و قالب کلی ما در اون فایل باشه باید در قسمت (website > add new item ) کدام گزینه رو انتخاب کنیم و در اون طراحی های بعدی رو انجام بدیم
ایا نیو فایل ما باید یک web form باشه ؟
با تشکر وارزوی توفیق
خواهش میکنم حالا که این اموزش بسیار کاربردی رو دارین اموزش میدین یکم روان تر وبا جزئیات کاملتر اموزش بدین تا مبتدی هایی امثال من هم در اموزش گیج و گم نشن
با تشکر وارزوی توفیق