> For the complete documentation index, see [llms.txt](https://johch3n611u.gitbook.io/c50108/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201903/2019-0328-jq.md). # 2019/0328/jQuery選擇器應用\&Ajax導讀+應用\&asp.net串sserver\_註冊帳號功能 [jQuer](https://jquery.com/)y為javascript的函式庫只是有名 JQ 其實就是 選擇器+方法 ## 選擇器概念重談 ### 1.階層樹狀父子繼承概念 DIV會繼承 SPAN不繼承 精緻度高的會吃掉精緻度低 越子輩會蓋過父輩 ```

JavaScript

jQuery

HTML

yyyyyy

CSS3

ASP.net

 PHP

SQL Server

yyyyy

``` ### DOM數概念 有時只有清單有id內容是動態的不會有id必須知道是那一階層的第幾個 #### 題外話:現在為何函式庫會放在body底層? 有時函式庫等等的寫在head會造成有些網路不好的使用者已為當掉了其實在載入，放在底層至少會先顯示文本。 #### 題外話:函式庫為何要放在\ ``` 所有的li 文本內容有sp的 #### 題外話: vb tsql 沒有分大小寫 其他程式語言大小寫都是有差別的 li底下a屬性href的值 \* 整串裡面包含o的 li底下a屬性href的值 ^ 開頭裡面包含o的 li底下a屬性href的值 $ 結尾裡面包含o的 ### 既有結點上 DOM操作 JQ 的 text( ) 等於 JS 的 innerText 動數的頁節點都是固定的必須打在正確的節點 不然瀏覽器不會幫你翻譯 ``` ``` JQ 的 html( ) 等於 JS 的 innerHTML apend ( ) 只在這個物件附加上去 ( 一定在集合的最後一個 after ( ) 只在這個物件之後 $('#container+h1')同輩的所有的h1 ```

444444

333333333

``` ### 前端效果套用在後端物件上 28為後端因為要鏈結資料庫 終究編譯完為html 只是不乾淨的 1.為何每次都要在form底下第一個div做事? 原因為要把div當作webform頁面的根取代body 2.可以直接操控後端id 3.其實後端下的style前端也會編譯成相對應css 所以可以根據html樹根概念去調整控制項物件style 讀取順位: 標籤上style tag > link stylesheet > html 內 style tag ``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="28GridView.aspx.cs" Inherits="MyWeb._28GridView" %>
``` ## 點擊切換頁面主題功能 問題:為什麼切換到後面會沒辦法切前面? 原因是必須清除原來class內容不然只會顯示head style最下面的style 也有可能是扛拜問題f5 ? ``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="28GridView.aspx.cs" Inherits="MyWeb._28GridView" %>
　 　 　 　 　

``` 利用屬性內的值去做顏色切換 ( 這裡是用span的id #### 題外話 : 後端 void 為沒有回傳值 一定會有個事件傳進去 e 就是這個事件的名字 抓到id值就先去除class裡面東西 然後 將id值的style 置入 ## Ajax 應用 {% embed url="" %} 網址google的api 要錢的 沒有只能試用 世界上的書都給你查詢 撈出來的資料為 jason 以前都是SOAP=>XML 現在都是Restful=>Json跟XML 好像都可以 ? jason資料相對於 xml好讀 沒付費只能接到十筆 ### 題外話: 前端程式如果要用後端的話是不是要寫在後端? 後端可以直接寫前端，後端能直接透過API鏈結資料庫 還是寫後端程式 但是後端沒有UI 所以直接 把UI 變成 API 就可以不用管前端是連在哪 那沒UI那怎辦呢 ? 前端只要知道 api的url在哪裡 直接寫在前端 APP or .... 做顯示 ## Ajax導讀 學前端如果不會ajax=不會前端 1.呼叫ajax方法 2.確定溝通方式type 3.確定位址url 4.透過這個api向位址內的伺服器做溝通 成功了做 success ( ajax 不會postback所以要觸法某些事情讓我們知道成功或失敗 ) 5.顯示回傳的資料 但是幾筆資料不知道所以用迴圈跑 6.不知道要跑幾圈 利用回傳回來的物件(這邊是data自己取的) data.items.length 就是有幾筆 7.每次回圈要做啥事呢?1.把每次回圈的資料丟在item裡面2.將item裡面東西分門別類擺好 8.就算內容是api也直接分類進去因為你直接在url輸入api其實也會顯示內容( 此處為一張圖 9.失敗的話 error 顯示錯誤 10.要分清楚button function 還是 ajax function #### 題外話 : 圖也是api 他不讓你知道他的圖的位置 第三方 Third party - open data ``` 書名：
``` ![](/files/-Lb1VYNtRhI-n-p3uGhD) ![](/files/-Lb1VqbQ0434l0RcxcJD) #### 接續上一次後端課程 datalist 無法分頁 gridview 無法新增 每個物件都有當初編譯它的作者制定的一個侷限值 就像 牛仔褲 可以改短 但改短了不能改長 七龍珠許願了就消失 之類的 #### 接下來要講的是 ## 33member\_registeration 15webform\_validation 註冊驗證器 改寫增加 會員註冊功能 33member\_registeration 實做圖檔案不是檔名存進資料庫 Mysystem 資料庫 dbo.members表單 增加判斷帳號是否重複 ### 首先確認SServer Mysystem 資料庫 dbo.members表單 啥要增加啥要減少 #### 如果不讓你儲存 ( 更動既有資料 工具 -> 選項 -> 設計師 -> 取消 -> 防止儲存需要資料表重建的變更 增加照片檔案存檔欄位 ok後 回到 asp.net 修改 15webform\_validation 減少一些以往 自動控制項的欄位 與一些驗證器控制項 前端增加照片上傳控制項 #### 前端改完 ``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="33Member_Registeration.aspx.cs" Inherits="ASPnet._33Member_Registeration" %>
註冊會員
帳號：
密碼：
密碼確認： <%-- --%>
姓名：
生日：
E-mail：
性別：
學歷：
照片：
備註：
``` #### 題外話: 程式進入點 程式寫了很多功能 一開始總是要執行阿 所以會有個 main 網頁的生命週期跟一般程式的週期不太一樣 page\_load 只是相對的起始點 其實前面還有很多 pre init > page init > page load > pre roader ... #### 換後端 ### 剛剛把前端學歷給刪了所以現在要補上學歷選擇 sqlconnection 建構資料庫物件 抓資料庫資料放進去 啟動configuration管理員 抓哪一個 抓啥資料 sqlcommand 要對sqlserver下啥指令 sqldatareader 要閱覽啥資料 conn.open 下指令 資料庫開啟 執行資料閱覽 rd = Cmd.ExecuteReader() 在前端寫死一個 listitem 請選擇 後端判斷 要不是請選擇才是必填 後端建構一個 listitem 物件 利用迴圈將每一次閱覽控制器去讀取學歷有哪些 並加入倒 listitem 的物件中 資料庫關閉 ``` protected void Page_Load(object sender, EventArgs e) { //SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); SqlCommand Cmd = new SqlCommand("select * from Edu order by EduLevel_Code desc",Conn); 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(); } ``` ### 要將資料存入資料庫 ``` SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); ``` 區域變數 所以必須要再寫一次 鏈結資料庫 所以學聰明 寫在最外層 資訊安全風險 sql injection 資料隱碼攻擊 製作登入系統時實做給大家看 ( 不用帳號密碼 只要把 sql 跟程式變數串一起寫就會有 si 所以要換成 參數 改成純量變數 為什麼串在一起寫會有問題? 因為 駭客 可以在 note 輸入框直接輸入命令式 sqlcommand 要對sqlserver下啥指令 要利用 parameters 參數控件 將 參數與資料串起來 除了照片檔案其他資料之前都寫過驗證器了所以要補上 @photo 是要存照片檔案內容 不是檔名 所以資料型態要用 filebytes ### 資料寫入資料庫 資料庫開啟 執行executenonquery 執行上述的指令 -> sqlcommand 要對sqlserver下啥指令 資料庫關閉 ``` protected void Button1_Click(object sender, EventArgs e) { SqlCommand Cmd = new SqlCommand("insert into members values(@account,hashbytes('sha2_256',@pwd),@name,@birthday,@email,@gender,@edu,@note,@photo)", Conn); Cmd.Parameters.AddWithValue("@account",txtAccount.Text); Cmd.Parameters.AddWithValue("@pwd", txtPwd.Text); Cmd.Parameters.AddWithValue("@name", txtName.Text); Cmd.Parameters.AddWithValue("@birthday", txtBirthday.Text); Cmd.Parameters.AddWithValue("@email", txtEmail.Text); Cmd.Parameters.AddWithValue("@gender", rblGender.SelectedValue); Cmd.Parameters.AddWithValue("@edu", ddlEduLevel.SelectedValue); Cmd.Parameters.AddWithValue("@note", txtNote.Text); Cmd.Parameters.AddWithValue("@photo", fulPhoto.FileBytes); Conn.Open(); Cmd.ExecuteNonQuery(); Conn.Close(); } ``` ### 細節修正 1.怕user key錯資料 2.密碼不能是明碼 -> 雜湊即可 -> 雜湊函數 hashbytes ('雜湊成什麼格式',明碼 ) -> hashbytes ('sha2\_256',@pwd ) 3.為了不讓user看見錯誤訊息或是例外訊息(sserver出錯) #### 需要下以下 ``` catch (Exception ex) { Response.Write(ex.Message); } ``` ### 照片資料驗證器 最外層直接驗證上傳資料 (裡面有上傳資料需求的只有照片所以可以key在外層) 在前端放個lable 模仿驗證器出錯實顯示樣態 ``` ``` 如果驗證成功則可上傳 else 如果不成功則照片驗證器lable顯示錯誤 #### 後端 ``` SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); protected void Page_Load(object sender, EventArgs e) { //SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); SqlCommand Cmd = new SqlCommand("select * from Edu order by EduLevel_Code desc",Conn); 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(); } protected void Button1_Click(object sender, EventArgs e) { if (fulPhoto.PostedFile.ContentType == "image/jpeg") { try { SqlCommand Cmd = new SqlCommand("insert into members values(@account,hashbytes('sha2_256',@pwd),@name,@birthday,@email,@gender,@edu,@note,@photo)", Conn); Cmd.Parameters.AddWithValue("@account", txtAccount.Text); Cmd.Parameters.AddWithValue("@pwd", txtPwd.Text); Cmd.Parameters.AddWithValue("@name", txtName.Text); Cmd.Parameters.AddWithValue("@birthday", txtBirthday.Text); Cmd.Parameters.AddWithValue("@email", txtEmail.Text); Cmd.Parameters.AddWithValue("@gender", rblGender.SelectedValue); Cmd.Parameters.AddWithValue("@edu", ddlEduLevel.SelectedValue); Cmd.Parameters.AddWithValue("@note", txtNote.Text); Cmd.Parameters.AddWithValue("@photo", fulPhoto.FileBytes); Conn.Open(); Cmd.ExecuteNonQuery(); Conn.Close(); } catch (Exception ex) { Response.Write(ex.Message); } } else { lblPhoto.Text = "照片格式錯誤!"; } } ``` #### 小問題: postback 造成 學歷欄重複增加 item #### ( 但通常實務上會轉頁面而不是 postback ( 所以可以下指令只有第一次才會執行 #### ( postback 時並不會執行 ``` if (!IsPostBack) {程式} ``` 如果不是Postback則執行程式 ### 儲存資料後導入17頁17GridView\_datasource.aspx ``` Response.Redirect("17GridView_datasource.aspx") ``` #### 此時的前端 ``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="33Member_Registeration.aspx.cs" Inherits="ASPnet._33Member_Registeration" %>
註冊會員
帳號：
密碼：
密碼確認： <%-- --%>
姓名：
生日：
E-mail：
性別：
學歷：
照片：
備註：
``` #### 此時的後端 ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Configuration; namespace ASPnet { public partial class _33Member_Registeration : System.Web.UI.Page { SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); SqlCommand Cmd = new SqlCommand("select * from Edu order by EduLevel_Code desc", Conn); 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(); } } protected void Button1_Click(object sender, EventArgs e) { if (fulPhoto.PostedFile.ContentType == "image/jpeg") { try { SqlCommand Cmd = new SqlCommand("insert into members values(@account,hashbytes('sha2_256',@pwd),@name,@birthday,@email,@gender,@edu,@note,@photo)", Conn); Cmd.Parameters.AddWithValue("@account", txtAccount.Text); Cmd.Parameters.AddWithValue("@pwd", txtPwd.Text); Cmd.Parameters.AddWithValue("@name", txtName.Text); Cmd.Parameters.AddWithValue("@birthday", txtBirthday.Text); Cmd.Parameters.AddWithValue("@email", txtEmail.Text); Cmd.Parameters.AddWithValue("@gender", rblGender.SelectedValue); Cmd.Parameters.AddWithValue("@edu", ddlEduLevel.SelectedValue); Cmd.Parameters.AddWithValue("@note", txtNote.Text); Cmd.Parameters.AddWithValue("@photo", fulPhoto.FileBytes); Conn.Open(); Cmd.ExecuteNonQuery(); Conn.Close(); Response.Redirect("17GridView_DataSource.aspx"); } catch (Exception ex) { Response.Write(ex.Message); } } else { lblPhoto.Text = "照片格式錯誤!"; } } } } ``` #### 小問題: fulPhoto.FileBytes 沒有抓到東西 為 空 ， #### 存不會有問題但在讀資料時會出現問題 ， #### 沒有傳資料時 ContentType 裡面預設為 application / octet - stream 。 沒傳資料時 不要直接抓 FileBytes ，判斷式直接寫在 資料轉參數 這 ， 判斷空時 傳空值null進資料庫端。 #### ( 大改版 因為老師一開始沒釐清邏輯所以直接先由存資料至後端開始編寫 到這有點亂了他開始改 #### 後端為以下 ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Configuration; namespace ASPnet { public partial class _33Member_Registeration : System.Web.UI.Page { SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); SqlCommand Cmd = new SqlCommand("select * from Edu order by EduLevel_Code desc", Conn); 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(); } } protected void Button1_Click(object sender, EventArgs e) { //if (fulPhoto.PostedFile.ContentType != "application/octet-stream") //{ // if (fulPhoto.PostedFile.ContentType == "image/jpeg") // { try { SqlCommand Cmd = new SqlCommand("insert into members values(@account,hashbytes('sha2_256',@pwd),@name,@birthday,@email,@gender,@edu,@note,@photo)", Conn); Cmd.Parameters.AddWithValue("@account", txtAccount.Text); Cmd.Parameters.AddWithValue("@pwd", txtPwd.Text); Cmd.Parameters.AddWithValue("@name", txtName.Text); Cmd.Parameters.AddWithValue("@birthday", txtBirthday.Text); Cmd.Parameters.AddWithValue("@email", txtEmail.Text); Cmd.Parameters.AddWithValue("@gender", rblGender.SelectedValue); Cmd.Parameters.AddWithValue("@edu", ddlEduLevel.SelectedValue); Cmd.Parameters.AddWithValue("@note", txtNote.Text); if(fulPhoto.PostedFile.ContentType == "application/octet-stream") Cmd.Parameters.AddWithValue("@photo", null); else Cmd.Parameters.AddWithValue("@photo", fulPhoto.FileBytes); Conn.Open(); if (fulPhoto.PostedFile.ContentType == "image/jpeg") Cmd.ExecuteNonQuery(); else lblPhoto.Text = "格式有錯!!"; Conn.Close(); Response.Redirect("17GridView_DataSource.aspx"); } catch (Exception ex) { Response.Write(ex.Message); } // } // else // { // lblPhoto.Text = fulPhoto.PostedFile.ContentType; // } //} } } } ``` #### 小問題: 帳號重複結果跳 pk重複 。 改為放在 try catch 裡面。 將判斷帳號是否重複寫成一個函數，兩種方式， 一種在資料庫端、一種在後端，但後端必須撈資料再判斷，所以乾脆直接寫在 資料庫端。 參數資料類型必須要一樣 ``` create function fnCheckMemberAccount (@account varchar(10)) returns int as begin declare @aa varchar(10) --函數不是預存程序，所以不允許直接寫結果，執行完不能是表只能是值 select @aa=account from Members where account=@account if @@ROWCOUNT=0 --表示沒找筆數代表資料可用 return 0 --回傳false return 1 end ---- select dbo.fnCheckMemberAccount('bow') ``` #### 回到前端新增驗證器顯示帳號重複 後端不用寫邏輯只需要呼叫sqlserver函數 將參數改為變數傳回前端驗證控制器即可 ``` 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(); } ``` #### 小問題: 照片上傳出現postback重複 ( 邏輯不對 用上面教的方式可以解決 ### 增加功能帳號檢測按鈕 #### ( 只會啟動帳號可用性判斷 ( 利用驗證群組名稱控制某個群組內的控制項被觸發 增加 if (this.IsValid) 實際上實務的問題會有很多事情需要一步步考量 ### 問題:postback清空 #### 只要點擊檢查帳號可用性或是之前興趣按鈕 按下去都會postback清空其他輸入框 造成內容消失。 解決辦法 : 局部更新 -> 進階應用 每xx秒重複刷 -> 利用前端ajax -> webfroms 可以直接用控制項寫ajax ajax能夠在不postback的情況下能夠更新伺服器資料->其實很多故事(微軟)-> 在前端使用工具箱AJAX擴充功能->ScriptManager前端函式庫->要局部更新的地方放在updatepanel控制項的contenttemplate屬性裡面->這個區塊就可以自己跟伺服器做reqrit跟respabns #### 最後前端程式碼 ``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="33Member_Registeration.aspx.cs" Inherits="ASPnet._33Member_Registeration" %>
註冊會員
帳號：
密碼：
密碼確認： <%-- --%>
姓名：
生日：
E-mail：
性別：
學歷：
照片：
備註：
``` #### 最後後端程式碼 ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Configuration; namespace ASPnet { public partial class _33Member_Registeration : System.Web.UI.Page { SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString); SqlCommand Cmd = new SqlCommand("select * from Edu order by EduLevel_Code desc", Conn); 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(); } } protected void Button1_Click(object sender, EventArgs e) { if (this.IsValid) { if (fulPhoto.PostedFile.ContentType != "application/octet-stream" && fulPhoto.PostedFile.ContentType == "image/jpeg") { try { lblPhoto.Text = ""; SqlCommand Cmd = new SqlCommand("insert into members values(@account,hashbytes('sha2_256',@pwd),@name,@birthday,@email,@gender,@edu,@note,@photo)", Conn); Cmd.Parameters.AddWithValue("@account", txtAccount.Text); Cmd.Parameters.AddWithValue("@pwd", txtPwd.Text); Cmd.Parameters.AddWithValue("@name", txtName.Text); Cmd.Parameters.AddWithValue("@birthday", txtBirthday.Text); Cmd.Parameters.AddWithValue("@email", txtEmail.Text); Cmd.Parameters.AddWithValue("@gender", rblGender.SelectedValue); Cmd.Parameters.AddWithValue("@edu", ddlEduLevel.SelectedValue); Cmd.Parameters.AddWithValue("@note", txtNote.Text); if (fulPhoto.PostedFile.ContentType == "application/octet-stream") Cmd.Parameters.AddWithValue("@photo", null); else Cmd.Parameters.AddWithValue("@photo", fulPhoto.FileBytes); Conn.Open(); Cmd.ExecuteNonQuery(); Conn.Close(); //Response.Redirect("17GridView_DataSource.aspx"); } catch (Exception ex) { Response.Write(ex.Message); } } else lblPhoto.Text = "格式有錯!!"; } } 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(); } } } //create function fnCheckMemberAccount // (@account varchar(10)) // returns int //as //begin // declare @aa varchar(10) // select @aa = account from Members where account = @account // if @@ROWCOUNT=0 // return 0 // return 1 //end ``` #### 下集帶續 寄驗證碼 送認證信