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

[learninweb]

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

در اين بخش مي‌خواهيم به بررسي روش ساخت يک فرم ورود اطلاعات بسازيم. بر روي دکمه New WebSite کليک کنيد.




نام CreatePage را براي پروژه انتخاب کرده‌ايم. بر روي دکمه OK کليک کنيد.




در ادامه مي‌خواهيم يک فرم جديد اضافه کنيم. منوي Website را باز کنيد.




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




اکنون گزينه Web Form جهت افزودن يک فرم جديد انتخاب شده است. روي دکمه Add کليک کنيد.




اکنون فرم جديد به پروژه اضافه شده است و عبارت Author Data را تايپ کرده‌ايم. در ادامه مي‌خواهيم در خط پايين يک جدول به اين صفحه اضافه کنيم. براي حرکت به خط پايين دکمه Enter صفحه کليد را فشار دهيد.
براي درج جدول منوي Tabel را باز کنيد.




بر روي Insert Tabel کليک کنيد.




در قسمت Rows تعداد سطرها و در قسمت Columns تعداد ستون ها را بايد وارد نمائيم. در اين مثال مي‌خواهيم چهار سطر و دو ستون داشته باشيم. اکنون جعبه متن Rows يا رديفها فعال است عدد 4 را وارد کنيد تا 4 رديف داشته باشيم.




در قسمت Columns عدد 2 وارد شده است پس دو ستون نيز داريم. در قسمت Layout تنظيمات مربوط به خانه‌هاي جدول را مي‌توان انجام داد. Border Color رنگ حاشيه را تعيين مي‌کند. در قسمت Background مي‌توانيم يک رنگ يا يک تصوير به عنوان پيش زمينه جدول انتخاب کنيم. بر روي دکمه OKکليک کنيد.




همان طور که مشاهده مي‌کنيد جدول اضافه شد. اکنون مي‌خواهيم اطلاعاتي از کاربر در مورد نام و نام خانوادگي و تاريخ تولد دريافت کنيم . در ادامه خانه‌هاي ستون اول جدول را پر مي‌کنيم.
در اين مثال کاربر بايد اطلاعات خود را ستون دوم وارد کند به همين دليل نياز به کنترل TextBox داريم.
روي کنترل TextBox کليک کنيد.

---

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




در صورتي که بخواهيد ابعاد اين کنترل را تغيير دهيد مي‌توانيد با استفاده از خصوصيات Height و Width اين کار را انجام دهيد يا اينکه به سادگي با استفاده از ماوس ابعاد آن را تغيير دهيد. مي‌خواهيم نام اين کنترل را تغيير دهيم تا هنگام برنامه نويسي آسان تر بتوانيم به آن دسترسي داشته باشيم. روي قسمت ID دابل کليک کنيد.




عبارت fname را وارد کنيد.
در ادامه دو TextBox ديگر به همين روش اضافه مي‌کنيم و نام lname و dateofbirth را به عنوان Id آن‌ها قرار مي‌دهيم.
اکنون نياز به يک کنترل Button داريم. بر روي کنترل Button کليک کنيد.




کنترل Button را به محل مشخص شده توسط کادر قرمز Drag کنيد.




براي تغيير متن روي دکمه روي خصوصيت Text دکمه دابل کليک کنيد.




عبارت Submit را وارد کنيد.
براي مشاهده خروجي برنامه بر روي دکمه start کليک کنيد.




در اين برنامه اگر اطلاعاتي را در کنترلهاي Textbox وارد نمائيد و سپس روي دکمه Submit کليک کنيد اين اطلاعات به سرور ارسال شده و سپس يک صفحه جديد نمايش داده مي‌شود که در اين صفحه اطلاعات وارد شده در کنترل جعبه متن دوباره نمايش داده شده است. در صورتي که اگر با استفاده از HTML اين صفحه را ايجاد مي‌کرديم کنترلهاي جعبه متن همگي خالي مي‌شدند. در ادامه مي‌خواهيم براي دکمه Submit وظيفه‌اي تعيين کنيم. در صورتي که بخواهيد کد HTML ايجاد شده توسط ASP.Net را مشاهده کنيد کافي است که روي صفحه راست کليک کرده و گزينه View Source را انتخاب کنيد. بر روي دکمه Close کليک کنيد تا اين صفحه بسته شود.




در ادامه سه کنترل Lable بر روي صفحه قرار مي‌دهيم. مي‌خواهيم هنگامي که بر روي دکمه Submit کليک شد، اطلاعات داخل TextBox ها توسط Label ها نمايش داده شوند. بر روي کنترل Label کليک کنيد.




اين کنترل را به محل مشخص شده با کادر قرمز Drag کنيد.




نام اين کنترل را همان طور که مشاهده مي‌کنيد برابر Fnamelbl قرار داده‌ايم. در ادامه دو کنترل Label ديگر به همين روش بر روي صفحه اضافه مي‌کنيم.
روي دکمه دابل کليک کنيد تا وارد قسمت کد مربوط به رويداد کليک دکمه شويم.

---

در ادامه کد هاي مربوط به دکمه را وارد مي کنيم.

C# کد

protected void Button1_Click(object sender, System.EventArgs e)
{
Fnamelbl.Text = fname.Text;
lnamelbl.Text = lname.Text;
datelbl.Text = dateofbirth.Text;

}

VB کد

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

Fnamelbl.Text = fname.Text
lnamelbl.Text = lname.Text
datelbl.Text = dateofbirth.Text

End Sub





با استفاده از اين کدها مقدار هر Label با TextBox مربوط به آن مقدار دهي مي‌شود. براي مشاهده خروجي برنامه بر روي دکمه Start کليک کنيد.




درون جعبه متن اول کليک کنيد.




عبارت Nima را تايپ کنيد.
درون جعبه متن دوم کليک کنيد.




عبارت Alvanforush را وارد کنيد.
درون جعبه متن سوم کليک کنيد.




عبارت 1354/8/17 را به عنوان سال تولد وارد کرده‌ايم.
بر روي دکمه Submit کليک کنيد.




همان طور که مشاهده مي‌کنيد متن Label ها به عبارتي که داخل TextBox وارد کرديم تغيير پيدا کرد. براي اين کار با کليک بر روي دکمه Submit اطلاعات به سرويس دهنده يا سرور ارسال شده و در صفحه جديدي که اکنون مشاهده مي‌کنيد متن Labelها مقدار دهي شده است. توجه کنيد که محتواي TextBoxها نيز خالي نشده است. روي دکمه Close کليک کنيد.




در اين قسمت مي‌خواهيم يکي از مهمترين مفاهيم Asp.Net يعني Postback را مورد بررسي قرار دهيم. همانطور که گفته شد هنگامي که شما اطلاعاتي را درون فرم وارد کرده و بر روي دکمه Submit کليک کنيد اطلاعات شما دريافت شده و به سرور منتقل شود. سرور عمليات مورد نظر را بر روي اطلاعات انجام مي‌دهد و سپس نتيجه کار به شما نشان داده خواهد شد. اصطلاحاً ارسال صفحه به سرور و بازگشت دوباره آن را Postback مي‌نامند.
چون اين خصوصيت مربوط به صفحه مي‌باشد بر روي صفحه دابل کليک کنيد تا وارد رويداد Page_Load صفحه شويم. اين رويداد هر باري که صفحه لود شود اتفاق مي‌افتد.




حال مي‌خواهيم بگوييم اگر Postback اتفاق افتاد متن Label ها برابر با متن داخل TextBox ها باشد. عبارتif (ispostback) را تايپ کنيد.




دکمه Enter صفحه کليد را فشار دهيد.

---

در ادامه کد هايي که براي رويداد کليک دکمه وارد کرده بوديم را به داخل if رويداد لود صفحه منتقل مي کنيم.
C# کد

protected void Page_Load(object sender, System.EventArgs e)
{
if ((IsPostBack)) {
Fnamelbl.Text = fname.Text;
lnamelbl.Text = lname.Text;
datelbl.Text = dateofbirth.Text;
}
}

VB کد

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If (IsPostBack) Then
Fnamelbl.Text = fname.Text
lnamelbl.Text = lname.Text
datelbl.Text = dateofbirth.Text
End If
End Sub


براي اجراي برنامه روي دکمه Start کليک کنيد.




در زماني که صفحه Load مي‌شود چون از دستور if استفاده کرديم و مقدار PostBack برابر نادرست است کنترلهاي Label همان مقدار پيش فرض خود را نمايش مي‌دهند. اکنون اطلاعات را دوباره وارد کرده‌ايم. بر روي دکمه Submit کليک کنيد.




با فشردن دکمه Submit، عمليات PostBack اتفاق مي‌افتد و صفحه دوباره Load شده و رويداد Load صفحه فراخواني مي‌شود در اين زمان کد نوشته شده اجرا مي‌شود. چون IsPostBack در اين برنامه برابر Trueيا درست است کدهاي داخل دستور If اجرا مي‌شوند. بر روي دکمه Close کليک کنيد.




يک راه ديگر براي ارتباط بين TextBox و Label استفاده از Data Binding است. با استفاده از Data Binding شما مي‌توانيد بين دو کنترل سرور ارتباط برقرار کنيد. در ادامه اين روش را بررسي خواهيم کردد.
ما در اينجا مقدار پيش فرض Text مربوط به Label ها از طريق پنجره Properties پاک کرديم تا هنگامي که صفحه اجرا مي‌شود هيچ مقداري نداشته باشند. بر روي نماي Source کليک کنيد تا به حالت کد صفحه برويم.




مي‌خواهيم مقدار Text هر Label را به مقدار Text کنترل TextBoxمتناظرش Bind کنيم. چون مي‌خواهيم درون کدهاي Html کدهاي کنترلي بنويسيم بايد اين کد ها درون تگ <%# %>قرار گيرند. در ادامه اين کار را انجام مي‌دهيم.
توجه کنيد که متن داخل عبارات <%# %> را با دقت وارد نمائيد چون اين متن به حروف کوچک و بزرگ حساس است. در قدم بعدي بايد اعلام کنيم که با هر بار Load شدن صفحه مقادير موجود در TextBox ها به Label متناظرش Bind شود. روي سربرگ AuthorForm.aspx.vb کليک کنيد.




همان طور که مشاهده مي‌کنيد کد هاي قبلي را پاک کرده‌ايم. در رويداد Load صفحه کد DataBind()را تايپ کنيد.
توجه کنيد که در انتها حتما بايد پرانتز باز و بسته را وارد نمائيد و در زبان #C در انتها بايد از کاراکتر ; استفاده نمائيد




اکنون براي مشاهده نتيجه برنامه را اجرا کنيد.




اکنون مشخصات را وارد کرده‌ايم. بر روي دکمه Submit کليک کنيد.




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

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