بایگانی برچسب: s

images

آشنایی با محیط Visual Studio و ساختن نخستین پروژه

با سلام

جلسه دوم آموزش Asp.NET را آغاز می کنم . . .

دوستان عزیز : در ابتدای این جلسه این موضوع را بیان کنم که شما برای یادگیری تکنولوژی Asp.NET برای ساخت صفحات وب پویا، باید با زبان برنامه نویسی #C و Html, Css و JavaScript آشنایی داشته باشید. اگر با این زبان ها آشنایی ندارید، می توانید آموزش های مربروط به آنها را در سایت پنگوئن دنبال کنید.

(Visual Studio IDE (Integrated Development Environment

همانطور که در مقاله قبل هم بیان شد، نرم افزار ویژوال استودو یک محیط توسعه یکپارچه را برای کدنویسی، کامپایل کردن و اشکال زدایی (دیباگ) کد را در اختیار برنامه نویسان قرار می دهد. ویژوال استودیو یک مجموعه ای از ابزار های لازم برای ساخت صفحات وب پویا، وب سرویس ها، برنامه های ویندوزی و . . . را ارائه می دهد.

من در این آموزش از Visual Studio 2015 بر روی ویندوز ۱۰ استفاده میکنم.

ساختن پروژه وب

برای ساخت پروژه از یکی از سه روش زیر استفاده کنید :

روش اول :

از منوی File گزینه New و سپس Project… را انتخاب کنید.

همانند شکل زیر

01

روش دوم :

از کلید های میانبر Ctrl + Shift + N استفاده کنید.

روش سوم :

از کادر Start Page ، قسمت Start ، گزینه New Project را انتخاب کنید.

همانند شکل زیر

02

توجه کنید که کادر Start Page بعد از اجرای نرم افزار ویژوال استودیو نمایش داده می شود.

در صورتی که آن را بسته اید یا به هر دلیلی برای شما نمایش داده نشد، می توانید از منوی View گزینه Start Page را انتخاب نمایید تا این کادر برای شما به نمایش درآید.

همانند شکل زیر

03

بعد از انتخاب گزینه ی New Project در هر یک از روش هایی بالا که بیان شد، کادر New Project همانند شکل زیر نمایش داده می شود.

04

در این کادر در تب Installed در گوشه سمت چپ، در نود Templates ، لیست زبان های نصب شده همراه با ویژوال استودیو را مشاهده می کنید.

حال زبان #Visual C را انتخاب کنید تا زیر گزینه های آن نمایش داده شوند.

مانند شکل زیر

05

با باز کردن نود #Visual C ، لیست محیط هایی که می توانیم توسط زبان #C برای آنها برنامه نویسی کنیم، نمایش داده می شوند. ما از لیست نمایش یافته، گزینه Web را انتخاب می کنیم.

مانند شکل زیر

07

با انتخاب گزینه Web، لیست الگوهای آن در وسط کادر نمایش داده می شوند. در اینجا گزینه ASP.NET Empty Web Application را انتخاب کنید.

این نکته را دقت کنید که در اینجا از نسخه NET Framework 4. استفاده کرده ایم. (در تصویر بالا با رنگ نارنجی مشخص شده است).

در ادامه: این کادر می توانیم نام پروژه، محل ذخیره سازی آن و همچنین نام Solution را نیز تغییر دهیم. با فعال کردن گزينه Create directory for solution يک شاخه به نام Solution که انتخاب کرده‌ايد در شاخه تعيين شده توسط Location ايجاد می‌شود. يک Solution می‌تواند شامل چندين پروژه باشد.

در قسمت Solution name عبارت WebPack و در در قسمت Name عبارت WebApp1 را وارد می کنیم. محل ذخیره فایل را نیز به دلخواه خود، می توانید توسط دکمه . . . Browse  تغییر دهید یا از مکان پیش فرض آن استفاده کنید.

همانند شکل زیر

08

بعد از انجام تغییرات بالا، بر روی گزینه Ok کلیک کنید. با انتخاب گزینه Ok، اندکی زمان لازم است تا ویژوال استودیو پروژه را با نام و مسیری که مشخص نموده اید ایجاد و فایل های مورد نیاز پروژه را بسازد.

بعد از ساختن پروژه، پنجره ویژوال استودیو به شکل زیر نمایش داده می شود.

09

 

در ابتدا به توضیح بخش های مختلف پنجره ویژوال استودیو می پردازم.

شماره ۱ : پنجره Toolbox :

این منو ابزارهایی برای کار با متن ها و ویرایش آنها را در اختیار برنامه نویس قرار می دهد . برخی از ابزارهای این منو فقط در زمانی که صفحه در حالت Design است ، فعال هستند .

شماره ۲ : پنجره Solution Explorer :

این پنجره شامل نمایش یک ساختار درختی از نام Solution و پروژه های ساخته شده در آن، به همراه نمایش فایل های موجود در پروژه می باشد.

همانطور که مشاهده می کنید، عبارت (Solution ‘WebPack’ (1 Project نمایش داده شده در ابتدای کادر Solution Explorer، نام Solution یعنی WebPack را نمایش می دهد که در زیر شاخه خود یک پروژه به نام WebApp1 دارد.

شماره ۳ : پنجره Properties :

از طریق این پنجره می توانید به خواص شی که در آن لحظه انتخاب کرده اید مثل صفحه ، عناصر HTML و یا کنترل های ASP.Net دسترسی داشته و آنها را ویرایش نمایید .در حال حاضر به دلیل اینکه نام پروژه در قسمت Solution Explorer در حال انتخاب است، پنجره Properties در حال نمایش کلیه خاصیت های مربوط به پروژه می باشد.

در ادامه بیشتر با این پنجره ها آشنا خواهید شد . . .

توجه کنید : در صورتی که هر یک از پنجره های فوق بسته شدند، می توانید توسط منوی View آنها را مجددا نمایش دهید.

(همچنین می توانید از کلید های میانبر آنها که در شکل زیر مشخص است، نیز استفاده کنید)

همانند شکل زیر

10

در ادامه به پروژه وب فرم اضافه می کنیم.

افزودن فرم (Web Form) به پروژه :

پروژه که در حال حاضر تا به اینجا ساخته شده، WebApp1 نام دارد. برای افزودن وب فرم به پروژه، مراحل زیر را انجام می دهیم.

بر روی نام پروژه راست کلیک کنید و سپس گزینه Add را انتخاب کرده، در منوی نمایش داده شده، گزینه New Item را همانند شکل، زیر انتخاب کنید.

11

 

با انتخاب گزینه New Item ، کادر Add New Item – WebApp1 نمایش داده می شود. در این کادر در شاخه Web، گزینه Web Form را همانند شکل زیر انتخاب کنید.

12

در قسمت Name ، نام آن را به Default.aspx تغییر دهید.

(دقت کنید پسوند فایل درست باشد).

همانند شکل زیر

13

بعد از انجام تغییرات، بر روی دکمه Add کلیک کنید تا وب فرم به پروژه اضافه شود.

بعد از انجام مراحل بالا، پنجره ویژوال استودیو به شکل زیر تغییر می کند.

14

همانطور که در تصویر بالا مشاهده می کنید، وب فرم Default.aspx به کادر Solution Explorer در زیر شاخه پروژه WebApp1 اضافه می شود. همچنین محتوای فرم Default.aspx در پنجره جدیدی در وسط پنجره ویژوال استودیو نمایش داده می شود. کنترل های Toolbox نیز در تصویر دیده می شوند.

شرح بخش View Tab :

بعد از نمایش وب فرم، در قسمت پایین آن، نواری نمایش داده می شود که دارای سه گزینه Design, Split و Source می باشد.

گزینه Design :

با انتخاب این گزینه صفحه در نمای طراحی به شما نمایش داده می شود و می توانید اجزا و کنترل های صفحه را مشاهده نمایید .

گزینه Split :

با انتخاب گزینه Split ، صفحه به دو بخش تقسیم شده که در قسمت بالا نمای طراحی و در قسمت پایین نمای کد صفحه به صورت همزمان نمایش داده می شود .

گزینه Source :

با انتخاب گزینه Source کد HTML صفحه نمایش داده می شود و می توانید مستقیما این کدها را مشاهده و ویرایش نمایید .

شکل زیر گزینه های نوار View Tab را نمایش می دهد

18

شرح فایل Default.aspx :

ابتدا در کادر Solution Explorer ، بر روی فلش کنار فایل Default.aspx را کلیک کنید تا زیر شاخه آن نمایش پیدا کند.

مانند شکل زیر

15

فایل Default.aspx (وب فرم)، شامل کدهای Asp و Html می باشد که یک فرم را تعریف می کنند. با دابل کلیک بر روی آن، محتوای فایل نمایش داده می شود.

مانند شکل زیر

16

فایل Default.aspx.cs  شامل کدهای زبان #C می باشد. به این فایل اصطلاحا CodeBehind نیز گفته می شوند. در واقع این فایل حاوی دستوراتی است که در پس زمینه فرم قرار دارند و به منظور مدیریت تعاملات انجام شده بین فرم و کاربر نوشته می شوند.

مانند شکل زیر

26

فایل Default.aspx.designer.cs نیز شامل کدهای C# می باشد. دستورات نوشته شده در این فایل توسط ویژوال استودیو انجام می شود. به عنوان مثال شما بعد از قرار دادن یک کنترل از Toolbox در داخل وب فرم Default.aspx، شی متناظر آن کنترل در این فایل تعریف شده و سپس در وب فرم مورد استفاده قرار می گیرد.

مانند شکل زیر

17

در ادامه بیشتر با این فایل ها آشنا می شوید.

افزودن فایل و پوشه به پروژه (وب سایت) :

تا اینجا پروژه تنها دارای یک وب فرم به نام Default.aspx می باشد.

ما می توانیم فایل ها و فولدر ها را با توجه به نیاز خود به پروژه اضافه کنیم.

در این قسمت برای آشنایی شما، من قصد دارم یک پوشه در Root سایت بسازم و سپس یک فایل Style Sheet به منظور نوشتن کد های Css به داخل این پوشه اضافه کنم.

برای اضافه کردن پوشه به سایت بر روی نام پروژه یعنی WebApp1 راست کلیک کرده، سپس گزینه Add را انتخاب کنید و از منوی نمایش یافته در سمت چپ آن، گزینه New Folder را انتخاب کنید.

مانند شکل زیر

19

با انتخاب گزینه New Folder، یک فولدر به زیر مجموعه سایت در کادر Solution Explorer اضافه می شود.

مانند شکل زیر

20

نام آن را به Styles تغییر دهید.

بعد از انجام تغییرات، کادر Solution Explorer به شکل زیر تغییر می کند.

21

حال برای افزودن فایل Style Sheet به درون پوشه Styles، کافی ست بر روی پوشه Styles راست کلیک کرده، سپس گزینه Add را انتخاب و از منوی نمایش داده شده در سمت چپ گزینه New Item را انتخاب کنید.

همانند شکل زیر

22

بعد از انتخاب گزینه New Item، کادری همانند شکل زیر نمایش داده می شود.

23

سپس از قسمت Web گزینه Style Sheet را انتخاب کرده و نام آن را به Style.css تغییر دهید.

سپس بر روی گزینه Add کلیک کنید.

با انتخاب گزینه Add، فایل Style.css به پوشه Styles در Solution Explorer اضافه می شود.

همانند شکل زیر

24

حال با دابل کلیک کردن بر روی فایل Style.css، محتوای آن در وسط پنجره ویژوال استودیو نمایش داده می شود.

مانند شکل زیر

25

بعد از ساخت فایل Style.css، حال باید آن را به صفحه وب فرم خود متصل کنیم تا وب فرم کد های مربوط به سبک دهی عناصر داخل خود را از این فایل بخواند.

برای این کار، داخل وب فرم Default.aspx در بین تگ Head از تگ link استفاده می کنیم.

یعنی :

یک صفحه Asp.NET، از تعداد زیادی کنترل های Asp.NET یا (Server Control)، همراه با تگ های Html، متن ساده، تصاویر و … تشکیل شده است.

در ادامه من برای کامل کردن این پروژه، از تعدادی از کنترل ها به همراه تگ های Html استفاده می کنم.

مثالی که من برای این پروژه در نظر گرفتم به این صورت است که برنامه در زمان اجرا یک متن ساده را از کاربر دریافت کرده و کابر می تواند با کلیک بر روی دکمه، محتوای متن وارد شده را به حروف بزرگ تبدیل کرده و در صفحه نمایش دهد.

مانند شکل زیر

27

برای این کار من باید به پروژه یک کنترل TextBox برای دریافت ورودی از کاربر، یک کنترل Button برای انجام عملیات به همراه یک کنترل Label برای نمایش خروجی استفاده کنم.

برای افزودن کنترل های Asp.NET به وب فرم می توانید از روش های زیر استفاده کنید:

  1. انتخاب کنترل مورد نظر از Toolbox و دابل کلیک بر روی آن
  2. انتخاب کنترل مورد نظر از Toolbox و کشیدن و رها کردن آن بر روی وب فرم
  3. نوشتن کد

شکل زیر به شما در انجام عملیات با دو روش اول کمک می کند.

28

همانطور که در تصویر مشاهده می کنید، با کشیدن و رها کردن کنترل از نوار ابزار (Toolbox) در داخل وب فرم و بین تگ <div> ، کد متناظر با ایجاد کنترل توسط ویژوال استودیو به طور خودکار نوشته می شود.

اما من از روش سوم، یعنی کد نویسی مستقیم استفاده می کنم.

تمامی کنترل های Asp.NET، با پیشوند asp: آغاز می شوند.

به عنوان مثال برای استفاده از کنترل متنی یا TextBox باید از تگ زیر استفاده کنیم :

تمامی کنترل های Asp.NET دارای مجموعه ای از صفت ها (َAttribute) می باشند. این صفت ها در کدنویسی در درون تگ باز قرار می گیرند. اغلب این صفت ها بین کنترل ها مشترک می باشند. که من در این مثال تعدادی از این صفت ها را توضیح می دهم.

در ادامه مقالات با مثال های جدید، شما را با سایر صفت ها نیز آشنا خواهم کرد.

صفت runat :

در Asp.NET، سه نوع کنترل سرور (Server Control) وجود دارد که در آینده با آنها آشنا می شوید. این صفت نشانگر آن است که کنترل مربرطه توسط سرور پردازش می شود.

یعنی :

صفت ID :

توسط این صفت می توانیم یک نام یا شناسه منحصر به فرد را به کنترل نسبت دهیم. با این کار در هنگام استفاده از کنترل، می توانیم با استفاده از آن نام یا شناسه، به کنترل دسترسی پیدا کنیم.

صفت Text :

متن نمایش داده شده در کنترل را نگهداری می کند. به دلیل اینکه من در اینجا قصد دارم کنترل TextBox در ابتدا خالی بماند و سپس توسط کاربر پر شود، متن آن را خالی می گذارم.

خب : تا به اینجا شما تقریبا با کنترل TextBox آشنا شدید و آن را به وب فرم اضافه کردید.

سایر کنترل های مورد نیاز یعنی یک کنترل Button و یک کنترل Label نیز به فرم اضافه کنید و صفت ها (خاصیت ها)ی آن را مانند زیر مشخص نمایید:

خب : تا این مرحله، رابط کاربری برنامه وب تقریبا آماده شده است.

همانطور که گفتم، در این برنامه قصد دارم تا در زمان اجرای برنامه، کاربر درون کنترل جعبه متنی (TextBox) مقداری را وارد کند. سپس بعد از کلیک بر روی کنترل Button، مقدار متنی وارد شده در کنترل جعبه متن در خروجی با حروف بزرگ نمایش داده شود.

مرحله بعد باید کد مربروط به رویداد Click کنترل Button را اضافه کنیم.

برای ایجاد رویداد کلیک کنترل Button از روش زیر استفاده کنید :

ابتدا در قسمت View Tab، گزینه Split را انتخاب کنید تا نمای طراحی در پایین نمای کد نویسی نمایش یابد.

همانند شکل زیر

29

سپس در نمای طراحی بر روی دکمه Enter دابل کلیک نمایید.

با این کار رویداد کلیک مربرط به دکمه Button، توسط ویژوال استودیو تولید شده و شما به فایل Default.aspx.cs هدایت می شوید.

کد رویداد همانند زیر نوشته می شود :

در کنار این عمل، خاصیت OnClick نیز به کنترل Button در وب فرم اضافه می شود که مقدار آن برابر است با نام رویه یا تابع رویداد کلیک بالا.

در ادامه کد زیر را به رویه btnEnter_Click اضافه می کنیم:

شرح کد بالا :

من از یک کنترل Label برای نمایش خروجی در وب فرم استفاده کردم و آن را با مقدار lblPrint نامگذاری کردم. سپس توسط خاصیت Text کنترل جعبه متن که به نام txtInput نام گذاری شده است، مقدار متن موجود در کنترل جعبه متن را خوانده و توسط تابع ToUpper، آن را به حروف بزرگ تبدیل و به خروجی (یعنی کنترل lblPrint) فرستادم.

اجرای برنامه :

راه های مختلفی برای اجرای برنامه وجود دارد. آنها عبارتند از :

راه اول :

استفاده از دکمه Start همانند شکل زیر. همانطور که در شکل مشاهده می کنید، به دلیل اینکه مرورگر پیش فرض من Firefox می باشد، نام آن در مقابله دکمه نمایش یافته است.

30

راه دوم :

استفاده از کنترل های ترکیبی Ctrl + F5

راه سوم :

استفاده از منوی Debug

در ادامه برنامه را توسط کلیدهای ترکیبی Ctrl + F5 اجرا کنید.

پس از اجرا، پروژه مانند شکل زیر در مرورگر نمایش داده می شود:

 

31

با وارد کردن مقدار hello در کنترل جعبه متن و سپس فشردن دکمه Enter، عبارت HELLO در پایین این قسمت، نمایش پیدا می کند.

مانند شکل زیر

32

فایل پروژه را می توانید از اینجا دانلود کنید.

موفق باشید . .