مقدمه :
عملکرد کنترل DropDownExtender ، در حقيقت همانند يک Label مي ماند که وقتي اشاره گر ماوس را روي آن قرار مي دهيم شکل آن شبيه به يک DropDown مي شود و با کليک روي آن، گزينه هاي DropDown مشخص مي شود و ما مي توانيم يکي از گزينه ها را انتخاب نماييم.
عملکرد اين کنترل را در 3 حاالت زير مي بينيد.
1- شکل اين کنترل قبل از اينکه ماوس روي آن قرار بگيرد :
2 - شکل اين کنترل زماني که ماوس روي آن قرار دارد :
3 - شکل اين کنترل زماني که روي آن کليک مي شود :
در اين مقاله به پياده سازي يک DropDownExtender خواهم پرداخت که داراي 3 گزينه به نام هاي Option1 و Option2 و Option3 مي باشد.با کليک شدن هر گزينه ، متن گزينه کليک شده را نشان خواهيم داد. دقت داشته باشيد که تمام اعمال ذکر شده بدون انجام عمل PostBack، صورت خواهد گرفت.
دموي اين برنامه را ميتوانيد اينجا مشاهده کنيد.
براي پياده سازي مثال فوق احتياج به يک Label داريم که در حقيقت متن DropDownExtender را در حالت عادي نگهداري مي کند. سپس به يک کنترل Panel احتياج داريم که گزينه هاي DropDownExtender را نگهداري مي کند. هر يک از گزينه ها (Option ها) در حقيقت يک LinkButton هستند. و در نهايت زمان اضافه کردن کنترل DropDownExtender خواهد رسيد.
شروع :
در اين مثال من از استايل هاي زير براي شکل دهي به کنترل ها استفاده مي کنم.
.ContextMenuPanel
{
border: 1px solid #868686;
z-index: 1000;
background: url(menu-bg.gif) repeat-y 0 0 #FAFAFA;
cursor: default;
padding: 1px 1px 0px 1px;
font-size: 11px;
}
a.ContextMenuItem
{
margin: 1px 0 1px 0;
display: block;
color: #003399;
text-decoration: none;
cursor: pointer;
padding: 4px 19px 4px 33px;
white-space: nowrap;
}
a.ContextMenuItem-Selected
{
font-weight: bold;
}
a.ContextMenuItem:hover
{
background-color: #FFE6A0;
color: #003399;
border: 1px solid #D2B47A;
padding: 3px 18px 3px 32px;
}
|
يک وب سايت از نوع ASP.NET Ajax-Enabled WebSite ايجاد نموده و به نماي Source View برويد.
قطعه کد زير را اضافه نماييد.
<asp:Label ID="TextLabel" runat="server" Text="DropDownExtender Example in 30sharp.com" Width="259px" />
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display :none; visibility: hidden;" >
<asp:LinkButton runat="server" ID="Option1" Text="Option 1" CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:LinkButton runat="server" ID="Option2" Text="Option 2" CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:LinkButton runat="server" ID="Option3" Text="Option 3" CssClass="ContextMenuItem" OnClick="OnSelect" />
</asp:Panel>
<cc1:DropDownExtender runat="server" ID="DDE"
TargetControlID="TextLabel"
DropDownControlID="DropPanel" />
|
همانطور که مشاهده مي نماييد ما يک Label به نام TextLabel ايجاد نموده و متن آن را DropDownExtender Example in 30sharp.com قرار داده ايم. سپس يک Panel به نام DropPanel ايجاد نموده ايم که وظيفه آن نگهداري گزينه ها مي باشد.
همانطور که قبلا ذکر شد، هر يک از گزينه ها در حقيقت يک LinkButton مي باشند. در رويداد کليک هر LinkButton نام تابع OnSelect نوشته شده است. اين تابع را ما در Code Behind صفحه خواهيم نوشت که وظيفه آن مشخص کردن اين است که کدام گزينه انتخاب شده است. اين تابع را در ادامه مقاله مورد بررسي قرار خواهم داد.
سپس کنترل DropDownExtender را به صفحه اضافه نموده ايم. اين کنترل داراي صفات زيادي مي باشد که ما از دو تا از مهمترين آن ها استفاده نموده ايم که عبارتند از :
-
TargetControlID : اين صفت شناسه کنترلي را نگهداري مي کند که نقش کنترل DropDown را ايفا مي کند. که در اينجا ما TextLabel را به آن نسبت داده ايم.
-
DropDownControlID : اين صفت شناسه کنترلي که گزينه هاي DropDown را در خود نگهداري مي کند، را مشخص مي کند که در اين مثال DropPanel مي باشد.
خوب. اکنون زمان بررسي عملکرد اين کنترل مي باشد.
براي انجام اين کار نياز داريم که قطعه کد زير را به صفحه اضافه نماييم.
<asp:UpdatePanel id="Update" runat="server" >
<ContentTemplate>
<asp:Label id="lblSelection" runat="server" Style="padding: 5px; " />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Option1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option3" EventName="Click" />
</Triggers>
</asp:UpdatePanel> |
در قطعه کد بالا يک Label به نام lblSelection در داخل يک UpdatePanel تعريف نموده ايم که ما متن گزينه انتخاب شده در DropDownExtender را در اين Label نشان خواهيم داد.
عملکرد تگ AsyncPostBackTrigger را قبلا در مقاله اي توضيح داده ام ولي جهت يادآوري بايد عرض کنم که با توجه به اينکه LinkButton هايي که ما به عنوان گزينه هاي DropDown استفاده نموده ايم در خارج از UpdatePanel قرار دارند و ما تمايل داريم که با کليک شدن آن ها ، بدون انجام PostBack، کنترل lblSelection به روز رساني شود، پس نياز داريم که با استفاده از تگ AsyncPostBackTrigger، اين LinkButton ها را به UpdatePanel معرفي نماييم.
حال نوبت به اين مي رسد که ببينيم کار تابع OnSelect که با کليک شدن هر يک از گزينه ها (LinkButton ها) فراخواني مي شود چيست.
protected void OnSelect(object sender, EventArgs e)
{
lblSelection.Text = "You selected <b>" + ((LinkButton)sender).Text + "</b>.";
}
|
عملکرد قطعه کد فوق کاملا مشخص مي باشد. با کليک شدن هر يک از گزينه ها، متن آن گزينه به کنترل lblSelection نسبت داده مي شود و در حقيقت ما در اين تابع به تمام خصوصيات گزينه کليک شده دسترسي داريم.
تمام اين اعمال بدون انجام شدن عمل PostBack ، صورت مي گيرد.
مثال انجام شده در اين مقاله از لينک بالاي صفحه قابل دريافت مي باشد.