AjaxControlToolKit ----DropDownExtender(下拉擴展控件) 的簡單使用方法

由於工作的需要,使用了這個控件 挺簡單,使用這個擴展控件能輕鬆的吧 Label 控件 TextBox控件擴展成類似DropDownList控件的功能。這樣使用既可以使用label控件或者textBox控件的一些屬性又能實現dropDownList的功能。

下面大概吧使用方法介紹下(這裏使用Lable控件爲例子):

1. 給頁面添加一個ScriptManager控件(使用方法還沒有研究完全,研究完全了試驗寫點經驗)

2.添加一個控制無刷新的UpdatePanel控件 (同上)

3.在UpdatePanel控件中 添加倆個 Label控件 一個用來添加DropDownExtender擴展,一個用來顯示上個Label中取到的值,一個Panel控件 在Panel控件中添加若干個LinkButton控件

4.所有LinkButton公用一個Click事件,用來取值或者觸發其他事件,我下面的例子主要是用來取值的。

5.在UpdatePanel中添加一個DropDownExtender控件

  a.設置DropDownExtender屬性:TargetControlID  (目標控件ID  或者 靶子控件ID的意思吧) 要吧DropDownExtender擴展到那 個控件上,這裏我是擴展到Label控件上,

   b.這個Label控件的屬性中會出現一個Extender的屬性 裏面有DropDownControlID 這裏設置上面的PanelID

6.添加第3步中添加的LinkButton的事件 

下面是簡單例子的代碼:

頁面代碼:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %>
  2. <%@ Register Assembly="CrystalDecisions.Web, Version=10.2.3600.0, Culture=neutral, PublicKeyToken=692fbea5521e1304"
        Namespace="CrystalDecisions.Web" TagPrefix="CR" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>DropDownExtender簡單練習</title>
        <style type="text/css">
          #Panel1
    {
        background:#ffcc00;
        font-size:12px;
        padding:0px;
        border:solid 1px;
     
    }
     
    #LinkButton1,#LinkButton2,#LinkButton3,#LinkButton4
    {
        color:#666;
        font-size:12px;
    }
          </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                &nbsp;</div>
            <br />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label2" runat="server" Text="Label" Width="129px"></asp:Label><br />
                    <br />
                    <asp:Label ID="Label1" runat="server" Text="請選擇" Width="91px"></asp:Label>
                    <asp:Panel ID="Panel1" runat="server" Width="85px" Style="visibility: hidden">
                        <asp:LinkButton ID="LinkButton1" runat="server" OnClick="lkbtn_Click">西安</asp:LinkButton><br />
                        <asp:LinkButton ID="LinkButton2" runat="server" OnClick="lkbtn_Click">上海</asp:LinkButton><br />
                        <asp:LinkButton ID="LinkButton3" runat="server" OnClick="lkbtn_Click">深圳</asp:LinkButton><br />
                        <asp:LinkButton ID="LinkButton4" runat="server" OnClick="lkbtn_Click">北京</asp:LinkButton></asp:Panel>
                    <cc1:DropDownExtender ID="DropDownExtender1" runat="server" DropDownControlID="Panel1"
                        TargetControlID="Label1">
                    </cc1:DropDownExtender>
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
    </html>

cs文件代碼:

 

  1. using System;
  2. using System.Data;
  3. using System.Configuration;
  4. using System.Collections;
  5. using System.Web;
  6. using System.Web.Security;
  7. using System.Web.UI;
  8. using System.Web.UI.WebControls;
  9. using System.Web.UI.WebControls.WebParts;
  10. using System.Web.UI.HtmlControls;
  11. public partial class test2 : System.Web.UI.Page
  12. {
  13.     protected void Page_Load(object sender, EventArgs e)
  14.     {
  15.     }
  16.     protected void lkbtn_Click(object sender, EventArgs e)
  17.     {
  18.         Label1.Text = ((LinkButton)sender).Text;
  19.         Label2.Text = Label1.Text;
  20.     }
  21. }

先就介紹這點吧,leader過來了

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章