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 account=@account">
                    <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 account=@account", Conn);
            Cmd.Parameters.AddWithValue("@account", context.Request.QueryString["account"]);

            SqlDataReader rd;
            Conn.Open();
            rd = Cmd.ExecuteReader();
            if (rd.Read())
            {
                context.Response.BinaryWrite((byte[])rd["Photo"]);
            }

            Conn.Close();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

新增功能控制項 insertitemtemplate 36

Itemtemplate 轉到 insert itemtemplate 的commandName為New。

CommandName都是固定的有

edit、update；new、insert；cancel、delete；select。

拿33的ado.net新增畫面來改在insertitemtemplate，資料要新增進資料庫都必須要有驗證器， Button的commandname一定要用insert，

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

只要一顆按鈕是insert，直接透過Bind抓值再透過bind直接寫回去，以往(33ado.net)要抓值在寫回去。

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

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

之前下拉式選單(學歷)寫在pageload但現在不能，必須寫在formview事件上面，前端onmodechange就是formview的切換唯讀與編輯事件，

以上都是在修改33轉為36的內容。

最後前端

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="36FormView.aspx.cs" Inherits="ASPnet._36FormView" %>

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


            }
        }
    }
}

Previous2019/0401/SQL觸發程序&Asp.net自動寄信&認證信 Next2019/0403/JQ事件動畫&股市&Usecase

Last updated 6 years ago

hashtag前端作業四 - jQ應用轉換樣式

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

hashtag死 30 靜態寫死

hashtag活 31 動態參數

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

hashtag滑鼠事件

hashtag事件可以被記錄

hashtag

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

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

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

hashtagFormView

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

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

hashtag更改樣式與排版

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

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

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

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

hashtag特性變限制

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

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

hashtag新增功能控制項 insertitemtemplate 36

hashtagCommandName都是固定的有

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

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

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

hashtag最後前端

hashtag最後後端