مقدمه و معرفی کنترل 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 :

  1. ابتدا یک صفحه ASP.Net در محیط Visual Studio ایجاد کرده و یا صفحه از قبل طراحی شده خود را باز کنید .
  2. از منوی Toolbox و از قسمت کنترل های Standard یک کنترل DropDownList را کشیده و روی صفحه قرار دهید .
  3. همجنین می توانید به صورت مستقیم در فسمت کدنویسی Source صفحه کد مربوط به کنترل را تایپ نمایید .
  4. پس از قرار دادن کنترل بر روی صفحه می توانید آیتم های مورد نظر خود را به صورت دستی به کنترل اضافه کرده و یا با انتخاب خاصیت 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 آن نیز فعال باشد .

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( ) ;
      }
  }


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1