2019/0328/jQuery選擇器應用&Ajax導讀+應用&asp.net串sserver_註冊帳號功能

Previous2019/0327/安卓工作室_佈局規劃元件 Next2019/0329/ADDS伺服器架設&第三次專題報告

Last updated 5 years ago

Was this helpful?

2019/0328/jQuery選擇器應用&Ajax導讀+應用&asp.net串sserver_註冊帳號功能

y為javascript的函式庫只是有名

JQ 其實就是選擇器+方法

選擇器概念重談

1.階層樹狀父子繼承概念

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>

DOM數概念

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

題外話:現在為何函式庫會放在body底層?

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

題外話:函式庫為何要放在<script>下面?

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

選擇器進階用法

<!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的

題外話: vb tsql 沒有分大小寫其他程式語言大小寫都是有差別的

li底下a屬性href的值 * 整串裡面包含o的

li底下a屬性href的值 ^ 開頭裡面包含o的

li底下a屬性href的值 $ 結尾裡面包含o的

既有結點上 DOM操作

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

題外話 : 後端 void 為沒有回傳值一定會有個事件傳進去 e 就是這個事件的名字

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

Ajax 應用

網址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

<!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 無法新增

每個物件都有當初編譯它的作者制定的一個侷限值

就像牛仔褲可以改短但改短了不能改長七龍珠許願了就消失之類的

接下來要講的是

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" %>

<!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="abc@abc.com"></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 = "照片格式錯誤!";
            }
        }

小問題: 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" %>

<!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="abc@abc.com"></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 = "照片格式錯誤!";
            }
        }
    }
}

小問題: 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" %>

<!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="abc@abc.com"></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 (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

下集帶續寄驗證碼送認證信

Previous2019/0327/安卓工作室_佈局規劃元件 Next2019/0329/ADDS伺服器架設&第三次專題報告

Last updated 5 years ago

Was this helpful?

y為javascript的函式庫只是有名

JQ 其實就是選擇器+方法

選擇器概念重談

1.階層樹狀父子繼承概念

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>

DOM數概念

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

題外話:現在為何函式庫會放在body底層?

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

題外話:函式庫為何要放在<script>下面?

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

選擇器進階用法

<!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的

題外話: vb tsql 沒有分大小寫其他程式語言大小寫都是有差別的

li底下a屬性href的值 * 整串裡面包含o的

li底下a屬性href的值 ^ 開頭裡面包含o的

li底下a屬性href的值 $ 結尾裡面包含o的

既有結點上 DOM操作

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

題外話 : 後端 void 為沒有回傳值一定會有個事件傳進去 e 就是這個事件的名字

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

Ajax 應用

ajax - Google SearchGoogle

網址google的api 要錢的沒有只能試用

世界上的書都給你查詢

撈出來的資料為 jason

以前都是SOAP=>XML 現在都是Restful=>Json跟XML 好像都可以 ? jason資料相對於 xml好讀

沒付費只能接到十筆

題外話: 前端程式如果要用後端的話是不是要寫在後端?

後端可以直接寫前端，後端能直接透過API鏈結資料庫

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

<!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 無法新增

每個物件都有當初編譯它的作者制定的一個侷限值

就像牛仔褲可以改短但改短了不能改長七龍珠許願了就消失之類的

接下來要講的是

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" %>

<!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="abc@abc.com"></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 = "照片格式錯誤!";
            }
        }

小問題: 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" %>

<!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="abc@abc.com"></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 = "照片格式錯誤!";
            }
        }
    }
}

小問題: 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的情況下能夠更新伺服器資料->其實很多故事(微軟)->

最後前端程式碼

<%@ 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="abc@abc.com"></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 (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

選擇器概念重談

1.階層樹狀父子繼承概念

DOM數概念

題外話:現在為何函式庫會放在body底層?

題外話:函式庫為何要放在<script>下面?

選擇器進階用法

題外話: vb tsql 沒有分大小寫 其他程式語言大小寫都是有差別的

既有結點上 DOM操作

前端效果套用在後端物件上

點擊切換頁面主題功能

題外話 : 後端 void 為沒有回傳值 一定會有個事件傳進去 e 就是這個事件的名字

Ajax 應用

題外話: 前端程式如果要用後端的話是不是要寫在後端?

Ajax導讀

題外話 : 圖也是api 他不讓你知道他的圖的位置

接續上一次後端課程

接下來要講的是

33member_registeration

首先確認SServer Mysystem 資料庫 dbo.members表單 啥要增加啥要減少

如果不讓你儲存 ( 更動既有資料

前端改完

題外話:

換後端

剛剛把前端學歷給刪了所以現在要補上學歷選擇

要將資料存入資料庫

資料寫入資料庫

細節修正

需要下以下

照片資料驗證器

後端

小問題: postback 造成 學歷欄重複增加 item

( 但通常實務上會轉頁面而不是 postback ( 所以可以下指令只有第一次才會執行

( postback 時並不會執行

儲存資料後導入17頁17GridView_datasource.aspx

此時的前端

此時的後端

小問題: fulPhoto.FileBytes 沒有抓到東西 為 空 ，

存不會有問題但在讀資料時會出現問題 ，

沒有傳資料時 ContentType 裡面預設為 application / octet - stream 。

( 大改版 因為老師一開始沒釐清邏輯所以直接先由存資料至後端開始編寫 到這有點亂了他開始改

後端為以下

小問題: 帳號重複結果跳 pk重複 。 改為放在 try catch 裡面。

回到前端新增驗證器顯示帳號重複

小問題: 照片上傳出現postback重複 ( 邏輯不對 用上面教的方式可以解決

增加功能帳號檢測按鈕

( 只會啟動帳號可用性判斷 ( 利用驗證群組名稱控制某個群組內的控制項被觸發

問題:postback清空

只要點擊檢查帳號可用性或是之前興趣按鈕 按下去都會postback清空其他輸入框 造成內容消失。

最後前端程式碼

最後後端程式碼

下集帶續 寄驗證碼 送認證信

選擇器概念重談

1.階層樹狀父子繼承概念

DOM數概念

題外話:現在為何函式庫會放在body底層?

題外話:函式庫為何要放在<script>下面?

選擇器進階用法

題外話: vb tsql 沒有分大小寫 其他程式語言大小寫都是有差別的

既有結點上 DOM操作

前端效果套用在後端物件上

點擊切換頁面主題功能

題外話 : 後端 void 為沒有回傳值 一定會有個事件傳進去 e 就是這個事件的名字

Ajax 應用

題外話: 前端程式如果要用後端的話是不是要寫在後端?

Ajax導讀

題外話 : 圖也是api 他不讓你知道他的圖的位置

接續上一次後端課程

接下來要講的是

33member_registeration

首先確認SServer Mysystem 資料庫 dbo.members表單 啥要增加啥要減少

如果不讓你儲存 ( 更動既有資料

前端改完

題外話:

換後端

剛剛把前端學歷給刪了所以現在要補上學歷選擇

要將資料存入資料庫

資料寫入資料庫

細節修正

需要下以下

照片資料驗證器

題外話: vb tsql 沒有分大小寫其他程式語言大小寫都是有差別的

題外話 : 後端 void 為沒有回傳值一定會有個事件傳進去 e 就是這個事件的名字

首先確認SServer Mysystem 資料庫 dbo.members表單啥要增加啥要減少

小問題: postback 造成學歷欄重複增加 item

小問題: fulPhoto.FileBytes 沒有抓到東西為空，

存不會有問題但在讀資料時會出現問題，

( 大改版因為老師一開始沒釐清邏輯所以直接先由存資料至後端開始編寫到這有點亂了他開始改

小問題: 帳號重複結果跳 pk重複。改為放在 try catch 裡面。

小問題: 照片上傳出現postback重複 ( 邏輯不對用上面教的方式可以解決

只要點擊檢查帳號可用性或是之前興趣按鈕按下去都會postback清空其他輸入框造成內容消失。

下集帶續寄驗證碼送認證信

題外話: vb tsql 沒有分大小寫其他程式語言大小寫都是有差別的

題外話 : 後端 void 為沒有回傳值一定會有個事件傳進去 e 就是這個事件的名字

首先確認SServer Mysystem 資料庫 dbo.members表單啥要增加啥要減少

小問題: postback 造成學歷欄重複增加 item

小問題: fulPhoto.FileBytes 沒有抓到東西為空，

存不會有問題但在讀資料時會出現問題，

( 大改版因為老師一開始沒釐清邏輯所以直接先由存資料至後端開始編寫到這有點亂了他開始改

小問題: 帳號重複結果跳 pk重複。改為放在 try catch 裡面。

小問題: 照片上傳出現postback重複 ( 邏輯不對用上面教的方式可以解決

只要點擊檢查帳號可用性或是之前興趣按鈕按下去都會postback清空其他輸入框造成內容消失。

下集帶續寄驗證碼送認證信