[ASP.NET][C#] GridView滑動效果 ~ Solinari's Notes

2016年9月18日星期日

[ASP.NET][C#] GridView滑動效果

今天要記錄的是GirdView呈現資料時，使用者可透過一個按鈕，來展開或隱藏表格資料。

利用JQuery-slideToggle()，做到GridView滑動的效果。
透過抓取目前ImageButton的圖片檔名，來判斷要顯示展開或隱藏的圖示。

aspx程式碼

	<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewSlide.aspx.cs" Inherits="GridViewSlide" %>

	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
	<title></title>
	<script type="text/javascript">
	$(document).ready(function () {
	$("#imgBtn").click(function () {
	var a = $("#imgBtn").get(0).src.indexOf("down.png");
	if (a > -1) {
	$("#imgBtn").attr("src", "right.png")
	$("#divGridView").slideToggle();
	}
	else {
	$("#imgBtn").attr("src", "down.png")
	$("#divGridView").slideToggle();
	}
	return false;
	});
	});
	</script>
	</head>
	<body>
	<form id="form1" runat="server">
	<div>
	<asp:ImageButton ID="imgBtn" runat="server" ImageUrl="~/down.png"></asp:ImageButton>
	</div>
	<div id="divGridView">
	<asp:GridView ID="gvCalendar" runat="server">
	</asp:GridView>
	</div>
	</form>
	</body>
	</html>

view raw GridViewSlide.aspx hosted with ❤ by GitHub

.cs 程式碼

	using System;
	using System.Data.SqlClient;


	public partial class GridViewSlide : System.Web.UI.Page
	{
	string SqlConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["SQL_ConnectionString"].ConnectionString;
	protected void Page_Load(object sender, EventArgs e)
	{
	using (SqlConnection con = new SqlConnection(SqlConnectionString))
	{
	using (SqlCommand cmd = new SqlCommand())
	{
	cmd.CommandText = @"select * from xxxxx";
	cmd.Connection = con;
	con.Open();
	using (SqlDataReader sdr = cmd.ExecuteReader())
	{
	gvCalendar.DataSource = sdr;
	gvCalendar.DataBind();
	}
	}
	}
	}
	}

圖片GridView資料來源：台北市立動物園公開資料