2019/0402/前端作業四-jQ應用轉換樣式&ASP.NET_FormView控制項-會員資料維護實例
前端作業四 - jQ應用轉換樣式
熟悉JQ語法，藉由切換class切換樣式，CSS樣式互斥會以後面的為主，所以必須先清除CLASS或CSS。
題外話:被觸發事件的物件不用重複寫ID，能用this代替。
發現問題:function太死，要寫活。
死 30 靜態寫死
<!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>活 31 動態參數
三個按鈕動作都是在變更字體大小， 應該把動作註冊在三個按鈕的上一層容器， 從容器去找子輩哪個物件被點擊， 再藉由傳事件至funtion， 抓取觸發點擊事件的物件的id名稱， 當作方法的參數去進行， 事件目標物增加屬性
Bug 點擊容器div 也會觸發增加selected樣式 ，解決方法:if 是span才增加selected樣式。
相反動作toggle true <-> false 預設建立在click 缺點同時也是優點，只能做本身狀態互斥改變。
可能沒專心聽課，不知道未啥老師這邊多了cl，導致程式會跑不起來，還以為是jq版本錯了看半天，拿掉cl就好了...
滑鼠事件
又分為 up down Enter leave
hover 是 toggle的一種實現，
就必須分開寫
事件可以被記錄
問題:上一行動畫還沒執行完，就執行下一行程式。
解決: call back function 跑完 func1後才會執行func2
ASP.NET_FormView_控制項_會員資料維護實例
每個view都有它的用途，因為每個view長的都不太一樣，基於對view的型態、功能、樣式都有了解，Ex.gridview後台、datalist前台。
FormView
VS2017版本會自動產出itemtemplate、edit itemtemplate、insert itemtemplate。
Formview具有新增功能，因為具有insert itemtemplate。
Formview 一次只能顯示一筆資料。除非給予allowpaging=true屬性
實務來說會員的頁面formview不會具有換頁功能。 但管理員需要一次看到全部的資料? 所以就藉由組合girdview+formview成一個介面做不同顯示， 帳號放在左側，右側為詳細資料， IDE 對girdview右鍵 -> 編輯資料行-> commandfield -> showselectbutton 前端寫成點擊girdview帳號後， formview抓girdview點擊的參數對formview下指令與參數。
提示(以前講過):要更新的與被觸發的區域postback
區域postback使用ajax 1. 加入函式庫 ScriptManager 2. 區域用updatepanel – ContentTemplate 包起來
更改樣式與排版
後端只有三種按鈕(很重要屬性很重要)擁有commandname可用
Datalist有好幾筆所以必須要指定要更改哪一筆
那formview只會顯示一筆所以就不需要指定
Bind(可改)、Eval(pk不給改)資料繫結標準表示式
撰寫HTML的TABLE、TR、TD 再把控制項塞入，
實務上密碼與帳號不會放在會員資料同頁面修改，
關聯別張資料表並加入學位資料並把相同欄位消除(更改SQL語法)，
將性別名稱布林值改為男女(也在SQL更改較方便)，
驗證信通過的改為在帳號旁顯示，
且不加提示提式變成只有管理員看得懂，
問題:瀏覽器只看得懂img src tag?資料庫的媒體檔為二元編碼而不是鏈結。
如何將二進位的值轉為圖形 ? 圖並不是以檔案型式存在
都是路徑但不一定是檔案的路徑 ??
新增項目-> 泛型處理常式 HTTPhander
特性變限制
(沒有重新整理(regust/response)都會不知道伺服器更新了什麼內容)
這段泛型程式只做一件事情，去資料庫把資料取出來，把二進位轉為圖片，
不能再後端寫只能在handler寫，而泛型處理常式是handler，副檔名為ashx，sh為handler
外型跟c#長的一樣
Class 繼承 介面 多形 I interface 介面沒有實做 物件導向技術??
Class 類別名稱 繼承 一隻程式就是一個獨立的類別
寫食譜 類別是菜 ??
回傳 void無 bool不林 值
傳進來context
如果呼叫泛型則做泛型裡面寫的事情，
這裡完全沒有控制項，但可以用複製的??
記得using
回到36aspx -> img那改成跟36ashx要圖片，透過url
回到36ashx (Regust response 都是鑄造出來的)抓值要先，
context.request.方法querystring抓帳號丟在參數再丟去資料庫要資料，
原本handler是http在做，但這邊換我們來寫，
利用reader將資料讀出來，
再用方法binarywrite用二進位輸出(16轉2)轉成byte陣列 。
好處(安全性保護)，另存圖檔時會存不下來，路徑是泛型處理檔案的位置。
這裡有點不清楚但上面有記下來關鍵字應該可以去查一下。
新增功能控制項 insertitemtemplate 36
Itemtemplate 轉到 insert itemtemplate 的commandName為New。
CommandName都是固定的有
edit、update；new、insert；cancel、delete；select。
拿33的ado.net新增畫面來改在insertitemtemplate， 資料要新增進資料庫都必須要有驗證器， Button的commandname一定要用insert，
問題:為什麼只是要新增又不會顯示(會顯示輸入框)卻要用bind?
只要一顆按鈕是insert，直接透過Bind抓值再透過bind直接寫回去， 以往(33ado.net)要抓值在寫回去。
改寫FormView後的結論:只要是textbox只要繫結bind，就不用寫抓值。
提示:causesvalidation:false 不受驗證器控制。
之前下拉式選單(學歷)寫在pageload但現在不能，必須寫在formview事件上面，前端onmodechange就是formview的切換唯讀與編輯事件，
以上都是在修改33轉為36的內容。
最後前端
最後後端
Last updated
Was this helpful?