آموزش ASP.Net - کنترل DropDpownList

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

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 :

نظر شما :

سوال امنیتی : پایتخت ایران ؟

آموزش طراحی وب ASP.Net 4 برنامه نویسی وب سرور دات نت

مقدمه و معرفی کنترل DropDownList

آموزش طراحی وب ASP.Net 4
برنامه نویسی وب سرور دات نت