2019/0402/前端作業四-jQ應用轉換樣式&ASP.NET_FormView控制項-會員資料維護實例
熟悉JQ語法,藉由切換class切換樣式,CSS樣式互斥會以後面的為主,所以必須先清除CLASS或CSS。
發現問題:function太死,要寫活。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.line {
border: 1px solid;
cursor: pointer;
}
.large {
font-size: 36pt;
}
.small {
font-size: 8pt;
}
.selected {
background-color: yellow;
font-weight: 900;
border: 3px solid;
}
</style>
</head>
<body>
<div id="switcher">
<span id="small">縮小</span>
<span id="default">標準</span>
<span id="large">放大</span>
</div>
<p>Hello jQuery</p>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#switcher>span').addClass('line');
$('#large').click(function () {
$('p').removeClass().addClass('large');
$('#switcher>span').removeClass('selected');
$(this).addClass('selected');
});
$('#small').click(function () {
$('p').removeClass().addClass('small');
$('#switcher>span').removeClass('selected');
$(this).addClass('selected');
});
$('#default').click(function () {
$('p').removeClass();
$('#switcher>span').removeClass('selected');
$(this).addClass('selected');
});
</script>
</body>
</html>
三個按鈕動作都是在變更字體大小, 應該把動作註冊在三個按鈕的上一層容器, 從容器去找子輩哪個物件被點擊, 再藉由傳事件至funtion, 抓取觸發點擊事件的物件的id名稱, 當作方法的參數去進行, 事件目標物增加屬性
Bug 點擊容器div 也會觸發增加selected樣式 ,解決 方法:if 是span才增加selected樣式。
相反動作toggle true <-> false 預設建立在click 缺點同時也是優點,只能做本身狀態互斥改變。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.line {
border: 1px solid;
cursor: pointer;
}
.large {
font-size: 36pt;
}
.small {
font-size: 10pt;
}
.larger {
font-size: 48pt;
}
.smaller {
font-size: 8pt;
}
.selected {
background-color: yellow;
font-weight: 900;
border: 3px solid;
}
.hide{
display:none;
}
.show {
display: block;
}
</style>
</head>
<body>
<h2>顯示功能按鈕</h2>
<div id="switcher">
<span id="smaller">更小</span>
<span id="small">縮小</span>
<span id="default">標準</span>
<span id="large">放大</span>
<span id="larger">更大</span>
</div>
<p>Hello jQuery</p>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#switcher>span').addClass('line');
//$('#switcher').hide();
$('#switcher').addClass('hide');
$('#switcher').click(function (evt) {
if ($(evt.target).is('span')) {
var id = evt.target.id;
$('p').removeClass().addClass(id);
$('#switcher>span').removeClass('selected');
$(evt.target).addClass('selected');
}
});
//$('h2').click(function () {
// $('#switcher').show();
// $(this).text('隱藏功能按鈕');
//});
//$('h2').click(function () {
// $('#switcher').toggle(1000);
//});
$('h2').click(function () {
if ($('#switcher').cl.hasClass('hide')) {
$('#switcher').removeClass().addClass('show');
$(this).text('隱藏功能按鈕');
}
else {
$('#switcher').removeClass().addClass('hide');
$(this).text('顯示功能按鈕');
}
});
</script>
</body>
</html>
$('h2').click(function () {
if ($('#switcher').cl.hasClass('hide')) {
$('#switcher').removeClass().addClass('show');
$(this).text('隱藏功能按鈕');
}
又分為 up down Enter leave
hover 是 toggle的一種實現,
就必須分開寫

每個view都有它的用途,因為每個view長的都不太一樣,基於對view的型態、功能、樣式都有了解,Ex.gridview後台、datalist前台。
VS2017版本會自動產出itemtemplate、edit itemtemplate、insert itemtemplate。
Formview具有新增功能,因為具有insert itemtemplate。
實務來說會員的頁面formview不會具有換頁功能。 但管理員需要一次看到全部的資料? 所以就藉由組合girdview+formview成一個介面做不同顯示, 帳號放在左側,右側為詳細資料, IDE 對girdview右鍵 -> 編輯資料行-> commandfield -> showselectbutton 前端寫成點擊girdview帳號後, formview抓girdview點擊的參數對formview下指令與參數。
區域postback使用ajax 1. 加入函式庫 ScriptManager 2. 區域用updatepanel – ContentTemplate 包起來
Datalist有好幾筆所以必須要指定要更改哪一筆
那formview只會顯示一筆所以就不需要指定
Bind(可改)、Eval(pk不給改)資料繫結標準表示式
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="36FormView.aspx.cs" Inherits="ASPnet._36FormView" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#container{
border:2px solid;
width:1200px;
margin:auto;
}
#left{
width:200px;
float:left;
}
#right{
width:1000px;
float:right;
}
#bottom{
clear:both;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>