مقدمه و معرفی کنترل DropDownList
چهارشنبه 24 خرداد 1391 9:25 AM
مقدمه :
از کنترل 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 :
کار با مجموعه 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 آن نیز فعال باشد .
| 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 / > < 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( ) ; } } |
کریمی که جهان پاینده دارد تواند حجتی را زنده دارد
دانلود پروژه و کارآموزی و کارافرینی
