شروع کار با ASP.NET :: تازه کارها بخوانند (قسمت پنجم : مروری بر کنترل های استاندارد سمت سرور (Server-Side))

 در قسمت قبل با اصول برنامه نویسی به زبان VB.NET و #C آشنا شدیم .

در این قسمت یک مرور کلی به کنترل های سمت سرور (ابزاری که در پنجره ToolBox قرار دارند) کرده و هر مورد را به صورت خلاصه توضیح می دهم .

پنجره Toolbox به صورت پیشفرض به چند بخش تقسیم شده است :

1. Standard : کنترل های استاندارد و پرکاربرد وب در این بخش قرار گرفته است ، این کنترل ها بیشتر جهت ساخت فرم های مختلف استفاده می شود
2. Data : در این بخش کنترل های داده ای قرار گرفته ، این کنترل ها جهت ارتباط با پایگاه داده و همچنین نمایش اطلاعات به انواع مختلف استفاده می شود .
3. Validation : این بخش شامل کنترل های پرکاربردی برای اعتبار سنجی فرم ها است ، اینکه پرکردن یک کنترل مانند Textbox اجباری باشد یا اینکه مقدار وارد شده در یک فیلد از نظر ما صحیح است یا خیر بر عهده این کنترل ها می باشد
4. HTML : شامل کنترل های HTML محض می باشد

سایر بخش ها کاربرد زیادی نداشته و توضیح آن نیاز به پیش زمینه های خاص دارد بنابراین از ذکر آنها خودداری می نمایم .

اکنون به پرکاربرد ترین کنترل های Standard می پردازیم :

• Button : کاربرد این کنترل برای همه ما به وضوح روشن است ، این کنترل جهت تایید کردن یک فرم است و باعث Postback شدن صفحه می شود ، از رویداد OnClick این کنترل جهت کد نویسی پس از کلیک شدن استفاده می شود .
• Textbox : این کنترل جهت ورود اطلاعات استفاده می شود ، دارای یک خاصیت Textmode بوده که سه حالت Single , MultiLine , Password دارد که به ترتیب جهت وارد کردن متن عادی ، متن های چند سطری و رمز عبور به کار می رود ، از خاصیت Text آن جهت واکشی متن داخلی استفاده می کنیم .
• Label : از این کنترل جهت نمایش یک متن استفاده می شود ، این کنترل بسیار ساده بوده با این حال کاربرد زیادی دارد ، از خاصیت Text آن جهت نمایش متن مورد نظر استفاده می شود .
• CheckBox : این کنترل به زبان سایده همان بلی یا خیر است یعنی دو حالت بیشتر ندارد ، معمولا برای دریافت موافقت کاربر و همچنین مرا به خاطر بسپار استفاده می شود ، از خاصیت Checked آن برای اینکه بفهمیم تیک خورده است یا خیر استفاده می کنیم ، این خاصیت یک مقدار Boolean (یا  True یا False ) بر می گرداند .
• RadioButton : این کنترل به تنهایی هیچ کاربردی ندارد ، یعنی فقط هنگامی که دو یا چند عدد از این کنترلها در کنار هم قرار بگیرند میتوان از بین آنها فقط یکی را انتخاب نماییم (برای اینکار هم RadioButtonList پیشنهاد می شود بنابراین کلا این کنترل به ندرت استفاده می گردد)
• CheckBoxList : این کنترل یک چک لیست در اختیار شما قرار می دهد که میتوانید از بین آنها یک یا چند یا همه را تیک زده و انتخاب کنید ، برای درج آیتم در آن فقط کافیست روی خاصیت Items کلیک کرده و ... را انتخاب کنید (میتوانیم از مثلث کوچک کنار کنترل و سپس انتخاب گزینه Edit Items هم استفاده کنید که در تصویر زیر مشخص است) ، در پنجره باز شده از دکمه Add جهت اضافه نمودن آیتم استفاده می کنیم :

هر یک از آیتم ها دارای 5 خاصیت می باشند ، Enable که آیتم را فعال یا غیر فعال می کند ، Selected که مشخص می کند این آیتم تیک خورده است یا خیر (میتوانید در این کنترل یک یا چند آیتم را Selected را True کنید) و Text که متن هر آیتم است همچنین Value که مقدار پشت پرده می باشد و میتوان از آن بعدا استفاده کرد .

خاصیت Value کاربر زیادی دارد ، معمولا وقتی یک متن به خاصیت Text تخصیص می دهیم یک عدد یکتا در Value وارد می کنیم و در کد نویسی و همچنین ذخیره در بانک اطلاعاتی از این Value استفاده می کنیم دلیلش این است که کار کردن با یک عدد خیلی ساده تر از کار کردن با یک کلمه یا جمله است و ضریب خطا را کاهش می دهد ، همچنین در بانک اطلاعاتی فضای کمتری اشغال خواهد کرد .

پنجره فوق که در تصویر ملاحظه می کنید Collection Editor نام دارد و در سه کنترل زیر هم موجود می باشد .

• ListBox : این کنترل بسیار شبیه CheckBoxList است ، یعنی مشابه آن دارید Items بوده و رفتاری مشابه از خود نشان می دهد ، تفاوت این دو اول در ظاهر است دوم در خاصیت SelectionMode ، این خاصیت در Listbox وجود دارد و این امکان را می دهد که به کاربر اجازه دهیم فقط یکی از گزینه ها را انتخاب کند (Single) یا اینکه بتواند چند آیتم را با هم انتخاب کند (Multiple) ، کنترل CkeckboxList این خاصیت را نداشته و خواه نا خواه به صورت Multiple عمل می کند .

• RadioButtonList: این کنترل شبیه دو کنترل فوق است یعنی دارای خاصیت Items می باشد تفاوتش این است که از بین گزینه ها فقط می توان یکی را انتخاب نمود .
• DropDownlist : این کنترل دقیقا رفتاری مشابه RadioButtonList دارد یعنی فقط میتوان یکی را انتخاب کرد تنها تفاوت این دو کنترل در ظاهرشان است .

دو کنترل فوق یعنی RadioButtonList و  DropDownList خاصیتی به نام SelectedItem دارند (که البته در لیست پنجره Properties نیست ولی در کد نویسی میتوان از آن به وفور استفاده کرد) ، به عنوان مثلا یک DropDownlist در صفحه قرار دهید و چند آیتم به همراه Text و Value به آن اضافه نمایید ، اکنون یک Button و یک Label هم به صفحه بیافزایید ، روی Button دابل کلیک کرده و مقدار Text آیتم انتخاب شده کنترل Dropdownlist را در Label نمایش دهید ، کد شما به صورت زیر را خواهد بود :

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

        Label1.Text = DropDownList1.SelectedItem.Text

    End Sub

همچنین میتوانید مقدار Value آن را نیز واکشی نمایید :

DropDownList1.SelectedItem.Value

شاید سوال کنید که کد فوق با DropDownList1.SelectedValue چه تفاوتی دارد ، جواب این است که هیچ فرقی ندارند و هر دو یک کار را انجام می دهند و آن واکشی مقدار Value آیتم انتخاب شده است .

 این توضیحات دقیقا برای کنترل RadioButtonList هم صادق است ، البته دو کنترل CheckBoxList و Listbox کمی متفاوت هستند چرا که به جای یک آیتم ممکن است چند آیتم آنها انتخاب شده باشد ، بنابراین برای واکشی آیتم های انتخاب شده نیاز به یک حلقه و یک شرط داریم :

        For Each myItem As ListItem In CheckBoxList1.Items

            If myItem.Selected = True Then

                Label1.Text += myItem.Text

            End If

        Next

همانطور که ملاحظه می شود همه مقادیر چک لیست های انتخاب شده کنارهم به خاصیت Text کنترل label1 اضافه خواهند شد .

 همچنین از طریق کد نویسی میتوانید آیتم هایی را به لیست اضافه یا کم نمایید (برای فهم کد های زیر حتما سری مقالات شی گرایی را مطالعه نمایید ) :

    DropDownList1.Items.Add(New ListItem("نام آیتم", "مقدار آیتم", False))

شاید کد فوق برای شما کمی غریبه باشد ، همانطور که میتوانید ملاحظه کنید متد Add یک ورودی از نوع ListItem دریافت می کند ، بنابراین ما یک شی از این نوع را به صورت مستقیم ایجاد کرده و به این متد تخصیص دادیم ، میتوانستیم کد فوق را به صورت زیر هم بنویسیم :

        Dim myItem As New ListItem("نام آیتم", "مقدار آیتم", False)

        DropDownList1.Items.Add(myItem)

همچنین به صورت زیر :

        Dim myItem As New ListItem()

        myItem.Text = "نام آیتم"
        myItem.Value = "کد آیتم"
        myItem.Selected = False

        DropDownList1.Items.Add(myItem)

همچنین میتوان برای مقدار دهی خواص از واژه With نیز به صورت زیر استفاده کرد :

        Dim myItem As New ListItem()

        With myItem
            .Text = "نام آیتم"
            .Value = "کد آیتم"
            .Selected = False
        End With


        DropDownList1.Items.Add(myItem)

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

•  HyperLink : این کنترل همان لینک هایی که به وفور در سایت ها می بینید را ایجاد می کنید ، یعنی با کلیک بر روی آن به یک صفحه دیگر یا یک وبسایت هدایت خواهید شد

خاصیت مهم آن NavigateUrl است که آدرس صفحه مورد نظر یا وب سایت مورد در آن وارد می شود . همچنین خاصیتی به نام Target دارد که اگر Blank_ ست شود صفحه را در یک پنجره جدید و اگر Self_ ست شود در همان پنجره باز خواهد کرد .

این کنترل دارای رویداد OnClick نیست ، یعنی اگر بر روی آن دبل کلیک کنید بلاک کدی در بخش کد نویسی در اختیار شما قرار نخواهد گرفت

• LinkButtun : اگر چه این کنترل از نظر ظاهری شبیه Hyperlink است ولی  هیچ شباهتی به هم ندارند ، در حقیقت این کنترل دقیقا شبیه کنترل Button است فقط ظاهر آن شبیه Link شده است ، بر خلاف Hyperlink این کنترل دارای رویداد Onclick بوده و پس از دبل کلیک کردن بر روی این کنترل بلاک کد نویسی برای آن در اختیار شما قرار گرفته می شود و میتوانید دقیقا مانند یک Button برای آن کد نویسی کنید .
• BulletedList : این کنترل یک لیست Bullet دار برای شما ایجاد می کند ، از نظر داشتن خاصیت Items مشابه DropdownList یا ListBox است  ، این کنترل دارای خاصیت BulletStyle جهت تنظیم نحوه نمایش Bullet ها است ؛ همچنین خاصیتی به نام DisplayMode داشته که نحوه نمایش متن هر Bullet را تعیین می کند ، یعنی هر آیتم آن میتواند به صورت متن ساده ، هایپرلینک یا لینک باتن عمل کند .
• Image : این کنترل برای نمایش دادن یک تصویر به کار می رود ، دقت کنید تصویر مورد نظر باید در پروژه شما موجود باشد ، از خاصیت ImageUrl برای آدرس دهی تصویر استفاده می کنیم

به عنوان مثال اگر یک عکس به نام ali.jpg در پوشه images پروژه داشته باشیم خاصیت ImageUrl را برابر Images/ali.jpg قرار می دهیم ، همچنین با کلیک بر روی آیکون ... در کنار این خاصیت میتوانید عکس را انتخاب نمایید .

این کنترل هم مانند Hyperlink دارای رویداد OnClick نبوده و بلاک کد در اختیار شما قرار نخواهد داد .

• ImageButton : این کنترل همانطور که از اسمش مشخص است ترکیبی از کنترل Image و Button است ، علاوه بر اینکه میتواند یک عکس را نمایش دهد و دارای خاصیت ImageUrl است رفتاری شبیه Button از خود بروز می دهد ، یعنی میتوان مانند Button و LinkButton برای رویداد OnClick این کنترل کد نویسی کرد ، کافیست روی آن دبل کلیک کنید تا بلاک کد نویسی در اختیار شما قرار داده شود .

این کنترل ها پرکاربرد ترین کنترل های Standard  بودند ، کنترلهای پرکاربرد دیگری نظیر Multiview و FileUpload نیز در این بخش وجود دارند که در قسمت های بعدی به آنها می پردازیم .

در مقاله بعد با بانک های اطلاعاتی رابطه ای آشنا خواهیم شد .