Microsoft Word - asp_net_ch03_final

1

شركت پيشگامان فناوري

كليه حقوق اين جزوه آموزشي متعلق به سايت آموزش الكترونيكي پرشيا ميباشد )[email protected]( نصيريوحيد : استاد دوره ASP.NETجزوه آموزشي كالس

:سومفصل

ASP.NET و نحوه کاربرد آنها در صفحات HTMLمعرفی کنترل های

:مقدمه

هسـتند كـه در سـرور پـردازش مـي HTML سرور در حقيقت عناصر استاندارد HTML كنترل هاي دقيقـا ) هـم شـناخته مـي شـوند HTMLكه بعنوان كنترل هاي ( HTMLتمام كنترل هاي سرور . شوند

. يكسان است HTML تفسير و اجرا شده و خواص اغلب آنها با عناصر HTMLك عنصر معادل يكنترل هاي وب توانايي هاي بسـيار ! در طي فصول آتي ما از اين كنترل ها به ندرت استفاده خواهيم كرد

ن فصل صرفا اي. بيشتري را ارائه مي دهند و ادامه ي كار تقريبا با آنها تكميل مي گردد و همراه خواهد بود مفيد مي باشد و تـاثيري آنچنـاني بـر روي VS.NETبراي يادآوري اسكريپت نويسي كالينت سايد با ديد

DHTMLايـن فصـل در حقيقـت يـك نـوع . برنامه نويسي سمت سرور ما در فصول آتي نخواهـد داشـت . مي باشدVS.NETنويسي به سبك

پردازش در خواست ها از طرف سرور

شما يك كنترل . تعريف شده اند System.Web.UI.HtmlControls در فضاي نام HTML كنترل هاي HTML را در اغلب حالتها با اضافه كردن ويژگي RUNAT="Server" به تگ آن ، مي توانيد ايجاد كنيد .

بهتـر اسـت بـه . با فراموش شدن اين مورد تمام قابليت هاي پردازشي سمت سرور را از دست خواهيد داد

mailto:[email protected]

2



منحصر بفرد اختصاص داده شود تا بتوان به سادگي در برنامـه بـه آن رجـوع ID يك HTMLر كنترل ه . كرد

HtmlForm مشتق شـده انـد و بايـد درون كنتـرل HTMLInput از كالس HTML كنترل هاي سرور . قرار گيرند

ايـن . پـردازش كـرد مي توان در خواست هاي رسـيده بـه سـرور را HTMLForm با استفاده از كنترل نيـز بـه "RUNAT="Server است بعالوه اينكه ويژگي HTML معمولي در صفحات formكنترل همانند

به صورت خودكار وقتي يك پروژه جديد را در ويژوال استوديو باز مي كنيد اينكار از . آن اضافه مي شود شما فقط يـك فـرم ASPXيل و الزم به ذكر است كه در هر فا) ١شكل ( صورت مي گيرد VS.NETطرف

) .برخالف نگارش هاي قبلي آن ( را مي توانيد تعريف كنيد

. نمايي از پشت صحنه يك فرم وب كه در آن ايجاد فرم به صورت خودكار صورت مي گيرد-١شكل

ويژگـي . توجه كنيد مواردي را مالحظه مي نماييد كه بايد مرور شوند VS.NET اگر شما به تگ فرم در Methodاگر مساوي . به مرور مي گويد كه چگونه اطالعات را به سرور بفرستدGET، داده ها قرار گيرد

كه HTTP اضافه شده و فرستاده مي شوند و يا به صورت يك درخواست URLبه صورت يك رشته به . خواهد بودPostدر اين حالت مساوي


3



براي . ظاهر نمي شوندVS.NETبه صورت پيش فرض در محيط چند خاصيت ديگر هم وجود دارند كه شود تمام كنترل هاي متعلق بـه فـرم True است و اگر False كه پيش فرض آن Disabledمثال خاصيت

. غير فعال شده و به صورت خاكستري نمايش داده مي شونددر . ردن آن وجـود نـدارد نيازي به تنظيم كـ ASP.NET است كه در برنامه هاي Action خاصيت ديگر

استفاده از اين خاصيت براي تنظيم اينكه داده ها به چه صفحه اي فرستاده شوند ، ASPنگارش هاي قبلي .مي شد

HTMLمروري سريع بر كنترل هاي

بـديهي اسـت كـه . استفاده از محيط ويـژوال -٢ كد نويسي مستقيم و -١: براي اينكار دو راه وجود دارد ويژوال استوديو در سـمت ToolBoxاگر به . رد دوم ساده تر بوده و نيازي به محفوظات پيشين ندارد مو

تمام كنتر ل هـاي مـورد . مختلف براي طبقه بندي كنترل ها وجود دارد Tabچپ صفحه توجه كنيد چندين كـار كـرده Visual InterDevاگـر بـا . قرار گرفتـه انـد HTML ايي به نام Tabبحث ما در اين فصل در

! براي شما تازگي ندارد Tabباشيد اين را روي صفحه قرار داد و بقيه كنترل ها هم بـه همـين ) Button( يك دكمه Tab به راحتي مي توان از اين

.بنابراين ذكر نكات مهم و كاربردي اين كنترل ها براي فصل جاري الزم و مكمل مي باشند. صورت هستند و مشاهده كد Designمي توانيد بين حالت ) VS.NETدر محيط (سمت چپ نگاه كنيد اگر به پايين صفحه

HTML با انتخاب كردن حالت ). ٢شكل ( يكي را انتخاب نماييدHTML كدي را كه VS.NET بـراي قـرار .دادن يك دكمه روي صفحه نوشته است را مي توان مالحظه كرد

. VS.NETهده سورس صفحات در انتخاب كردن حالت طراحي و يا مشا-٢شكل


4



: نكات مهم مربوط به اين كنترل به شرح زير هستند

اگر به سورس اين كنترل دقت كنيد و يا به صفحه ي خواص در گوشه ي سمت راست صفحه هنگاميكـه . د آنرا مي توان تنظيم كـر Type يا همان دكمه ما انتخاب شده است دقت نماييد ، خاصيت <Input>كنترل

تغيير نوع پيدا كند، مـي تـوان بوسـيله ي آن Submitاگر به ) . در اين حالت ( است Buttonپيش فرض آن تغيير يابد مي توان براي ريست كردن تمام كنترل هاي روي Resetاطالعات را به سرور فرستاد و اگر به

ضافه نشود ايـن كنتـرل به تگ آن ا "RUNAT="Serverتا هنگاميكه خاصيت . صفحه از آن استفاده كرد اضافه كردن رخداد براي ايـن . كالينت سايد بوده و فشردن آن باعث ايجاد رخدادي در اين سمت مي گردد

. مي باشدJavaScript هم دقيقا مانند اسكريپت نويسي HTMLكنترل و كنترل هاي كر شد يا مي تـوان خاصـيت براي اينكه اين كنترل بعنوان يك كنترل سرور بتواند عمل كند همانطور كه ذ

RUNAT="Server" را به صورت دستي وارد كرد و يا روي آن كليك راست كنيـد و گزينـه ي Run as

server control حـاال بـا دوبـار كليـك كـردن بـر روي آن صـفحه ي ) . ٣شكل ( را انتخاب نماييدCode

Behind باز شده و مي توانيد در رخداد ServerClickنويسيد آن كدتان را ب .

. به كنترل سرورHTML چگونگي تبديل يك كنترل معمولي -٣شكل


5



هـم اسـتفاده <Button> به باال استفاده مي كند مي توان از تگي به نام ٤ اگر كاربر از مرورگر نگارش . كرد

اسـتفاده قرار دهيد مي توان از كنترل تصاوير گرافيكـي بجـاي دكمـه Image را مساوي Type اگر نوع

تصاوير آنها را هنگام نزديك شدن ماوس تغيير onMouseOut و onMouseOverكرد و با کمک رخداد .داد

هم مي توان براي نمايش دادن تصاوير استفاده كرد و با برنامه نويسي در زمان هـاي Image از كنترل هنگـام نگـه داشـتن ToolTip آن مقدار دهي شود ، يـك ALTاگر خاصيت . الزم تصاوير آنرا عوض كرد

.ماوس روي آن نمايش داده مي شود

معمـولي حاصـل مـي شـود و اگـر نـوع آنـرا TextBox قرار دهيم يك Text را مساوي Type اگر نوع . هنگام نوشتن حروف كلمه ي رمز ، ستاره نشـان مـي دهـد TextBox قرار دهيد اين Passwordمساوي

اسـتفاده TextArea باشـد در اينجـا از كنتـرل MultiLine كه TextBoxبراي نشان دادن و دريافت يك .مي شود

ــوع ــراي دريافــت ورودي از ن ــرل Boolean ب ــيم و اگــر خاصــيت CheckBox از كنت اســتفاده مــي كن

Checked آن Trueباشد به معناي انتخاب آن از طرف كاربر است .

خاب يك گزينه از بين يك گروه بكار بـرده مـي شـود در اينجا كه براي انت RadioButtons براي تعريف منحصـربفرد داشـته IDهر كنترلي در اين حالت بايد يـك . استفاده كرد RadioButtonمي توان از كنترل

براي دريافت اطالعات از آنها بـراي . آنها بايد يكي باشد تا بتوان به راحتي با آنها كار كرد Nameباشد اما . را چك كردRadio[0].Checkedمثال مي توان

گزينه هـاي مـا است هنگاميكه تعداد RadioButton راه ديگري در مقابل DropDown List استفاده از

DataBind و DatSource كردن آن يك آرايه به آن مـي تـوان از خاصـيت Bindبراي . خيلي زياد باشند مي توان گزينه اي را كه كـاربر مشـخص كـرده ، SelectedIndexبا استفاده از خاصيت . آن استفاده كرد


6



آنـرا Multipleاگر مي خواهيد كاربر چندين آيتم را با هم در اين كنترل انتخاب كند خاصيت . دريافت كرد Trueكنيد .

آن HRef اسـتفاده مـي شـود كـه در خاصـيت <a> ايي به نـام Anchor Tag براي ايجاد يك لينك از

. مي شودآدرس لينك قرار داده

كردن Upload كنترل مهمي كه در اين مجموعه قرار دارد و در كنترل هاي وب يافت نمي شود مربوط به . فايل ها به سرور است كه بايد راجع به آن قدري بيشتر توضيح داد

. كننـد Upload كاربران مي توانند فايل هاي خود را بـه سـرور HTMLInputFile با استفاده از كنترل ــه ــوط بـ ــگ مربـ ــار تـ ــراي اينكـ ــورس formبـ ــد در سـ ــارت HTML را بايـ ــيد و عبـ ــود بخشـ بهبـEncrypt="MultiPart/form-data" اين خاصيت سبب مي شود تا مرورگر متوجه . را به آن اضافه نمود

كردن فايل بـه سـرور بكـار گرفتـه مـي Uploadاين مطلب گردد كه يكي از كنترل هاي روي صفحه براي بعـالوه گزينـه . اسـتفاده مـي گـردد "Type="File يعنـي File با نوع <Input>ي اينكار از تگ برا. شود

RUNAT="Srever" پس از انتخاب فايل از طرف كاربر و فشردن دكمه . هم الزم مي باشدSubmit بقيه .كار بايد به صورت برنامه نويسي انجام شود

fileSuggestionsControl.PostedFile.SaveAs(…);

:نکته \c:\temp آورده مـی شـود يعنـی بجـای \\ در زبان سی و مشتقات آن مسير دايرکتوری ها همـراه بـا

\\c:\\tempمی نويسيم

براي اينكه اطالعات ارائه شده در اين فصل جنبه ی كـاربردي پيـدا كننـد ، كنتـرل هـاي يـاد شـده را بـه رار خواهيم داد تا نكات مربوط به آنها در عمل تجربـه شـوند و صورت چند برنامه كوچك مورد استفاده ق


7



آشـنايي ) در صورت لزوم ( خصوصا در هنگام برنامه نويسي اسكريپتي كالينت سايد در طي فصول آتي .الزم با پشت صحنه فرم هاي وب حاصل گردد

: برنامه اول

ز كاربر شناسه ي كاربري و رمز عبـور را مي خواهيم يك صفحه ی الگين بسيار ساده درست كنيم كه ا ، در سرور مشخص شود كه آيا اين كاربر و كلمـه ي رمـز Submitخواسته و پس از كليك بر روي دكمه

.او معتبر است يا خير

٢ ، HTML باز كنيد و روي صفحه با استفاده از كنترل هاي VS.NET براي اينكار يك پروژه جديد در ) . ٤شكل (Button قرار دهيد بعالوه يك TextFiled عدد ٢ليبل و

طراحي فرم مربوط به صفحه ي الگين-٤شكل

هـا آنهـا را بـه حـالتي در آورد كـه Label بار كليك كـردن روي ٣ يا ٢ اگر دقت كرده باشيد مي توان با . تغيير دهيدPass وIDعنوان اين دو ليبل را به . بتوان داخل آنها عنوان دلخواهي را تايپ كرد

تغييـر دهيـد و txtPass و txtID تكسـت فيلـدها را بـه ID خاصـيت Properties با اسـتفاده از پنجـره در پروژه هاي بزرگ نامگذاري صحيح كنتـرل هـا بـه شـدت كنتـرل . btnSubmit دكمه را به IDهمچنين

. نكنيدبرنامه را ساده مي كند پس هيچگاه از نام هاي پيش فرض استفاده


8



Send را بـه Valueبراي اينكار بايد از پنجره خواص خاصـيت . تغيير دهيد Send عنوان دكمه را هم به ) .در سورس صفحه ( تغيير دهيد Password را به txtPassنوع . تنظيم كنيد

. مود را انتخاب نRun as server control روي تك تك كنترل ها مي توان كليك راست كرد و خاصيت Code حاال بر روي دكمه كه خاصيت اجرا بر روي سرور را پيدا كرده دوبار كليك نماييد و در صـفحه

Behindدر داخل تابعي كه رخداد كليك را نمايش مي دهد كد زير را بنويسيد .

private void btnSubmit_ServerClick(object sender, System.EventArgs e) { if (txtID.Value =="a" && txtPass.Value =="b" ) Response.Write("Ok!"); else Response.Write("Try again!"); }

. در طي فصول آتي بيشتر بحث خواهد شدResponse مانند ASP در مورد اشياء ذاتی

ايد در داخل كد قرار گيرد و اين مورد صرفا مثالي از بديهي است كه چك كردن پسورد به اين صورت نب . بودندHTMLكاربرد كنترل هاي

:برنامه دوم

تمام پردازش ها در اين برنامه كالينت سايد بوده و در اينجا مي خواهيم كاربر با استفاده از يك تكسـت حاصلضـرب MessageBox يك با calcباكس عددي را وارد نموده و سپس با كليك كردن بر روي دكمه

. نشان داده شودDropDown Listعدد در يك عدد انتخاب شده از


9



دكمـه را بـه Id ) . ٥شـكل ( و يك دكمه روي فرم قـرار دهيـد DropDown List و يك TextFiled يك btnCalc ، Id تكست فيلد را به txtNo و Id كنترل DropDown را به ddlNo2تغيير دهيد .

. براي مشاهده سورس صفحه كليك كنيد HTMLايين صفحه روي قسمت در پ

. ظاهر فرم برنامه دوم در حالت طراحي-٥شكل

از منـوي ظـاهر شـده . روي صفحه كليك راست كنيد <Head/> يعني Head قبل از پايان تگ مربوط به Insert script block و سپس Client ٦شكل ( را انتخاب كنيد .(

حـاال مكـان نمـا را داخـل محـدوده . ه صورت اتوماتيك ساختار اسكريپت نويسي ما تشكيل مـي شـود ب Client Objects & Eventsاسكريپت قرار دهيد و از منوي پايين افتادني باالي صفحه كه اولين آيـتم آن

در منوي پـايين حاال ) . ٧شكل ( يعني همان دكمه ي روي صفحه را انتخاب نماييد btnCalcاست گزينه ي را از آن onClickگزينـه ي . افتادني سمت چپ صفحه رخدادهاي مربوط به دكمـه نمـايش داده شـده انـد

) .٨شكل (انتخاب نماييد


10



. نحوه ي استفاده از ابزارهاي ويژوال براي سهولت بيشتر در كد نويسي-٦شكل

كند ايجاد مي شود و هـر دسـتوراتي كـه داخـل به صورت خودكار تابعي كه رخداد كليك را بيان مي كسـاني كـه قـبال از . بنويسيد هنگام كليك شدن بر روي دكمه اجرا مي شـود btnCalc_clickبدنه ي تابع

VS.NETمحيط هاي غير ويژوال براي انجام اينكار استفاده مي كردند ، مي داننـد چـه نعمـت بزرگـی بـه به دكمه هم دقت كنيد به صورت خودكار عبارت زير به آن اضافه حاال اگر به تگ مربوط! اضافه شده است

.شده استlanguage="javascript" onclick="return btnCalc_onclick()"


11



. استفاده از ابزارهاي ويژوال براي ايجاد روتين هاي مربوط به رخدادهاي اشياء-٧شكل

. دكمه را نمايش مي دهد منويي كه ليست رخدادهاي وابسته به يك -٨شكل

براي اين منظور به همان ترتيبي كه . را پر كنيمdropdown list صفحه ، onload مي خواهيم در رخداد را windowبراي اضافه كردن تابع مربوط به رخداد كليك عمل كردن ، از منوي پايين افتادني سمت چـپ

بـه صـورت خودكـار تـابع . راonloadاسـت ، گزينـه ي انتخاب مي كنيم و از منوي پايين افتادني سـمت ر window_onload اضافه مي شود و اگر به تگ مربوط به body دقت كنيد مالحظه مـي كنيـد كـه عبـارت

. زير هم به صورت خودكار به آن اضافه شده است

>()"body MS_POSITIONING="GridLayout" language="javascript" onload="return window_onload<


12



اضـافه كنـيم روي آن كليـك dropdown list اگر در برنامه اي الزم شد يك سري عناصـر ثابـت را بـه

، مي توان آيتم هاي جديد را ) ٩شكل (در صفحه ي باز شده . راست كنيد و گزينه خواص را انتخاب كنيد اضافه كنـيم بايـد بـا dropdownlistع اضافه كرد و وقتي مي خواهيم آيتمي را با برنامه نويسي به اين نو

: اينكار را انجام دهيم يعني optionاستفاده از شيء سازنده

newOption = new Option(optionText,optionValue,defaultSelected,selected);

. فراهم مي كندdropdown list صفحه اي كه امكان اضافه كردن عناصر استاتيك را به -٩شكل


13



:کد مربوط به بارگذاری صفحه function window_onload() { var i,j=0; for(i=0 ; i<=100 ; i+=10) { dd = new Option(i,i); window.Form1.ddlNo2.options[j]=dd; j++; } }

:کد مربوط به رخداد کليک روی دکمه

function btnCalc_onclick() { window.alert( window.Form1.ddlNo2.value * window.Form1.txtNo.value ); }

در اين فصل نحوه ي برنامه نويسي كالينت سايد و يا همـان اسـكريپت نويسـي سـنتي را بـا هـم مـرور بخش تر شده اسـت كرديم و ديديم كه در اين محيط جديد چقدر اين نوع برنامه نويسي ساده تر و لذت

و از اينجا به بعد در طي فصول آتي اگر الزم بود اسكريپت نويسي كالينت سايد را در موارد معـدودي بـه .برنامه اضافه كنيم ، حداقل روش مكانيزه آنرا به خوبي مي دانيم

اوا اسـکريپت راهنمای آموزش ج( برای مطالعه بيشتر در مورد اين نوع برنامه نويسی می توان به کتاب ٢٢٠ مفيـد و کـاربردی در طـی -کتـابی مختصـر . مراجعه کـرد ) نشر ادبستان - ترجمه فرنود عسکری -

. صفحه می باشد


14



:تمرين

برنامـه اي بنويسـيد كـه در آن مـتن فارسـي وارد شـده در يـك HTMLبا استفاده از كنترل هاي -١TextArea به معادل يونيكد آن در TextAreaديل شود ديگر تب.

و يـك چـك بـاكس بـراي منفـي ٣٠ تا ١٠سه راديو باتن را روي صفحه قرار دهيد و براي انتخاب -٢خروجي روي صفحه بـا . براي ضرب در آيتم هاي راديو باتن ها TextFieldبودن يا نبودن و يك

. نمايش داده شود document.writeاستفاده از متد ا تكميل كنيد بطوريکه نام فايلهای ذخيره شـده روی سـرور كردن فايل به سرور ر Uploadبرنامه -٣

) . برای اين منظور استفاده نماييد System.Guidمی توانيد از : راهنمايی . ( يکسان نباشند


Documents

Microsoft Word - asp_net_ch03_final