ASP.NET AJAX好用方便的$get

2008-03-24

5867
0
AJAX

如果在ASP.NET 中使用AJAX工具的話，就會發現到$get和$find非常的好用

$get

$get可以替代javascrip的document.getElementByID 和 element.getElementByID function。
因為是定義在ASP.NET Client side library裡，所以要include ScriptManager控制項在頁面上。
$get接受兩個參數

如果在ASP.NET 中使用AJAX工具的話，就會發現到$get和$find非常的好用

$get

$get可以替代javascrip的document.getElementByID 和 element.getElementByID function。
因為是定義在ASP.NET Client side library裡，所以要include ScriptManager控制項在頁面上。
$get接受兩個參數

$get(id,element);

Term	Definition
id	The ID of the DOM element to find.
element	The parent element to search.The default is the document element

例1.

在畫面上擺放三個button來改變文字的顏色。

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript" >
        function changeColor(color){

        //找到div
        var div=$get('div');
        //設定顏色
        div.style.color=color;
        }
        </script>

    <div id="div">
    測試$get。測試$get。測試$get。改變文字顏色
    </div>
    <input id="bt_blue" type="button" value="Blue" onclick="changeColor('blue');" />
    <input id="bt_green" type="button" value="Green" onclick="changeColor('green');" />
    <input id="bt_red" type="button" value="Red" onclick="changeColor('red');" />

    </form>

例2.上一例子是用HTML Client 控制項，這次放入server端控制項Label和Button，並放入ContentPage。
一樣可以達到相同的效果

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <script type="text/javascript">
        function changeColor(color){

        //找到div
        var div=$get('<%= me.label.ClientID %>');
        //設定顏色
        div.style.color=color;
        }
    </script>

    <asp:Label ID="label" runat="server" Text="測試$get。測試$get。測試$get。改變文字顏色">
    </asp:Label>
    <br />
    <asp:Button ID="bt_blue" runat="server" Text="Blue" OnClientClick="changeColor('blue');return false;" />
    <asp:Button ID="bt_green" runat="server" Text="Green" OnClientClick="changeColor('green');return false;" />
    <asp:Button ID="bt_red" runat="server" Text="Red" OnClientClick="changeColor('red');return false;" />
</asp:Content>

不一樣的地方在changeColor function中，var div=$get('<%=me.label.ClientID%>');
因為頁面是ContentPage，所以在檢示頁面原始檔發現server端控制項為'ct100_ContentPlaceHolder1_'

var div=$get('ct100_ContentPlaceHolder1_Label');

例3.在這例子，建立一個GridView二個欄位，改變文字的顏色，使用程式碼帶入ClientID

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <script type="text/javascript">
        function changeColor(LabelID,color){

        //找到div
        var div=$get(LabelID);
        //設定顏色
        div.style.color=color;
        }
    </script>

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:TemplateField HeaderText="Text" SortExpression="Text">
                <ItemTemplate>
                    <asp:Label ID="lbl_text" runat="server" Text='<%# Bind("Text") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Colors">
                <ItemTemplate>
                    <asp:Button ID="bt_blue" runat="server" Text="Blue" />
                    <asp:Button ID="bt_green" runat="server" Text="Green" />
                    <asp:Button ID="bt_red" runat="server" Text="Red" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</asp:Content>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Me.IsPostBack Then

Dim dt As New Data.DataTable

dt.Columns.Add("Text", GetType(String))

Dim r As Data.DataRow

For i As Integer = 1 To 5

r = dt.NewRow

r("Text") = "測試$get。測試$get。測試$get。改變文字顏色"

dt.Rows.Add(r)

Session("dt") = dt

Me.GridView1.DataSource = Session("dt")

Me.GridView1.DataBind()

End If

End Sub

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

If e.Row.RowType = DataControlRowType.DataRow Then

'取得按鈕控制項

Dim btnBlue As Button = CType(e.Row.FindControl("bt_blue"), Button)

Dim btnGreen As Button = CType(e.Row.FindControl("bt_green"), Button)

Dim btnRed As Button = CType(e.Row.FindControl("bt_red"), Button)

Dim lblText As Label = CType(e.Row.FindControl("lbl_text"), Label)

Dim onClientClick As String = "changeColor('{0}','{1}');return false;"

'設定onclickClient呼叫javascript fucntion

btnBlue.OnClientClick = String.Format(onClientClick, lblText.ClientID, "blue")

btnGreen.OnClientClick = String.Format(onClientClick, lblText.ClientID, "green")

btnRed.OnClientClick = String.Format(onClientClick, lblText.ClientID, "red")

End If