私人公開筆記本: 6月 2013

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

執行結果如下：

請自行操作體驗...

訂閱：文章 (Atom)