C50108
Search…
2019/0328/jQuery選擇器應用&Ajax導讀+應用&asp.net串sserver_註冊帳號功能
jQuery為javascript的函式庫只是有名
JQ 其實就是 選擇器+方法

DIV會繼承 SPAN不繼承
精緻度高的會吃掉精緻度低
越子輩會蓋過父輩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
color:red;
}
div p{
color: green;
}
div>p {
color: blue;
}
div + p {
color:yellow;
}
</style>
</head>
<body>
<div>
<p>JavaScript</p>
</div>
<span>
jQuery
</span>
<span>
<p>HTML</p>
</span>
<p>
yyyyyy
</p>
<div>
<p>CSS3</p>
<b><p>ASP.net</p></b>
<span>PHP</span>
<span>
<p>SQL Server</p>
</span>
</div>
<p>
yyyyy
</p>
</body>
</html>

有時只有清單有id內容是動態的不會有id必須知道是那一階層的第幾個

有時函式庫等等的寫在head會造成有些網路不好的使用者已為當掉了其實在載入,放在底層至少會先顯示文本。

因為函式庫載了才能用函式阿...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.line{
border:1px solid;
}
</style>
</head>
<body>
<ol id="list">
<li>JavaScript程式設計</li>
<li>jQuery程式設計</li>
<li>ASP.net程式設計</li>
<li>PHP程式設計</li>
<li>JSP程式設計</li>
<li>ASP3.0程式設計</li>
<li>Dreamweaver網頁設計</li>
<li><a href="tw.yahoo.com">Yahoo!奇摩</a></li>
<li><a href="http://www.google.com.tw">Google</a></li>
<li><a href="http://kpptr.wda.gov.tw">高屏澎東分署</a></li>
</ol>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
//$('#list li').addClass('line');
//$('#list li:contains("SP")').addClass('line');
//$('#list li>a[href*="o"]').addClass('line');
$('#list li>a[href$="tw"]').addClass('line');
//$('#list li>a[href^="tw"]').addClass('line');
</script>
</body>
</html>
所有的li
文本內容有sp的

li底下a屬性href的值 * 整串裡面包含o的
li底下a屬性href的值 ^ 開頭裡面包含o的
li底下a屬性href的值 $ 結尾裡面包含o的

JQ 的 text( ) 等於 JS 的 innerText
動數的頁節點都是固定的必須打在正確的節點 不然瀏覽器不會幫你翻譯
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#container').text('<h2>1111111111</h2>');
$('#container').html('<h2>1111111111</h2>');
</script>
JQ 的 html( ) 等於 JS 的 innerHTML
apend ( ) 只在這個物件附加上去 ( 一定在集合的最後一個
after ( ) 只在這個物件之後
$('#container+h1')同輩的所有的h1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>
444444
</h1>
<div id="container">
</div>
<h1>
333333333
</h1>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
//$('#container').text('<h2>1111111111</h2>');
//$('#container').html('<h2>1111111111</h2>');
$('#container').text('<h2>1111111111</h2>').html('<h2>1111111111</h2>').append('<h2>8888888</h2>');
$('#container').after('<h2>77777777</h2>')
$('#container+h1').after('<h2>5555555555555</h2>')
</script>
</body>
</html>

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" %>
<!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>
#GridView1{
width:90%;
margin:auto;
border:0;
}
#GridView1 td, #GridView1 th{
border:0;
}
#GridView1 th{
border-bottom:5px double black;
background-color:#808080;
color:white;
}
#GridView1 td{
height:30px;
}
#GridView1 tr:hover{
background-color:beige;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="containter">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MySystemConnectionString %>" SelectCommand="SELECT * FROM [Members]"></asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"></asp:GridView>
</div>
</form>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
</script>
</body>
</html>

問題:為什麼切換到後面會沒辦法切前面?
原因是必須清除原來class內容不然只會顯示head style最下面的style
也有可能是扛拜問題f5 ?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="28GridView.aspx.cs" Inherits="MyWeb._28GridView" %>
<!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>
#GridView1{
width:90%;
margin:auto;
border:0;
}
#GridView1 td, #GridView1 th{
border:0;
}
#GridView1 th{
border-bottom:5px double black;
background-color:#808080;
color:white;
}
#GridView1 td{
height:30px;
}
#GridView1 tr:hover{
background-color:beige;
}
#btn span{
border:1px solid;
cursor:pointer;
}
#pink{
background-color:pink;
}
#yellow{
background-color:lemonchiffon;
}
#blue{
background-color:lightblue;
}
#orange{
background-color:#ffc26c;
}
#green{
background-color:#c0ff89;
}
.pink{
background-color:pink;
}
.yellow{
background-color:lemonchiffon;
}
.blue{
background-color:lightblue;
}
.orange{
background-color:#ffc26c;
}
.green{
background-color:#c0ff89;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="btn">
<span id="pink"> </span>
<span id="yellow"> </span>
<span id="blue"> </span>
<span id="orange"> </span>
<span id="green"> </span>
</div>
<br />
<div id="containter">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MySystemConnectionString %>" SelectCommand="SELECT * FROM [Members]"></asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"></asp:GridView>
</div>
</form>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
//$('#pink').click(function () {
// //$('#GridView1 tr:nth-child(2n+1)').css({'background-color':'pink'});
// $('#GridView1 tr:nth-child(2n+1)').removeClass().addClass('pink');
//});
//$('#yellow').click(function () {
// $('#GridView1 tr:nth-child(2n+1)').removeClass().addClass('yellow');
//});
//$('#blue').click(function () {
// $('#GridView1 tr:nth-child(2n+1)').removeClass().addClass('blue');
//});
//////////////////////////////////
$('#btn span').click(function (evt) {
var id=evt.target.id
$('#GridView1 tr:nth-child(2n+1)').removeClass().addClass(id);
});
</script>
</body>
</html>
利用屬性內的值去做顏色切換 ( 這裡是用span的id

抓到id值就先去除class裡面東西 然後 將id值的style 置入

ajax - Google Search
Google
網址google的api 要錢的 沒有只能試用
世界上的書都給你查詢
撈出來的資料為 jason
以前都是SOAP=>XML 現在都是Restful=>Json跟XML 好像都可以 ? jason資料相對於 xml好讀
沒付費只能接到十筆

後端可以直接寫前端,後端能直接透過API鏈結資料庫
還是寫後端程式 但是後端沒有UI 所以直接 把UI 變成 API 就可以不用管前端是連在哪 那沒UI那怎辦呢 ? 前端只要知道 api的url在哪裡 直接寫在前端 APP or .... 做顯示

學前端如果不會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

第三方 Third party - open data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#booklist {
width: 1000px;
border: double 2px;
margin: auto;
}
#booklist tr {
border-bottom: solid 2px;
}
#booklist > tbody tr:nth-child(2n+1) {
background-color: #c6c6c6;
}
#booklist > tbody tr:hover {
background-color: black;
color: white;
}
</style>
</head>
<body>
書名:<input id="Text1" type="text" /><input id="Button1" type="button" value="搜尋" />
<table id="booklist">
</table>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#Button1').click(function () {
var bkurl = "https://www.googleapis.com/books/v1/volumes?q=" + $('#Text1').val();
$.ajax({
type: 'GET',
url: bkurl,
success: function (data) {
$('#booklist').append('<thead><th>圖示</th><th>書名</th><th>作者</th><th>出版商</th></thead>');
$('#booklist').append('<tbody>');
for (var i = 0; i < data.items.length; i++)
{
var item = data.items[i];
var tr = "<tr>";
tr += "<td><img src='" + item.volumeInfo.imageLinks.smallThumbnail + "' /></td>";
tr += "<td>" + item.volumeInfo.title + "</td>";
tr += "<td>" + item.volumeInfo.authors + "</td>";
tr += "<td>" + item.volumeInfo.publisher + "</td>";
tr += "</tr>";
$('#booklist').append(tr);
}
$('#booklist').append('</tbody>');
},
error: function () {
alert('Error!!');
}
});
});
</script>
</body>
</html>

datalist 無法分頁 gridview 無法新增
每個物件都有當初編譯它的作者制定的一個侷限值
就像 牛仔褲 可以改短 但改短了不能改長 七龍珠許願了就消失 之類的

15webform_validation 註冊驗證器 改寫增加 會員註冊功能 33member_registeration
實做圖檔案不是檔名存進資料庫
Mysystem 資料庫 dbo.members表單 增加判斷帳號是否重複

工具 -> 選項 -> 設計師 -> 取消 -> 防止儲存需要資料表重建的變更
增加照片檔案存檔欄位 ok後
回到 asp.net
修改 15webform_validation 減少一些以往 自動控制項的欄位 與一些驗證器控制項
前端增加照片上傳控制項

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="33Member_Registeration.aspx.cs" Inherits="ASPnet._33Member_Registeration" %>
<!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>
#tbMember {
width: 450px;
height: 500px;
margin: auto;
border:3px double;
}
#tbMember table {
width: 100%;
}
#tbMember>tbody>tr>td:first-child {
text-align: right;
}
#tbMember>tbody>tr:last-child > td {
text-align: center;
}
#tbMember table>tbody>tr>td {
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tbMember">
<caption>註冊會員</caption>
<tr>
<td>帳號:</td>
<td>
<asp:TextBox ID="txtAccount" runat="server" placeholder="5-10碼"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtAccount" Display="Dynamic" runat="server" ErrorMessage="姓名為必填欄位" Text="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtAccount" ValidationExpression="[A-Za-z][A-Za-z0-9]{4,9}" runat="server" ErrorMessage="(格式有誤)" ForeColor="Red" Font-Size="10pt"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder="8-12碼" MaxLength="12"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" Display="Dynamic" ControlToValidate="txtPwd" runat="server" ErrorMessage="密碼為必填欄位" Text="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" ControlToValidate="txtPwd" ValidationExpression="\S{8,12}" runat="server" ErrorMessage="(密碼不可含有空白)" ForeColor="Red" Font-Size="10pt"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>密碼確認:</td>
<td>
<asp:TextBox ID="txtPwd2" runat="server" TextMode="Password" placeholder="請再輸入一次密碼"></asp:TextBox>
<%-- <asp:RequiredFieldValidator ID="RequiredFieldValidator6" ControlToValidate="txtPwd2" runat="server" ErrorMessage="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>--%>
<asp:CompareValidator ID="CompareValidator3" runat="server" Operator="Equal" ControlToCompare="txtPwd2" ControlToValidate="txtPwd" ErrorMessage="(兩次密碼輸入不相同)" ForeColor="Red" Font-Size="10pt"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" ControlToValidate="txtName" runat="server" ErrorMessage="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>生日:</td>
<td>
<asp:TextBox ID="txtBirthday" runat="server" placeholder="1990-01-12"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" ControlToValidate="txtBirthday" Display="Dynamic" runat="server" ErrorMessage="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator1" Display="Dynamic" runat="server" Operator="DataTypeCheck" Type="Date" ControlToValidate="txtBirthday" ErrorMessage="(格式錯誤)" ForeColor="Red" Font-Size="10pt"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" placeholder="[email protected]"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" ControlToValidate="txtEmail" ValidationExpression="([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)" runat="server" ErrorMessage="(格式有誤)" ForeColor="Red" Font-Size="10pt"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>性別:</td>
<td>
<asp:RadioButtonList ID="rblGender" runat="server" RepeatDirection="Horizontal" Width="120">
<asp:ListItem Text="男" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="女" Value="0"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td>學歷:</td>
<td>
<asp:DropDownList ID="ddlEduLevel" runat="server">
<asp:ListItem Text="請選擇"></asp:ListItem>
</asp:DropDownList>
<asp:CompareValidator ID="CompareValidator2" runat="server" Operator="NotEqual" ValueToCompare="請選擇" ControlToValidate="ddlEduLevel" ErrorMessage="(請選擇)" ForeColor="Red" Font-Size="10pt"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>照片:</td>
<td>
<asp:FileUpload ID="fulPhoto" runat="server" />
</td>
</tr>
<tr>
<td>備註:</td>
<td>
<asp:TextBox ID="txtNote" TextMode="MultiLine" runat="server" Width="200" Height="150"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="Button1" runat="server" Text="加入會員" OnClick="Button1_Click" />
<input id="Reset1" type="reset" value="重設" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

程式進入點 程式寫了很多功能 一開始總是要執行阿 所以會有個 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 模仿驗證器出錯實顯示樣態
<asp:Label ID="lblPhoto" Font-Size="10pt" ForeColor="Red" runat="server"></asp:Label>
如果驗證成功則可上傳
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 = "照片格式錯誤!";
}
}

if (!IsPostBack) {程式}
如果不是Postback則執行程式

Response.Redirect("17GridView_datasource.aspx")

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="33Member_Registeration.aspx.cs" Inherits="ASPnet._33Member_Registeration" %>
<!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>
#tbMember {
width: 450px;
height: 500px;
margin: auto;
border:3px double;
}
#tbMember table {
width: 100%;
}
#tbMember>tbody>tr>td:first-child {
text-align: right;
}
#tbMember>tbody>tr:last-child > td {
text-align: center;
}
#tbMember table>tbody>tr>td {
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tbMember">
<caption>註冊會員</caption>
<tr>
<td>帳號:</td>
<td>
<asp:TextBox ID="txtAccount" runat="server" placeholder="5-10碼"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtAccount" Display="Dynamic" runat="server" ErrorMessage="姓名為必填欄位" Text="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtAccount" ValidationExpression="[A-Za-z][A-Za-z0-9]{4,9}" runat="server" ErrorMessage="(格式有誤)" ForeColor="Red" Font-Size="10pt"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder="8-12碼" MaxLength="12"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" Display="Dynamic" ControlToValidate="txtPwd" runat="server" ErrorMessage="密碼為必填欄位" Text="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" ControlToValidate="txtPwd" ValidationExpression="\S{8,12}" runat="server" ErrorMessage="(密碼不可含有空白)" ForeColor="Red" Font-Size="10pt"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>密碼確認:</td>
<td>
<asp:TextBox ID="txtPwd2" runat="server" TextMode="Password" placeholder="請再輸入一次密碼"></asp:TextBox>
<%-- <asp:RequiredFieldValidator ID="RequiredFieldValidator6" ControlToValidate="txtPwd2" runat="server" ErrorMessage="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>--%>
<asp:CompareValidator ID="CompareValidator3" runat="server" Operator="Equal" ControlToCompare="txtPwd2" ControlToValidate="txtPwd" ErrorMessage="(兩次密碼輸入不相同)" ForeColor="Red" Font-Size="10pt"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" ControlToValidate="txtName" runat="server" ErrorMessage="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>生日:</td>
<td>
<asp:TextBox ID="txtBirthday" runat="server" placeholder="1990-01-12"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" ControlToValidate="txtBirthday" Display="Dynamic" runat="server" ErrorMessage="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator1" Display="Dynamic" runat="server" Operator="DataTypeCheck" Type="Date" ControlToValidate="txtBirthday" ErrorMessage="(格式錯誤)" ForeColor="Red" Font-Size="10pt"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" placeholder="[email protected]"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" ControlToValidate="txtEmail" ValidationExpression="([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)" runat="server" ErrorMessage="(格式有誤)" ForeColor="Red" Font-Size="10pt"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>性別:</td>
<td>
<asp:RadioButtonList ID="rblGender" runat="server" RepeatDirection="Horizontal" Width="120">
<asp:ListItem Text="男" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="女" Value="0"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td>學歷:</td>
<td>
<asp:DropDownList ID="ddlEduLevel" runat="server">
<asp:ListItem Text="請選擇"></asp:ListItem>
</asp:DropDownList>
<asp:CompareValidator ID="CompareValidator2" runat="server" Operator="NotEqual" ValueToCompare="請選擇" ControlToValidate="ddlEduLevel" ErrorMessage="(請選擇)" ForeColor="Red" Font-Size="10pt"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>照片:</td>
<td>
<asp:FileUpload ID="fulPhoto" runat="server" /><asp:Label ID="lblPhoto" Font-Size="10pt" ForeColor="Red" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>備註:</td>
<td>
<asp:TextBox ID="txtNote" TextMode="MultiLine" runat="server" Width="200" Height="150"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="Button1" runat="server" Text="加入會員" OnClick="Button1_Click" />
<input id="Reset1" type="reset" value="重設" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

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 = "照片格式錯誤!";
}
}
}
}

沒傳資料時 不要直接抓 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;
// }
//}
}
}
}

將判斷帳號是否重複寫成一個函數,兩種方式,
一種在資料庫端、一種在後端,但後端必須撈資料再判斷,所以乾脆直接寫在 資料庫端。
參數資料類型必須要一樣
create function fnCheckMemberAccount
(@account varchar(10))
returns int
as
begin
declare @aa varchar(10)
--函數不是預存程序,所以不允許直接寫結果,執行完不能是表只能是值
select @aa=account from Members where [email protected]
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();
}

增加 if (this.IsValid)
實際上實務的問題會有很多事情需要一步步考量

解決辦法 : 局部更新 -> 進階應用 每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" %>
<!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>
#tbMember {
width: 450px;
height: 500px;
margin: auto;
border:3px double;
}
#tbMember table {
width: 100%;
}
#tbMember>tbody>tr>td:first-child {
text-align: right;
}
#tbMember>tbody>tr:last-child > td {
text-align: center;
}
#tbMember table>tbody>tr>td {
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<table id="tbMember">
<caption>註冊會員</caption>
<tr>
<td>帳號:</td>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtAccount" runat="server" placeholder="5-10碼"></asp:TextBox><asp:Button ID="Button2" runat="server" Text="檢查帳號可用性" ValidationGroup="abc123" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtAccount" Display="Dynamic" runat="server" ErrorMessage="姓名為必填欄位" Text="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtAccount" Display="Dynamic" ValidationExpression="[A-Za-z][A-Za-z0-9]{4,9}" runat="server" ErrorMessage="(格式有誤)" ForeColor="Red" Font-Size="10pt"></asp:RegularExpressionValidator>
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="(帳號重複)" ForeColor="Red" Font-Size="10pt" ValidationGroup="abc123" OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder="8-12碼" MaxLength="12"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" Display="Dynamic" ControlToValidate="txtPwd" runat="server" ErrorMessage="密碼為必填欄位" Text="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" ControlToValidate="txtPwd" ValidationExpression="\S{8,12}" runat="server" ErrorMessage="(密碼不可含有空白)" ForeColor="Red" Font-Size="10pt"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>密碼確認:</td>
<td>
<asp:TextBox ID="txtPwd2" runat="server" TextMode="Password" placeholder="請再輸入一次密碼"></asp:TextBox>
<%-- <asp:RequiredFieldValidator ID="RequiredFieldValidator6" ControlToValidate="txtPwd2" runat="server" ErrorMessage="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>--%>
<asp:CompareValidator ID="CompareValidator3" runat="server" Operator="Equal" ControlToCompare="txtPwd2" ControlToValidate="txtPwd" ErrorMessage="(兩次密碼輸入不相同)" ForeColor="Red" Font-Size="10pt"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" ControlToValidate="txtName" runat="server" ErrorMessage="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>生日:</td>
<td>
<asp:TextBox ID="txtBirthday" runat="server" placeholder="1990-01-12"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" ControlToValidate="txtBirthday" Display="Dynamic" runat="server" ErrorMessage="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator1" Display="Dynamic" runat="server" Operator="DataTypeCheck" Type="Date" ControlToValidate="txtBirthday" ErrorMessage="(格式錯誤)" ForeColor="Red" Font-Size="10pt"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" placeholder="[email protected]"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" ControlToValidate="txtEmail" ValidationExpression="([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)" runat="server" ErrorMessage="(格式有誤)" ForeColor="Red" Font-Size="10pt"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>性別:</td>
<td>
<asp:RadioButtonList ID="rblGender" runat="server" RepeatDirection="Horizontal" Width="120">
<asp:ListItem Text="男" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="女" Value="0"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td>學歷:</td>
<td>
<asp:DropDownList ID="ddlEduLevel" runat="server">
<asp:ListItem Text="請選擇"></asp:ListItem>
</asp:DropDownList>
<asp:CompareValidator ID="CompareValidator2" runat="server" Operator="NotEqual" ValueToCompare="請選擇" ControlToValidate="ddlEduLevel" ErrorMessage="(請選擇)" ForeColor="Red" Font-Size="10pt"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>照片:</td>
<td>
<asp:FileUpload ID="fulPhoto" runat="server" /><asp:Label ID="lblPhoto" Font-Size="10pt" ForeColor="Red" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>備註:</td>
<td>