مقدمه :
از کنترل 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( ) ;
}
} |
