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

[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 دانلود کنید.

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