مقدمه و معرفی کنترل DropDownList
مقدمه :
از کنترل DropDownList در ASP.Net برای نمایش یک منوی کرکره ایی که شامل یک یا چندین
آیتم مختلف می باشد ، به کاربر استفاده می شود . کاربر در هر لحظه می تواند منوی کرکره
ایی را باز کرده و یکی از آیتم های موجود در آن را انتخاب نماید .
آیتم های موجود در کنترل DropDownList توسط مجموعه ListItem کنترل تعیین می شوند .
هر آیتم موجود در کنترل دارای 2 مقدار متن ( Text ) و مقدار ( Value ) می باشد . متن
( Text ) عبارتی که در کنترل به جای آیتم نمایش داده می شود و مقدار ( Value ) مقداری
است که در صورت انتخاب آیتم در منوی کنترل به برنامه باز می گردد . از این مقدار می
توان در امور برنامه نویسی استفاده کرد .
همچنین شما می توانید یکی از آیتم های منو را به صورت پیش فرض انتخاب کنید تا در هنگام
نمایش صفحه در کنترل نمایش داده شود . برای این منظور باید مقدار خاصیت Selected آیتم
را برابر با مقدار True قرار دهید . در ادامه به بررسی بیشتر و نمایش نحوه کار با این
کنترل می پردازیم .
شکل کلی تعریف و نمایش کنترل DropDownList در صفحه های ASP.Net به صورت زیر است :
|
Syntax
|
< asp:DropDownList ID="DropDownList1" runat="server" >
<asp:ListItem Text="ASP.Net" Value="1"
Selected="True" > </asp:ListItem>
<asp:ListItem Text="Java Script" Value="2">
</asp:ListItem>
<asp:ListItem Text="HTML" Value="3">
</asp:ListItem>
< asp:DropDownList / >
|
نحوه قرار دادن یک کنترل DropDownList بر روی صفحه ASP.Net :
- ابتدا یک صفحه ASP.Net در محیط Visual Studio ایجاد کرده و یا صفحه از قبل طراحی شده
خود را باز کنید .
- از منوی Toolbox و از قسمت کنترل های Standard یک کنترل DropDownList را کشیده و روی
صفحه قرار دهید .
- همجنین می توانید به صورت مستقیم در فسمت کدنویسی Source صفحه کد مربوط به کنترل را
تایپ نمایید .
- پس از قرار دادن کنترل بر روی صفحه می توانید آیتم های مورد نظر خود را به صورت دستی
به کنترل اضافه کرده و یا با انتخاب خاصیت Item کنترل از منوی Propertis برنامه ، با
استفاده از پنجره Wizard باز شده ، اقدام به تعیین آیتم های مورد نظر خود نمایید .
کار با مجموعه ListItem کنترل :
گفتیم که آیتم های موجود در کنترل DropDownList توسط مجموعه ListItem تعیین می شود
. برای تعیین هر آیتم در کنترل DropDownList بایستی یک تگ باز و بسته
< asp:ListItem > < / asp:ListItem >
را در کنترل ایجاد کنید . سپس با استفاده از خواص زیر مشخصات هر آیتم را تعیین نمایید
:
|
خاصیت
|
شرح
|
|
Text
|
این خاصیت عبارتی را تعیین می کند که در کنترل به عنوان یک آیتم نمایش داده می شود
.
|
|
Value
|
برای هر آیتم موجود در کنترل می توان یک مقدار ( Value ) تعیین کرد . کنترل در هنگام
انتخاب هر آیتم ، مقدار Value آن را به برنامه باز می گرداند که از این مقدار بازگشتی
می توان در امور برنامه نویسی استفاده نمود .
|
|
Selected
|
این خاصیت تعیین می کند که آیا آیتم مورد نظر در کنترل به صورت پیش فرض انتخاب شده
باشد یا خیر . چنانچه مقدار آن را برای هر کدام از آیتم های کنترل برابر با مقدار True
قرار دهید ، آن آیتم در کنترل به صورت پیش فرض انتخاب شده خواهد بود . در هر کنترل
DropDownList در هر لحظه می توان فقط یک آیتم انتخاب شده باشد . در صورت تعیین بیش
از یک آیتم ، برنامه error خواهد داد .
نکته : در صورت عدم تعیین آیتم خاصی به عنوان آیتم پیش
فرض ، کنترل اولین آیتم موجود در لیست را به عنوان آیتم پیش فرض انتخاب شده قرار خواهد
داد .
|
در مثال زیر نحوه تعریف یک کنترل DropDownList را به صورت کامل نمایش داده ایم . می
بینید که هر آیتم دارای یک جفت مقدار ( value ) و متن ( Text ) بوده و گزینه ASP.Net
به صورت پیش فرض انتخاب شده است .
|
Example
|
< asp:DropDownList ID="DropDownList1" runat="server" >
<asp:ListItem Text="ASP.Net" Value="1"
Selected="True" > </asp:ListItem>
<asp:ListItem Text="Java Script" Value="2">
</asp:ListItem>
<asp:ListItem Text="HTML" Value="3">
</asp:ListItem>
< asp:DropDownList / >
|
Postback کردن صفحه با استفاده از کنترل DropDownList :
در هنگام تغییر دادن آیتم انتخاب شده کنترل DropDownList رویداد SelectedIndexChanged
آن فعال خواهد شد . در حالت پیش فرض اجرا شدن این رویداد کنترل صفحه را Postback نمی
کند . با تغییر دادن مقدار خاصیت AutoPostBack کنترل به مقدار True ، در صورت تغییر
دادن آیتم انتخاب شده کنترل صفحه Postback خواهد شد . فایده Postback کردن صفجه
این است که صفخه به سروز ارسال شده و Refresh می شود . بنابراین می توان تغییرات را
در صفحه مشاهده کرده و همچنین دستورات و توابع تعریف شده در رویداد Page Load صفحه
و رویداد SelectedIndexChanged کنترل را اجرا نماییم . در مثال زیر این مسئله را در
عمل نمایش داده ایم :
مثال : در مثال زیر 2 کنترل DropDownList را در کنار هم قرار داده
ایم . کنترل اول در حالت پیش فرض قرار داشته و مقدار خاصیت AutoPostBack آن روی مقدار
false تنظیم شده است ، بنابراین با تغییر آیتم انتخابی آن صفحه Postback نمی شود .
اما در کنترل دوم مقدار خاصیت AutoPostBack را روی true تنظیم کرده ایم . بنابراین
مشاهده می کنید که با تغییر آیتم انتخابی آن صفحه Postback شده و همچنین یک تابع
که عنوان آیتم اانتخاب شده را توسط یک کنترل Label نمایش می دهد ، اجرا می شود . دستور
این تابع در قسمت کدنویسی صفحه و در رویداد تغییر آیتم کنترل DropDownList
تعیین شده است . این تابع در صورت عدم Postback شدن صفحه اجرا نخواهد شد :
نکته : برای Postback شدن صفحه در هنگام تغییر آیتم
انتخابین کنترل DropDownList باید مرورگر از زبان برنامه نویسی Java Script پشتیبانی
کرده و قابلیت Scripting آن نیز فعال باشد .
< asp:DropDownList ID="DropDownList1" runat="server" >
<asp:ListItem Text="ASP.Net" Value="1"
Selected="True" > </asp:ListItem>
<asp:ListItem Text="Java Script" Value="2">
</asp:ListItem>
<asp:ListItem Text="HTML" Value="3">
</asp:ListItem>
< asp:DropDownList / >
< asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" >
<asp:ListItem Text="ASP.Net" Value="1"
Selected="True" > </asp:ListItem>
<asp:ListItem Text="Java Script" Value="2">
</asp:ListItem>
<asp:ListItem Text="HTML" Value="3">
</asp:ListItem>
< asp:DropDownList / >
<span>Your Selection is : </span> < asp:Label
runat="server" ID="lbl_Show" />
|
Your Selection is :
|
همچنین کد تابع مربوط به نمایش آیتم انتخاب شده در کنترل Drop2 در هنگام تغییر آن که
در فایل کد صفحه قرار دارد به صورت زیر است :
|
Syntax
|
protected void Drop2_SelectedIndexChanged ( object sender , EventArgs e )
{
if ( Page.IsPostBack )
{
lbl_Show.Text = Drop2.SelectedItem.ToString(
) ;
}
}
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :