2013年6月22日 星期六

ASP.NET 使用JQuery全部取消GridView中的CheckBox

如題,有些人有寫過ASP.NET的應該都會知道,也應該會想說我只要寫一個For迴圈再去抓GridView中的CheckBox就可以了,但當你剛開始接觸JQuery(初學者)時,你可能會想說我何不透過JQuery去抓GirdView中的CheckBox呢?
我是這麼想的...直接抓全部的 input再取得類型(type)是CheckBox把它取消就可以了,這樣的好處是我不用再寫For迴圈去一個一個抓CheckBox控制項,也能輕易的抓到全部的CheckBox囉

如何實做,請看程式碼,並請實際操作...程式碼如下:

Default.aspx:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!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">
<script src="jquery-2.0.1.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="全部取消" />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            DataSourceID="SqlDataSource1">
            <Columns>
                <asp:TemplateField HeaderText="CheckBox">
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="test_id" HeaderText="test_id" InsertVisible="False"
                    ReadOnly="True" SortExpression="test_id" />
                <asp:BoundField DataField="test_name" HeaderText="test_name"
                    SortExpression="test_name" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [test_T]"></asp:SqlDataSource>
   
    </div>
    </form>
</body>
</html>

Default2.aspx.vb:
Imports System.Text
Partial Class Default2
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim str_js As New StringBuilder
        str_js.Append("function CB_CFalse(){")
        str_js.Append("$('input[type=checkbox]:checked').each(function () {")
        str_js.Append("$(this).attr('checked', false);")
        str_js.Append("})")
        str_js.Append("}")
        Button1.Attributes("onclick") = "CB_CFalse();"
        '假如未啟用asp.net ajax功能
        If ScriptManager.GetCurrent(Page) Is Nothing Then
            '有些情況下會需要以動態的方式加入用戶端指令碼。
            '若要動態加入指令碼,請使用 RegisterClientScriptBlock 方法、RegisterClientScriptInclude 方法、RegisterStartupScript 方法或 RegisterOnSubmitStatement 方法,視您要加入指令碼的時間和方式而定。
            'RegisterStartupScript方法會在最後面插入javascript程式碼
            Page.ClientScript.RegisterStartupScript(Me.GetType(), "wjs2", str_js.ToString, True)
        Else
            '否則有啟用asp.net ajax功能
            ScriptManager.RegisterStartupScript(Me, Me.GetType(), "wjs2", str_js.ToString, True)
        End If
    End Sub
End Class

說明:
1.<script src="jquery-2.0.1.min.js"></script>特別注意紅色標起來的這一行,您必須去JQuery的官方網站下載檔案,這個檔案有分版本,請自行下載。
2.$('input[type=checkbox]:checked').each  $為JQuery的簡易寫法,括號內的input就是抓html的input,type=checkbox就是抓input屬於checkbox的類型,運用each去抓每一個chekcbox
3.$(this).attr('checked', false);  this就是目前的checkbox,去設定checked=false

以上如有說明錯誤請指點,感謝...



ASP.NET DropDownList下拉式選單運用JavaScript變更Label值

如題...

Default.aspx:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    請選擇身份:
       <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem Value="0">請選擇身份</asp:ListItem>
                    <asp:ListItem Value="1">學生</asp:ListItem>
                    <asp:ListItem Value="2">管理者</asp:ListItem>
       </asp:DropDownList><br />
        <asp:Label ID="Label1" runat="server" Text="您的身分是..."></asp:Label>
        <asp:Label ID="Label2" runat="server" ></asp:Label>
    </div>
    </form>
</body>
</html>


Default.aspx.vb:
Imports System.Text
Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim str_js As New StringBuilder
        str_js.Append("function TC(){")
        'ClientID是為了取得經過編譯後的DropDownList1控制項ID
        str_js.Append("var ddl = document.getElementById('" & DropDownList1.ClientID & "');")
        str_js.Append("var lab = document.getElementById('" & Label2.ClientID & "');")
        str_js.Append("switch(ddl.selectedIndex){")
        str_js.Append("case 1:")
        str_js.Append("lab.innerHTML='學生';")
        str_js.Append("break;")
        str_js.Append("case 2:")
        str_js.Append("lab.innerHTML='管理者';")
        str_js.Append("break;")
        str_js.Append("default:")
        str_js.Append("lab.innerHTML='';")
        str_js.Append("}}")
        DropDownList1.Attributes("onchange") = "TC();"
        '假如未啟用asp.net ajax功能
        If ScriptManager.GetCurrent(Page) Is Nothing Then
            '有些情況下會需要以動態的方式加入用戶端指令碼。
            '若要動態加入指令碼,請使用 RegisterClientScriptBlock 方法、RegisterClientScriptInclude 方法、RegisterStartupScript 方法或 RegisterOnSubmitStatement 方法,視您要加入指令碼的時間和方式而定。
            'RegisterStartupScript方法會在最後面插入javascript程式碼
            Page.ClientScript.RegisterStartupScript(Me.GetType(), "wjs2", str_js.ToString, True)
        Else
            '否則有啟用asp.net ajax功能
            ScriptManager.RegisterStartupScript(Me, Me.GetType(), "wjs2", str_js.ToString, True)
        End If
    End Sub
End Class

執行結果如下:







請自行操作體驗...