2019/0402/前端作業四-jQ應用轉換樣式&ASP.NET_FormView控制項-會員資料維護實例

前端作業四 - jQ應用轉換樣式
熟悉JQ語法，藉由切換class切換樣式，CSS樣式互斥會以後面的為主，所以必須先清除CLASS或CSS。
題外話:被觸發事件的物件不用重複寫ID，能用this代替。
發現問題:function太死，要寫活。
死 30 靜態寫死
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .line {
            border: 1px solid;
            cursor: pointer;
        }
        .large {
            font-size: 36pt;
​
        }
​
        .small {
            font-size: 8pt;
        }
​
        .selected {
            background-color: yellow;
            font-weight: 900;
            border: 3px solid;
        }
    </style>
</head>
<body>
    <div id="switcher">
        <span id="small">縮小</span>
        <span id="default">標準</span>
        <span id="large">放大</span>
​
    </div>
    <p>Hello jQuery</p>
​
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $('#switcher>span').addClass('line');
​
        $('#large').click(function () {
            $('p').removeClass().addClass('large');
            $('#switcher>span').removeClass('selected');
            $(this).addClass('selected');
        });
​
        $('#small').click(function () {
            $('p').removeClass().addClass('small');
            $('#switcher>span').removeClass('selected');
            $(this).addClass('selected');
        });
​
        $('#default').click(function () {
            $('p').removeClass();
            $('#switcher>span').removeClass('selected');
            $(this).addClass('selected');
        });
    </script>
​
</body>
</html>
活 31 動態參數
三個按鈕動作都是在變更字體大小， 應該把動作註冊在三個按鈕的上一層容器， 從容器去找子輩哪個物件被點擊， 再藉由傳事件至funtion， 抓取觸發點擊事件的物件的id名稱， 當作方法的參數去進行， 事件目標物增加屬性
​
Bug 點擊容器div 也會觸發增加selected樣式 ，解決方法:if 是span才增加selected樣式。
​
​
相反動作toggle true <-> false 預設建立在click 缺點同時也是優點，只能做本身狀態互斥改變。
​
​
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .line {
            border: 1px solid;
            cursor: pointer;
        }
        .large {
            font-size: 36pt;
​
        }
​
        .small {
            font-size: 10pt;
        }
        .larger {
            font-size: 48pt;
        }
​
        .smaller {
            font-size: 8pt;
        }
        .selected {
            background-color: yellow;
            font-weight: 900;
            border: 3px solid;
        }
​
        .hide{
            display:none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    <h2>顯示功能按鈕</h2>
​
    <div id="switcher">
        <span id="smaller">更小</span>
        <span id="small">縮小</span>
        <span id="default">標準</span>
        <span id="large">放大</span>
        <span id="larger">更大</span>
    </div>
    <p>Hello jQuery</p>
​
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $('#switcher>span').addClass('line');
        //$('#switcher').hide();
        $('#switcher').addClass('hide');
​
        $('#switcher').click(function (evt) {
            if ($(evt.target).is('span')) {
                var id = evt.target.id;
                $('p').removeClass().addClass(id);
                $('#switcher>span').removeClass('selected');
                $(evt.target).addClass('selected');
            }
        });
​
        //$('h2').click(function () {
        //    $('#switcher').show();
        //    $(this).text('隱藏功能按鈕');
        //});
​
        //$('h2').click(function () {
        //    $('#switcher').toggle(1000);
        //});
​
        $('h2').click(function () {
            if ($('#switcher').cl.hasClass('hide')) {
                $('#switcher').removeClass().addClass('show');
                $(this).text('隱藏功能按鈕');
            }
            else {
                $('#switcher').removeClass().addClass('hide');
                $(this).text('顯示功能按鈕');
            }
        });
​
​
​
    </script>
​
</body>
</html>
可能沒專心聽課，不知道未啥老師這邊多了cl，導致程式會跑不起來，還以為是jq版本錯了看半天，拿掉cl就好了...
$('h2').click(function () {
            if ($('#switcher').cl.hasClass('hide')) {
                $('#switcher').removeClass().addClass('show');
                $(this).text('隱藏功能按鈕');
            }
​
滑鼠事件
又分為 up down Enter leave 
hover 是 toggle的一種實現，
就必須分開寫
​
事件可以被記錄
​
問題:上一行動畫還沒執行完，就執行下一行程式。
解決: call back function 跑完 func1後才會執行func2
ASP.NET_FormView_控制項_會員資料維護實例
每個view都有它的用途，因為每個view長的都不太一樣，基於對view的型態、功能、樣式都有了解，Ex.gridview後台、datalist前台。
​
FormView
VS2017版本會自動產出itemtemplate、edit itemtemplate、insert itemtemplate。 
Formview具有新增功能，因為具有insert itemtemplate。
Formview 一次只能顯示一筆資料。除非給予allowpaging=true屬性
實務來說會員的頁面formview不會具有換頁功能。 但管理員需要一次看到全部的資料? 所以就藉由組合girdview+formview成一個介面做不同顯示， 帳號放在左側，右側為詳細資料， IDE 對girdview右鍵 -> 編輯資料行-> commandfield -> showselectbutton 前端寫成點擊girdview帳號後， formview抓girdview點擊的參數對formview下指令與參數。
提示(以前講過):要更新的與被觸發的區域postback
區域postback使用ajax 1. 加入函式庫 ScriptManager 2. 區域用updatepanel – ContentTemplate 包起來
​
​
更改樣式與排版
後端只有三種按鈕(很重要屬性很重要)擁有commandname可用
Datalist有好幾筆所以必須要指定要更改哪一筆 
那formview只會顯示一筆所以就不需要指定 
Bind(可改)、Eval(pk不給改)資料繫結標準表示式
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="36FormView.aspx.cs" Inherits="ASPnet._36FormView" %>
​
<!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>
        #container{
            border:2px solid;
            width:1200px;
            margin:auto;
​
        }
         #left{
​
            width:200px;
            float:left;
        }
          #right{
            width:1000px;
            float:right;
        }
          #bottom{
              clear:both;
          }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
​
​
        <div id="container">
            <div id="left">
                <asp:SqlDataSource ID="SqlDataSource2" runat="server"
                    ConnectionString="<%$ ConnectionStrings:MySystemConnectionString1 %>"
                    SelectCommand="SELECT * FROM [Members]"></asp:SqlDataSource>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Account" DataSourceID="SqlDataSource2">
                    <Columns>
                        <asp:BoundField DataField="Account" HeaderText="Account" ReadOnly="True" SortExpression="Account" />
​
                        <asp:CommandField ShowSelectButton="True" />
​
                    </Columns>
                </asp:GridView>
            </div>
​
            <div id="right">
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                    ConnectionString="<%$ ConnectionStrings:MySystemConnectionString1 %>"
                    SelectCommand="SELECT * FROM [Members] where [email protected]">
                    <SelectParameters>
                        <asp:ControlParameter Name="account" ControlID="GridView1" Type="String" />
                    </SelectParameters>
                </asp:SqlDataSource>
​
                <asp:FormView ID="FormView1" runat="server" DataKeyNames="Account" DataSourceID="SqlDataSource1">
                    <EditItemTemplate>
                        Account:
                    <asp:Label ID="AccountLabel1" runat="server" Text='<%# Eval("Account") %>' />
                        <br />
                        Pswd:
                    <asp:TextBox ID="PswdTextBox" runat="server" Text='<%# Bind("Pswd") %>' />
                        <br />
                        Name:
                    <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' />
                        <br />
                        Birthday:
                    <asp:TextBox ID="BirthdayTextBox" runat="server" Text='<%# Bind("Birthday") %>' />
                        <br />
                        Email:
                    <asp:TextBox ID="EmailTextBox" runat="server" Text='<%# Bind("Email") %>' />
                        <br />
                        Gender:
                    <asp:CheckBox ID="GenderCheckBox" runat="server" Checked='<%# Bind("Gender") %>' />
                        <br />
                        EduLevel:
                    <asp:TextBox ID="EduLevelTextBox" runat="server" Text='<%# Bind("EduLevel") %>' />
                        <br />
                        Notes:
                    <asp:TextBox ID="NotesTextBox" runat="server" Text='<%# Bind("Notes") %>' />
                        <br />
                        Photo:
                    <asp:TextBox ID="PhotoTextBox" runat="server" Text='<%# Bind("Photo") %>' />
                        <br />
                        IsAuth:
                    <asp:CheckBox ID="IsAuthCheckBox" runat="server" Checked='<%# Bind("IsAuth") %>' />
                        <br />
                        <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" />
                        &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        Account:
                    <asp:TextBox ID="AccountTextBox" runat="server" Text='<%# Bind("Account") %>' />
                        <br />
                        Pswd:
                    <asp:TextBox ID="PswdTextBox" runat="server" Text='<%# Bind("Pswd") %>' />
                        <br />
                        Name:
                    <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' />
                        <br />
                        Birthday:
                    <asp:TextBox ID="BirthdayTextBox" runat="server" Text='<%# Bind("Birthday") %>' />
                        <br />
                        Email:
                    <asp:TextBox ID="EmailTextBox" runat="server" Text='<%# Bind("Email") %>' />
                        <br />
                        Gender:
                    <asp:CheckBox ID="GenderCheckBox" runat="server" Checked='<%# Bind("Gender") %>' />
                        <br />
                        EduLevel:
                    <asp:TextBox ID="EduLevelTextBox" runat="server" Text='<%# Bind("EduLevel") %>' />
                        <br />
                        Notes:
                    <asp:TextBox ID="NotesTextBox" runat="server" Text='<%# Bind("Notes") %>' />
                        <br />
                        Photo:
                    <asp:TextBox ID="PhotoTextBox" runat="server" Text='<%# Bind("Photo") %>' />
                        <br />
                        IsAuth:
                    <asp:CheckBox ID="IsAuthCheckBox" runat="server" Checked='<%# Bind("IsAuth") %>' />
                        <br />
                        <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert" Text="插入" />
                        &nbsp;<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
                    </InsertItemTemplate>
                    <ItemTemplate>
                        Account:
                    <asp:Label ID="AccountLabel" runat="server" Text='<%# Eval("Account") %>' />
                        <br />
                        Pswd:
                    <asp:Label ID="PswdLabel" runat="server" Text='<%# Bind("Pswd") %>' />
                        <br />
                        Name:
                    <asp:Label ID="NameLabel" runat="server" Text='<%# Bind("Name") %>' />
                        <br />
                        Birthday:
                    <asp:Label ID="BirthdayLabel" runat="server" Text='<%# Bind("Birthday") %>' />
                        <br />
                        Email:
                    <asp:Label ID="EmailLabel" runat="server" Text='<%# Bind("Email") %>' />
                        <br />
                        Gender:
                    <asp:CheckBox ID="GenderCheckBox" runat="server" Checked='<%# Bind("Gender") %>' Enabled="false" />
                        <br />
                        EduLevel:
                    <asp:Label ID="EduLevelLabel" runat="server" Text='<%# Bind("EduLevel") %>' />
                        <br />
                        Notes:
                    <asp:Label ID="NotesLabel" runat="server" Text='<%# Bind("Notes") %>' />
                        <br />
                        Photo:
                    <asp:Label ID="PhotoLabel" runat="server" Text='<%# Bind("Photo") %>' />
                        <br />
                        IsAuth:
                    <asp:CheckBox ID="IsAuthCheckBox" runat="server" Checked='<%# Bind("IsAuth") %>' Enabled="false" />
                        <br />
​
                    </ItemTemplate>
                </asp:FormView>
            </div>
            <div id="bottom">
​
            </div>
               </ContentTemplate>
        </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>
​
撰寫HTML的TABLE、TR、TD 再把控制項塞入， 
實務上密碼與帳號不會放在會員資料同頁面修改， 
關聯別張資料表並加入學位資料並把相同欄位消除(更改SQL語法)， 
將性別名稱布林值改為男女(也在SQL更改較方便)， 
驗證信通過的改為在帳號旁顯示，
且不加提示提式變成只有管理員看得懂，
​
問題:瀏覽器只看得懂img src tag?資料庫的媒體檔為二元編碼而不是鏈結。
如何將二進位的值轉為圖形 ? 圖並不是以檔案型式存在
都是路徑但不一定是檔案的路徑 ??
新增項目-> 泛型處理常式 HTTPhander
​
特性變限制
(沒有重新整理(regust/response)都會不知道伺服器更新了什麼內容) 
這段泛型程式只做一件事情，去資料庫把資料取出來，把二進位轉為圖片， 
不能再後端寫只能在handler寫，而泛型處理常式是handler，副檔名為ashx，sh為handler
​
外型跟c#長的一樣 
Class 繼承 介面 多形 I interface 介面沒有實做 物件導向技術??
Class 類別名稱 繼承 一隻程式就是一個獨立的類別
寫食譜 類別是菜 ??
回傳 void無 bool不林 值
 public class _36GetMemberPhoto : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
傳進來context 
如果呼叫泛型則做泛型裡面寫的事情， 
這裡完全沒有控制項，但可以用複製的?? 
記得using
​
​
回到36aspx -> img那改成跟36ashx要圖片，透過url 
回到36ashx (Regust response 都是鑄造出來的)抓值要先， 
context.request.方法querystring抓帳號丟在參數再丟去資料庫要資料， 
原本handler是http在做，但這邊換我們來寫， 
利用reader將資料讀出來， 
再用方法binarywrite用二進位輸出(16轉2)轉成byte陣列 。
​
好處(安全性保護)，另存圖檔時會存不下來，路徑是泛型處理檔案的位置。
這裡有點不清楚但上面有記下來關鍵字應該可以去查一下。
​
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
​
namespace ASPnet
{
    /// <summary>
    /// _36GetMemberPhoto 的摘要描述
    /// </summary>
    public class _36GetMemberPhoto : IHttpHandler
    {
​
        public void ProcessRequest(HttpContext context)
        {
            SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString);
            SqlCommand Cmd = new SqlCommand("select Photo from members where [email protected]", Conn);
            Cmd.Parameters.AddWithValue("@account", context.Request.QueryString["account"]);
​
            SqlDataReader rd;
            Conn.Open();
            rd = Cmd.ExecuteReader();
            if (rd.Read())
            {
                context.Response.BinaryWrite((byte[])rd["Photo"]);
            }
​
            Conn.Close();
        }
​
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
​
​
新增功能控制項 insertitemtemplate 36
Itemtemplate 轉到 insert itemtemplate 的commandName為New。
CommandName都是固定的有
edit、update；new、insert；cancel、delete；select。
​
拿33的ado.net新增畫面來改在insertitemtemplate， 資料要新增進資料庫都必須要有驗證器， Button的commandname一定要用insert，
問題:為什麼只是要新增又不會顯示(會顯示輸入框)卻要用bind?
只要一顆按鈕是insert，直接透過Bind抓值再透過bind直接寫回去， 以往(33ado.net)要抓值在寫回去。
​
改寫FormView後的結論:只要是textbox只要繫結bind，就不用寫抓值。
提示:causesvalidation:false 不受驗證器控制。
之前下拉式選單(學歷)寫在pageload但現在不能，必須寫在formview事件上面，前端onmodechange就是formview的切換唯讀與編輯事件，
以上都是在修改33轉為36的內容。
最後前端
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="36FormView.aspx.cs" Inherits="ASPnet._36FormView" %>
​
<!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>
        #container{
            border:2px solid;
            width:1200px;
            margin:auto;
            
        }
         #left{
           
            width:200px;
            float:left;
        }
          #right{
            width:1000px;
            float:right;
        }
          #bottom{
              clear:both;
          }
​
  
            #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">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div id="container">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="left">
                        <asp:SqlDataSource ID="SqlDataSource2" runat="server"
                            ConnectionString="<%$ ConnectionStrings:MySystemConnectionString1 %>"
                            SelectCommand="SELECT * FROM [Members]"></asp:SqlDataSource>
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Account" DataSourceID="SqlDataSource2">
                            <Columns>
                                <asp:BoundField DataField="Account" HeaderText="Account" ReadOnly="True" SortExpression="Account" />
​
                                <asp:CommandField ShowSelectButton="True" />
​
                            </Columns>
                        </asp:GridView>
                    </div>
​
                    <div id="right">
                        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                            ConnectionString="<%$ ConnectionStrings:MySystemConnectionString1 %>"
                            SelectCommand="SELECT  Members.*,iif(Members.Gender=1,'男','女') as sex,Edu.EduLevel as EduName FROM [Members] inner join [Edu] on Edu.EduLevel_Code=Members.EduLevel where [email protected]">
                            <SelectParameters>
                                <asp:ControlParameter Name="account" ControlID="GridView1" Type="String" />
                            </SelectParameters>
                        </asp:SqlDataSource>
​
                        <asp:FormView ID="FormView1" runat="server" DataKeyNames="Account" DataSourceID="SqlDataSource1" OnModeChanging="FormView1_ModeChanged">
                            <EditItemTemplate>
                                Account:
                    <asp:Label ID="AccountLabel1" runat="server" Text='<%# Eval("Account") %>' />
                                <br />
                                Pswd:
                    <asp:TextBox ID="PswdTextBox" runat="server" Text='<%# Bind("Pswd") %>' />
                                <br />
                                Name:
                    <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' />
                                <br />
                                Birthday:
                    <asp:TextBox ID="BirthdayTextBox" runat="server" Text='<%# Bind("Birthday") %>' />
                                <br />
                                Email:
                    <asp:TextBox ID="EmailTextBox" runat="server" Text='<%# Bind("Email") %>' />
                                <br />
                                Gender:
                    <asp:CheckBox ID="GenderCheckBox" runat="server" Checked='<%# Bind("Gender") %>' />
                                <br />
                                EduLevel:
                    <asp:TextBox ID="EduLevelTextBox" runat="server" Text='<%# Bind("EduLevel") %>' />
                                <br />
                                Notes:
                    <asp:TextBox ID="NotesTextBox" runat="server" Text='<%# Bind("Notes") %>' />
                                <br />
                                Photo:
                    <asp:TextBox ID="PhotoTextBox" runat="server" Text='<%# Bind("Photo") %>' />
                                <br />
                                IsAuth:
                    <asp:CheckBox ID="IsAuthCheckBox" runat="server" Checked='<%# Bind("IsAuth") %>' />
                                <br />
                                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" />
                                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
                            </EditItemTemplate>
                            <InsertItemTemplate>
                                <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碼" Text='<%# Bind("Account") %>'></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" Text='<%# Bind("Pwd") %>'></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" Text='<%# Bind("Name") %>'></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" Text='<%# Bind("Birthday") %>'></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" ControlToValidate="txtBirthday" Display="Dynamic" runat="server" ErrorMessage="(必填)" ForeColor="Red" Font-Size="10pt"></asp:RequiredFieldValidator>
                                            <asp:CompareValidator ID="CompareValidator1" Display="Dynamic" runat="server" Operator="DataTypeCheck" Type="Date" ControlToValidate="txtBirthday" ErrorMessage="(格式錯誤)" ForeColor="Red" Font-Size="10pt"></asp:CompareValidator>
​
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>E-mail：</td>
                                        <td>
                                            <asp:TextBox ID="txtEmail" runat="server" placeholder="[email protected]" Text='<%# Bind("Email") %>'></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" Text='<%# Bind("Note") %>'></asp:TextBox>
                                        </td>
​
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <asp:Button ID="Button1" runat="server" Text="加入會員" CommandName="Insert" />
                                            <asp:Button ID="Button3" runat="server" Text="取消" CommandName="Cancel" CausesValidation="false" />
                                        </td>
                                    </tr>
​
                                </table>
​
                            </InsertItemTemplate>
                            <ItemTemplate>
                                <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit">編輯</asp:LinkButton>
                                <asp:LinkButton ID="LinkButton2" runat="server" CommandName="New">新增</asp:LinkButton>
                                <hr />
​
                                <table border="1">
                                    <tr>
                                        <td>帳號：</td>
                                        <td><%# Eval("Account") %>
                                            <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Bind("IsAuth") %>' Enabled="false" />
                                        </td>
                                        <td>密碼：</td>
                                        <td>＊＊＊＊＊＊＊</td>
                                        <td rowspan="6">
                                            <img src='<%# "36GetMemberPhoto.ashx?account="+ Eval("Account") %>' />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>姓名：</td>
                                        <td><%# Eval("Name") %></td>
                                        <td>生日：</td>
                                        <td><%# Eval("Birthday","{0:d}") %></td>
                                    </tr>
                                    <tr>
                                        <td>性別：</td>
                                        <td><%# Eval("sex") %></td>
                                        <td>教育程度：</td>
                                        <td><%# Eval("EduName") %></td>
                                    </tr>
                                    <tr>
                                        <td>E-mail：</td>
                                        <td colspan="3"><%# Eval("Email") %></td>
​
                                    </tr>
                                    <tr>
                                        <td>備住：</td>
                                        <td colspan="3"><%# Eval("Notes") %></td>
​
                                    </tr>
                                </table>
​
                            </ItemTemplate>
                        </asp:FormView>
                    </div>
                    <div id="bottom">
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>
​
最後後端
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
​
namespace ASPnet
{
    public partial class _36FormView : System.Web.UI.Page
    {
        SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MySystemConnectionString1"].ConnectionString);
​
        protected void Page_Load(object sender, EventArgs e)
        {
         
        }
​
        protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
        {
            SqlCommand Cmd = new SqlCommand("select dbo.fnCheckMemberAccount(@account)", Conn);
            //Cmd.Parameters.AddWithValue("@account", txtAccount.Text);
​
            SqlDataReader rd;
            Conn.Open();
            rd = Cmd.ExecuteReader();
​
            rd.Read();
            if (rd[0].ToString() == "0")
                args.IsValid = true;
            else
                args.IsValid = false;
​
            Conn.Close();
        }
​
        protected void FormView1_ModeChanged(object sender, EventArgs e)
        {
            if (FormView1.CurrentMode == FormViewMode.Insert)
            {
                SqlCommand Cmd = new SqlCommand("select * from Edu order by EduLevel_Code desc", Conn);
                DropDownList ddlEduLevel=(DropDownList)FormView1.FindControl("ddlEduLevel");
                SqlDataReader rd;
                Conn.Open();
                rd = Cmd.ExecuteReader();
                ListItem item;
                while (rd.Read())
                {
                    item = new ListItem(rd["EduLevel"].ToString(), rd["EduLevel_Code"].ToString());
                    ddlEduLevel.Items.Add(item);
                }
​
                Conn.Close();
​
​
            }
        }
    }
}
​
​
​
​
​
2019/0401/SQL觸發程序&Asp.net自動寄信&認證信
2019/0403/JQ事件動畫&股市&Usecase
Last modified 3yr ago
Copy link
On this page
前端作業四 - jQ應用轉換樣式
死 30 靜態寫死
活 31 動態參數
滑鼠事件
ASP.NET_FormView_控制項_會員資料維護實例
FormView
更改樣式與排版
如何將二進位的值轉為圖形 ? 圖並不是以檔案型式存在
新增功能控制項 insertitemtemplate 36
最後前端
最後後端
前端作業四 - jQ應用轉換樣式

題外話:被觸發事件的物件不用重複寫ID，能用this代替。

死 30 靜態寫死

活 31 動態參數

可能沒專心聽課，不知道未啥老師這邊多了cl，導致程式會跑不起來，還以為是jq版本錯了看半天，拿掉cl就好了...

滑鼠事件

事件可以被記錄

​

問題:上一行動畫還沒執行完，就執行下一行程式。

解決: call back function 跑完 func1後才會執行func2

ASP.NET_FormView_控制項_會員資料維護實例

FormView

Formview 一次只能顯示一筆資料。除非給予allowpaging=true屬性

提示(以前講過):要更新的與被觸發的區域postback

更改樣式與排版

後端只有三種按鈕(很重要屬性很重要)擁有commandname可用

問題:瀏覽器只看得懂img src tag?資料庫的媒體檔為二元編碼而不是鏈結。

如何將二進位的值轉為圖形 ? 圖並不是以檔案型式存在

新增項目-> 泛型處理常式 HTTPhander

特性變限制

好處(安全性保護)，另存圖檔時會存不下來，路徑是泛型處理檔案的位置。

這裡有點不清楚但上面有記下來關鍵字應該可以去查一下。

新增功能控制項 insertitemtemplate 36

CommandName都是固定的有

問題:為什麼只是要新增又不會顯示(會顯示輸入框)卻要用bind?

改寫FormView後的結論:只要是textbox只要繫結bind，就不用寫抓值。

提示:causesvalidation:false 不受驗證器控制。

最後前端

最後後端
