واحد دانش و تکنولوژی تبیان زنجان
قبل از شروع این مبحث لطفا مقاله زیر را مطالعه کنید :
یادگیری Asp.NET را از کجا و چگونه شروع کنیم
اکنون باید زبان برنامه نویسی خود را انتخاب کرده باشید ، در این مقاله بنده چند مبحث زیر را ارائه خواهم کرد :
دانلود ، نصب و راه اندازی Visual Studio.NET یا Visual Web Developer
آشنایی با محیط نرم افزار
اشنایی با نحوه کار AspNET
برای شروع کافیست یکی از نسخه های Visual Studio.NET (پیشنهاد می کنم به روز باشید و آخرین نسخه آن را تهیه کنید ، هم اکنون نسخه 2010 آن هم به صورت نهایی ارائه شده است) را تهیه کنید .
دقت نمایید که فایل فوق یک فایل ISO بوده و باید توسط نرم افزارهای Writer بر روی CD یا DVD رایت شده یا میتوانید آن را Mount نمایید .
پیشنهاد می کنم قبل از نصب Visual Studio.NET به سراغ IIS بروید و آن را نصب کنید ، در مقاله زیر نحوه نصب و پیکیر بنده آن را توضیح داده ام :
نصب و پیکر بندی IIS در کامپیوتر شخصی
نصب نرم افزار Visual Studio یا VS توضیح خاصی ندارد ، مانند همه نرم افزار ها خیلی ساده با چند مرحله Next زدن نصب می شود ، پس از پایان نصب نرم افزار را اجرا نمایید .
وقتی برای بار اول نرم افزار اجرا شود سوالی مبنی بر تنظیمات محیط از شما پرسیده می شود ، پیشنهاد می کنم شما گزینه Web Development را انتخاب نمایید .
برای ایجاد یک پروژه وب جدید وارد منوی File > New Website شوید ، در این پنجره تنظیمات وب سایت جدید شما قرار دارد ، دو گزینه مهم در این قسمت Location و Language می باشد ، شما برای Location سه انتخاب دارید :
File System : در این حالت بدون نیاز به نصب IIS میتوانید پروژه وب خود را در آدرس فیزیکی هارد دیسک ایجاد کنید ، به عنوان مثال : E:\Ali\MyNewWebsite یک وب سایت جدید به نام MyNewWebsite در آدرس E:\Ali ایجاد می نماید
Http : فقط در حالتی که IIS نصب شده است کاربرد دارد ، شما می بایست آدرس مجازی IIS و سپس نام پروژه را وارد نمایید ، به عنوان مثال : http://localhost/MyNewWebsite یک فولدر جدید به نام MyNewWebsite در آدرس ریشه IIS شما (که معمولا C:\Inetpub\wwwroot است) ایجاد کرده و یک وب سایت به همین نام در IIS نیز ایجاد می نماید .
Ftp : از این گزینه برای ایجاد یک وب سایت به از طریق پروتوکل FTP در یک سرور دیگر استفاده می شود که کاربرد زیادی ندارد .
همچنین یک لیست بازشو برای انتخاب ورژن Dotnet Framework نیز قرار داده شده است ، پیشنهاد می کنم حتی المقدور با آخرین ورژن آن کار کنید .
سپس Language خود را طبق زبانی که انتخاب کرده اید برگزینید و پروژه را ایجاد کنید .
به صورت پیشفرض یک صفحه وب به نام Default.aspx به پروژه شما اضافه خواهد شد ، در مورد این صفحه در ادامه بیشتر صحبت خواهیم کرد .
اکنون یک پروژه وب جدید در اختیار داریم ، بهتر است کمی با پنجره های این نرم افزار آشنا شویم :
نرم افزار VS.NET داری 4 پنجره بسیار مهم می باشد :
پنجره Solution Explorer : برای نمایش این پنجره مسیر View > Solution Explorer را انتخاب کنید . این پنجره وظیفه نمایش تمامی فایل های پروژه شما را بر عهده دارد ، از طریق این پنجره شما قادر خواهید بود صفحات مختلف را باز کرده ، ویرایش و مدیریت نمایید . همانطور که در تصویر فوق ملاحظه می کنید این پنجره در سمت راست بالای تصویر قرار گرفته است .
پنجره ToolBox : برای نمایش مسیر View > Toolbox را بمیپایید ، در این پنجره تمامی ابزار لازم جهت طراحی فرم ها در اختیار شما قرار داده می شود ، همانطور که در تصویر ملاحظه می کنید این پنجره در سمت چپ تصویر قرار دارد .
پنجره Properties : برای ظاهر کردن این پنجره View > Properties Window را انتخاب نمایید ، این پنجره تمامی خواص و رویداد های یک شی را نمایش می دهد ، در مورد خواص و رودیداد در مقالات بعدی به تفصیل صحبت خواهد شد ، همانطور که ملاحظه می کنید این پنجره در سمت راست پایین صفحه قرار گرفته است .
پنجره اصلی : این پنجره که در تصویر در وسط صفحه قرار گرفته است شامل بخش های اساسی جهت طراحی و کد نویسی می باشد ، همانطور که مشاهده می کنید در بالای این پنجره صفحات مختلف شما به صورت Tab در کنار هم قرار گرفته اند که شما به راحتی میتوانید بین آنها انتخاب نمایید ، در قسمت پایین این پنجره 3 گزینه وجود دارد :
Design : با انتخاب این گزینه یک صفحه سفید در اختیار شما قرار داده خواهد شد ، شما میتوانید از منوی ابزار اشیا مورد نظر را داخل این فضا Drag نمایید . همچنین میتوانید از منوی Table که در بالای نرم افزار VS.NET قرار گرفته جداول مختلفی در این فضا ایجاد نمایید .
Source : هر چیزی که شما در بخش Design به صفحه اضافه نمایید یک کد معادل خواهد داشت که در این بخش نمایش داده می شود ، این صفحه بر اساس و پایه HTML طرح ریزی می شود بنابراین یادگیری HTML در فهم این کدها و به تبع آن طراحی بهتر شما کمک خواهد کرد .
Split : این صفحه همانطور که از نامش پیداست ترکیبی از دو نحوه نمایش فوق را به نمایش می گذارد .
چند نکته در مورد این پنجره ها :
شما میتوانید پنجره ها را جابجا کنید ، برای اینکار قسمت فوقانی پنجره را گرفته و در سمت دلخواه Drag نمایید .
پنجره ها خاصیتی برای Auto hide شدن دارند که در قسمت فوقانی هر پنجره با شکل قرار گرفته است ، که فضا را برای کد نویسی باز تر خواهد کرد .
شما میتوانید Tab های پنجره اصلی را به صورت افقی یا عمودی در کنار هم قرار دهید ، کافیست روی یکی از تب ها کلیک راست کرده و گزینه New Horizontal Tab Group یا Vertical را انتخاب نمایید .
در صورتی که چندین Tab در پنجره اصلی باز کرده باشید میتوانید تمام آنها را یکجا ببندید ، برای این منظور وارد منوی Window شده و سپس Close All Document را انتخاب نمایید ، همچنین میتوانید همه تب ها به جز یک تب دلخواه را ببندید ، برای این منظور روی تب مورد نظر کلیک راست کرده و گزینه Close All But This را انتخاب کنید با این کار سایر تب ها بسته خواهند شد .
همانطور که ملاحظه کردید به صورت پیشفرض یک صفحه به نام Default.aspx به پروژه شما اضافه شد که میتوانید آن را از طریق Solution Explorer باز نمایید ، لازم به ذکر است که صفحات وب در Asp.NET با پسوند aspx شناخته می شوند ، برای اضافه کردن یک صفحه جدید به پروژه وارد منوی Website شده و گزینه Add New Item را برگزینید ، در پنجره باز شده لیستی از تمام آیتم هایی که شما قارد هستید به پروژه اضافه کنید نمایش داده می شود ، از بین این آیتم ها گزینه اول یعنی Web Form را انتخاب کرده در فیلد Name یک نام لخواه مثلا Register.aspx برای این صفحه انتخاب کنید ، از لیست Language زبان مورد نظر را انتخاب کرده و حتما تیک Place Code In Seperate File را علامت دار کنید ، این کار باعث میشود که صفحه طراحی شما از صفحه کد نویسی شما جدا شود . در مورد گزینه Select Master Page هم بعدا صبحت خواهد شد .
پس از تایید ، صفحه جدید به پروژه اضافه شده و به صورت پیشفرض در حالت Source در پنجره اصلی گشوده می شود ، با کلیک بر روی گزینه Design به حالت طراحی وارد شوید ، اکنون میخواهیم یک فرم ساده ایجاد کنیم و چند خط کد نویسی خیلی ساده انجام دهیم .
بدین منظور از پنجره Toolbox و از بخش Standard ابزار Textbox را پیدا کرده و آن را در صفحه اصلی Drag نمایید (همچنین با Double Click کردن بر روی هر کدام از آیتم ها نیز ابزار مورد نظر به صفحه اضافه می شود) ، سپس یک Button هم به همین صورت به صفحه اضافه نمایید .
هر یک از این ابزار که شما داخل صفحه انداختید از این پس یک شی محسوب می شود ، شما میتوانید خواص مختلف هر یک از این اشیا را تغییر دهید ، برای این کار روی شی مورد نظر (به عنوان مثلا Button که در صفحه قرار داده اید) کلیک راست کرده و گزینه Properties را برگزینید :
همانطور که ملاحظه می کنید خواص این Button در پنجره Properties نمایش داده خواهد شد ،هر شی خواص مختص به خود را داشته و برخی خواص مانند BackColor و... در بین همه اشیا مشترک هست ، این خواص به چند دسته مختلف تعیین شده است ، خواص ظاهری ، خواص که مربوط به رفتار شی است و... برخی از خواص مهم تر بوده و کاربرد بیشتری دارد ، مانند خاصیت Text و خاصیت ID ، خاصیت Text متن نوشته شی را مشخص می کند و خاصیت ID شناسه شی است و نمیتواند تکراری باشد .
نکته : از آنجایی که خاصیت ID شناسه هر شی می باشد و ما در کد نویسی اشیا را با ID پیدا می کنیم ، همیشه سعی کنید خاصیت ID تمام اشیا روی صفحه را تغییر دهید ، مثلا اگر یک Textbox برای دریافت ایمیل کاربر قرار دادید ID آن را txtEmail بگذارید ، اگر یک Label برای نمایش نام کاربر قرار دادید ID آن را lblName قرار دهید و اگر یک Button برای تایید فرم گذاشتید ID آن را btnSubmit قرار دهید .
اکنون مایل هستیم که این صفحه که ایجاد کردیم را در مرورگر خود (اینترنت اکسپلورر یا فایرفاکس) مشاهده کنیم ، برای اینکار به سراغ Solution Explorer خود رفته روی صفحه مورد نظر خود (مثلا Register.aspx یا Default.aspx) کلیک راست نمایید و سپس گزینه View In Browser را انتخاب نمایید
اگر پس از انجام این کار سوالی از شما پرسیده شد گزینه OK را انتخاب نمایید ، سپس یک مروگر باز شده و صفحه ای که شما طراحی کرده بودید نمایش داده خواهد شد .
اجازه بدهید کمی به نحوه عملکرد Asp.NET برای تولید یک صفحه بپردازیم ، لطفا به سراغ پنجره اصلی رفته و گزینه Source را انتخاب کنید تا کد های HTML به شما نمایش داده شود ، احتمالا شما نیز کدهایی مشابه کدهای زیر مشاهده خواهید کرد :
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Register.aspx.vb" Inherits="Register" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="تایید" />
</div>
</form>
</body>
</html>
در کد های فوق دو خط کد زیر را در نظر بگیرید :
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="تایید" />
این دو خط کد مربوط دو شی Button و Textbox ما هستند ، اکنون این صفحه را در مروگر باز نمایید ، سپس روی صفحه مرورگر خود کلیک راست کرده و گزینه View Source را انتخاب کنید ، کد هایی مشابه زیر به شما نمایش داده خواهد شد :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form name="form1" method="post" action="Register.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDM4MzYxMjNkZDFHBgA6ac83XXS+mQDRH/zF+AaU" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLllbTvBQLEhISFCwLCi9reA8/nyMj1EFC2F09rdgzoIYCyCA9g" />
</div>
<div>
<input name="txtName" type="text" id="txtName" />
<input type="submit" name="btnSubmit" value="تایید" id="btnSubmit" />
</div>
</form>
</body>
</html>
نکته خیلی خیلی مهم اینجاست که کدهایی که ما در صفحه Register.aspx نوشتیم با این کدها کمی تفاوت دارد ، به عنوان مثال دو خط کد مربوط به Textbox و Button به صورت زیر تغییر کرده اند :
<input name="txtName" type="text" id="txtName" />
<input type="submit" name="btnSubmit" value="تایید" id="btnSubmit" />
همانطور که ملاحظه می کنید تگ های Asp:Textbox و Asp:Button به تگ Input تغییر کرده اند .
سوال اینجاست که دلیل این اتفاق چیست ؟
دلیل این اتفاق سهولت کار برای برنامه نویس است ، Dotnet یک سری ابزار برای راحتی کار برنامه نویس ایجاد کرده است ، این ابزار از شی گرایی پیروی می کنند و خیلی ساده میتوان خواص آن ها را تغییر داد و از رویداد های آنها استفاده کرد ، میتوان برای آنها کد نویسی کرد و... و در نهایت این اشیا به کد های HTML قابل فهم برای مروگر تبدیل خواهند شد .
البته در بین کد های صفحه Register.aspx شما کد های HTML هم وجود دارد مثلا تگ های div و تگ form و تگ body که تگ های HTML محض هستند و در این عملیات تغییری نمی کنند ولی تمام تگهایی که با Asp شروع می شوند و خاصیت runat=Server دارند باید به HTML محض تبدیل شوند .
توضیحات اضافی :
وقتی درخواست نمایش صفحه Register.aspx (یا هر صفحه aspx دیگر ) از طرف مروگر به سرور (IIS) صادر می شود ابتدا IIS چک می کند که این صفحه متعلق به کدام Engine است ، وقتی متوجه شد که این صفحه مربوط به Asp.NET است آن را برای ترجمه به DotnetFramework ارائه می کند ، دات نت فریم ورک تمامی کد های لازم را ترجمه می کند (کد های سمت سرور به زبان ویژوال بیسیک و سی شارپ و همچنین تگ های دارای Runat=Server) و در نهایت خروجی را به صورت HTML به IIS تحویل داده و IIS آنرا به مرورگر شما می فرستد . دقت بفرمایید که کدهای Visual Basic به HTML تبدیل نمی شوند بلکه نتیجه تغییرات شما که توسط کدهای ویژوال بیسیک داده شده است به صورت HTML ارائه می گردد .
اکنون که با سازوکار Asp.NET آشنا شدیم به سراغ کد نویسی میرویم :
همانطور که توضیح دادم این اشیا دارای خاصیت های گوناگونی هستند ، کنترل Textbox دارای یک خاصیت به نام Text است که متن داخل آن را تعیین می نماید ، دیدیم که چطور از طریق پنجره Properties میتوان خاصیت Text و سایر خصیصه ها را به راحتی تغییر داد ، اکنون میخواهیم این کار را از طریق کد نویسی انجام دهیم .
در حقیقت میخواهیم و قتی کاربر روی Button کلیک کردم متن داخل Textbox تغییر کند برای این منظور روی Button دابل کلیک کنید ، با این کار یک صفحه جدید برای شما باز خواهد شد ، این صفحه همان صفحه کد نویسی شماست که باید به زبان Visual Basic یا #C بسته به انتخاب خودتان کد نویسی انجام دهید ، هنگامی که روی Button دابل کلیک می کنید این صفحه باز شده و یک بلاک کد مشابه زیر در اختیار شما قرار می گیرد :
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
End Sub
شما میتوانید کد های خود را در بین این دوخط تایپ کنید ، این کد ها زمانی اجرا می شوند که در صفحه وب کاربر بر روی باتن کلیک نماید ، همچنین لازم به ذکر است که فقط میتوان در بین بلاک ها کد نویسی کرد و شما اجازه ندارید کدهایتان را خارج از این بلاک ها بنویسید .
اکنون میخواهم جمله "Hello Asp.NET" را به خصیصه Text شی Textbox که آیدی آنرا txtEmail قرار دادیم نسبت بدهیم ، بدین منظور کد زیر را داخل بلاک کد فوق قرار می دهیم :
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
txtName.Text = "Hello Asp.NET"
End Sub
همانطور که ملاحظه می کنید بنده متن دلخواهم را داخل " " قرار دادم ، دلیل این کار این است که خاصیت Text کنترل Textbox از نوع String یا رشته حرفی است بنابراین باید یک رشته حرف به این خاصیت نسبت داده شود .
اکنون پروژه را کامل Save کنید (File > SaveAll) و صفحه مورد نظر را View In Browser بگیرید ، بر روی دکمه کلیک نمایید و نتیجه را مشاهده نمایید .
