# 2019/0402/前端作業四-jQ應用轉換樣式\&ASP.NET\_FormView控制項-會員資料維護實例 ## 前端作業四 - jQ應用轉換樣式熟悉JQ語法，藉由切換class切換樣式，CSS樣式互斥會以後面的為主，所以必須先清除CLASS或CSS。 #### 題外話:被觸發事件的物件不用重複寫ID，能用this代替。發現問題:function太死，要寫活。 ### 死 30 靜態寫死 ```

縮小標準放大

Hello jQuery

``` ### 活 31 動態參數三個按鈕動作都是在變更字體大小，應該把動作註冊在三個按鈕的上一層容器，從容器去找子輩哪個物件被點擊，再藉由傳事件至funtion，抓取觸發點擊事件的物件的id名稱，當作方法的參數去進行，事件目標物增加屬性 Bug 點擊容器div 也會觸發增加selected樣式，解決方法:if 是span才增加selected樣式。相反動作toggle true <-> false 預設建立在click 缺點同時也是優點，只能做本身狀態互斥改變。 ```

顯示功能按鈕

更小縮小標準放大更大

Hello jQuery

``` #### 可能沒專心聽課，不知道未啥老師這邊多了cl，導致程式會跑不起來，還以為是jq版本錯了看半天，拿掉cl就好了... ``` $('h2').click(function () { if ($('#switcher').cl.hasClass('hide')) { $('#switcher').removeClass().addClass('show'); $(this).text('隱藏功能按鈕'); } ``` ### 滑鼠事件又分為 up down Enter leave hover 是 toggle的一種實現，就必須分開寫 #### 事件可以被記錄 ![](/files/-Ld9h-yrJ5mzAjAgccNB) #### #### 問題:上一行動畫還沒執行完，就執行下一行程式。 #### 解決: 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不給改)資料繫結標準表示式 ``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="36FormView.aspx.cs" Inherits="ASPnet._36FormView" %>

Account:
Pswd:
Name:
Birthday:
Email:
Gender:
EduLevel:
Notes:
Photo:
IsAuth:
Account:
Pswd:
Name:
Birthday:
Email:
Gender:
EduLevel:
Notes:
Photo:
IsAuth:
Account:
Pswd:
Name:
Birthday:
Email:
Gender:
EduLevel:
Notes:
Photo:
IsAuth:

``` 撰寫HTML的TABLE、TR、TD 再把控制項塞入，實務上密碼與帳號不會放在會員資料同頁面修改，關聯別張資料表並加入學位資料並把相同欄位消除(更改SQL語法)，將性別名稱布林值改為男女(也在SQL更改較方便)，驗證信通過的改為在帳號旁顯示，且不加提示提式變成只有管理員看得懂， #### 問題:瀏覽器只看得懂img src tag?資料庫的媒體檔為二元編碼而不是鏈結。 ### 如何將二進位的值轉為圖形 ? 圖並不是以檔案型式存在都是路徑但不一定是檔案的路徑 ?? #### 新增項目-> 泛型處理常式 HTTPhander ![](/files/-LbSRXE8I8etpeL7_3xX) #### 特性變限制 (沒有重新整理(regust/response)都會不知道伺服器更新了什麼內容) 這段泛型程式只做一件事情，去資料庫把資料取出來，把二進位轉為圖片，不能再後端寫只能在handler寫，而泛型處理常式是handler，副檔名為ashx，sh為handler 外型跟c#長的一樣 Class 繼承介面多形 I interface 介面沒有實做物件導向技術?? Class 類別名稱繼承一隻程式就是一個獨立的類別寫食譜類別是菜 ?? 回傳 void無 bool不林值 ``` public class _36GetMemberPhoto : IHttpHandler { public void ProcessRequest(HttpContext context) ``` 傳進來context 如果呼叫泛型則做泛型裡面寫的事情，這裡完全沒有控制項，但可以用複製的?? 記得using 回到36aspx -> img那改成跟36ashx要圖片，透過url 回到36ashx (Regust response 都是鑄造出來的)抓值要先， context.request.方法querystring抓帳號丟在參數再丟去資料庫要資料，原本handler是http在做，但這邊換我們來寫，利用reader將資料讀出來，再用方法binarywrite用二進位輸出(16轉2)轉成byte陣列。 #### 好處(安全性保護)，另存圖檔時會存不下來，路徑是泛型處理檔案的位置。 #### 這裡有點不清楚但上面有記下來關鍵字應該可以去查一下。 ``` using System; using System.Collections.Generic; using System.Configuration; using System.Data.SqlClient; using System.Linq; using System.Web; namespace ASPnet { ///

/// _36GetMemberPhoto 的摘要描述 ///

public class _36GetMemberPhoto : IHttpHandler { public void ProcessRequest(HttpContext context) { SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); SqlCommand Cmd = new SqlCommand("select Photo from members where account=@account", Conn); Cmd.Parameters.AddWithValue("@account", context.Request.QueryString["account"]); SqlDataReader rd; Conn.Open(); rd = Cmd.ExecuteReader(); if (rd.Read()) { context.Response.BinaryWrite((byte[])rd["Photo"]); } Conn.Close(); } public bool IsReusable { get { return false; } } } } ``` ### 新增功能控制項 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的內容。 ### 最後前端 ``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="36FormView.aspx.cs" Inherits="ASPnet._36FormView" %>

Account:
Pswd:
Name:
Birthday:
Email:
Gender:
EduLevel:
Notes:
Photo:
IsAuth:

註冊會員
帳號：
密碼：
密碼確認：	<%-- --%>
姓名：
生日：
E-mail：
性別：
學歷：
照片：
備註：

編輯新增

帳號：	<%# Eval("Account") %>	密碼：	＊＊＊＊＊＊＊
姓名：	<%# Eval("Name") %>	生日：	<%# Eval("Birthday","{0:d}") %>
性別：	<%# Eval("sex") %>	教育程度：	<%# Eval("EduName") %>
E-mail：	<%# Eval("Email") %>
備住：	<%# Eval("Notes") %>

``` ### 最後後端 ``` using System; using System.Collections.Generic; using System.Configuration; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ASPnet { public partial class _36FormView : System.Web.UI.Page { SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); protected void Page_Load(object sender, EventArgs e) { } protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) { SqlCommand Cmd = new SqlCommand("select dbo.fnCheckMemberAccount(@account)", Conn); //Cmd.Parameters.AddWithValue("@account", txtAccount.Text); SqlDataReader rd; Conn.Open(); rd = Cmd.ExecuteReader(); rd.Read(); if (rd[0].ToString() == "0") args.IsValid = true; else args.IsValid = false; Conn.Close(); } protected void FormView1_ModeChanged(object sender, EventArgs e) { if (FormView1.CurrentMode == FormViewMode.Insert) { SqlCommand Cmd = new SqlCommand("select * from Edu order by EduLevel_Code desc", Conn); DropDownList ddlEduLevel=(DropDownList)FormView1.FindControl("ddlEduLevel"); SqlDataReader rd; Conn.Open(); rd = Cmd.ExecuteReader(); ListItem item; while (rd.Read()) { item = new ListItem(rd["EduLevel"].ToString(), rd["EduLevel_Code"].ToString()); ddlEduLevel.Items.Add(item); } Conn.Close(); } } } } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201904/2019-0402.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.