C50108
  • 2019/0801/轉職成功路途開始
  • 自學心得與此網站使用方式
  • 行事曆&課程大綱
  • 2019/0224/自我檢視
  • 雜記
    • 2019/0103/雜記
    • 2019/0410/作品集建構
    • 2019/0429/職訓局書單
    • 2019/0317/自我檢視
    • 2019/0316/陪玄松去高車討論&環境圖流程圖大神們line討論
    • 2019/0305/Gitbook使用方法
  • 2018/10XX/轉職心路歷程
  • 職訓局里程碑
    • 201901
      • 2019/0103/行動商務系統設計與開發,職訓局報到
      • 2019/0104/正式開課日&行動商務課程簡介
      • 2019/0108/資料庫理論/Access&WEB開發簡介
      • 2019/0109/資料庫資料型態屬性&HTMLtag
      • 2019/0110/計概基礎概念
      • 2019/0111/HTML表格table&form表單_post/get&iframe
      • 2019/0114/計&網概概念&網路層概念
      • 2019/0115/資料庫Access運算值&CSS簡介&在職班補充
      • 2019/0116/Access比較/邏輯運算&CSS_在職班補充+選擇器+Box model
      • 2019/0117/資訊系統架構&網路層
      • 2019/0118/資料庫正規化
      • 2019/0121/計概IT分工&資料庫正規化
      • 2019/0122/網路層&CSS父子容器切版
      • 2019/0123/Access資料庫關聯&CSS position&偵錯
      • 2019/0124/C#宣告、指定運算子
      • 2019/0125/VM虛擬機_基礎介紹
      • 2019/0128/VM虛擬機架設_虛擬網卡設定&伺服器權限設置
      • 2019/0129/Wireshark查詢網路層&資料庫物件導向
      • 2019/0130/ERmod雞爪圖&C#if、for時間複雜度
      • 2019/0131/C#流程控制&變數型別
    • 201902
      • 2019/0201/系統分析與設計_資料庫ERmod&c#Homework
      • 2019/0211/ASP.NET_Webforms&物件命名空間
      • 2019/0212/定址&網路遮罩
      • 2019/0213/SQLSeverM.S.介紹&AspWebforms表單控制項
      • 2019/0214/網概乙太網路&網路安全
      • 2019/0215/Pre Javascript 基礎 & 在職班補充
      • 2019/0218/TSQL基本指令&ASP.net左右置換表格/驗證傳值
      • 2019/0219/Javascript終極密碼&musicplay&asp.net驗證器
      • 2019/0220/SS基本語法&網概line機器人
      • 2019/0221/前端Javascript musicplay、內聚力耦合率
      • 2019/0222/前端Javascript musicplay、內聚力耦合率&伺服器權限
      • 2019/0223/SqlServerHomework&第一次專案報告
      • 2019/0225/SS合併查詢&ASP.NET驗證器
      • 2019/0226/伺服器ntfs安全性權限/共用權限
      • 2019/0227/Javascript_music_play_end&ASP.net串聯SQL(datasource就是拿來串SQLServer的)
    • 201903
      • 2019/0304/SS集合運算/子查詢/exists&asp.net GridView 事件 OnRowDataBound
      • 2019/0305/SS查詢式end&ASP.NET_Gridview_自訂樣式分頁
      • 2019/0306/Javascript musicplay_really_end
      • 2019/0307/前端HTML5鑲嵌字型&伺服器網域概念
      • 2019/0308/Android Studio_基礎概念&開發環境建置
      • 2019/0311/胡中興 工業4.0講習
      • 2019/0312/安卓系統_開發基礎介紹
      • 2019/0313/安卓工作室_基礎/布局內元件
      • 2019/0314/Asp.net鏈結資料庫-查詢
      • 2019/0315/SQS DML&第二次專案報告
      • 2019/0318/SQL DDL & 伺服器 自學基礎
      • 2019/0319/Android Studio_布局內元件&佈局規劃元件
      • 2019/0320/SQL檢視表&tsql基礎&Asp.net_Gridview
      • 2019/0321/TSQL&TDM&ASP.NET_Datalist
      • 2019/0322/DOM&JQ基礎&系統分析設計PPT&在職班補充
      • 2019/0325/TMD&Asp.net上傳圖片/產生QRCode
      • 2019/0326/SQLServer_預存程序+函數&Asp.net_Webforms半自動鏈結資料庫與自動化更新
      • 2019/0327/安卓工作室_佈局規劃元件
      • 2019/0328/jQuery選擇器應用&Ajax導讀+應用&asp.net串sserver_註冊帳號功能
      • 2019/0329/ADDS伺服器架設&第三次專題報告
    • 201904
      • 2019/0401/SQL觸發程序&Asp.net自動寄信&認證信
      • 2019/0402/前端作業四-jQ應用轉換樣式&ASP.NET_FormView控制項-會員資料維護實例
      • 2019/0403/JQ事件動畫&股市&Usecase
      • 2019/0408/安卓工作室_元件/布局基本end
      • 2019/0409/安卓工作室-物件導向事件驅動實作+Homework1&2
      • 2019/0410/上午小組討論-作品集自習&Visual studio webform+MVC範本
      • 2019/0411/安卓工作室-UI觸發委派函式與控制物件
      • 2019/0412/JQ動畫實做(寶可夢遊戲開場)&第四次專題報告
      • 2019/0415/前端JQ-Ajax+JSON&後端ADO建置、主板頁面概念控制項、Bootstrap演示
      • 2019/0416/安卓工作室UI控件案例結束、IDE Eclipse_Java物件導向基礎
      • 2019/0417/伺服器網域ADDNS&416LINE討論
      • 2019/0418/SQL指標、索引&Use cace
      • 2019/0419/主頁、Webform ADO.NET Entity Fromwork 增刪修實作&第五次專題報告
      • 2019/0423/Java基礎(型別/溢位/自動強制型別轉換/鑄造物件/串流/)&I/O物件用法(底層/較不底層)
      • 2019/0424/Bootstrap_RWD基礎/應用&Asp.Net_MVC實作增刪修(修待補)
      • 2019/0425/伺服器IIS安裝&資料匯入與管理
      • 2019/0426/Asp.Net_MVC增刪修實作(補修)&bootstrap – gridsystem– 網格系統&第六次專題報告&全國技能競賽網頁設計
      • 2019/0429/物件導向技術原理方法實作
      • 2019/0430/資料庫設計應用效能調教_SQL all end&ASP.NET_MVC_Controller單元_純C無V無M操作/簡單複雜繫結
    • 201905
      • 2019/0501/內部網站辨識&外部DNS域名/IP+自架DNS伺服器理解
      • 2019/0502/Java語言基礎、物件導向基礎
      • 2019/0503/Asp.net泛型處理常式驗證圖片應用&第七次專題報告Usecase
      • 2017/0506/Bs_FlexBox&Asp.Net_MVC_View+Razor@+Viewbag+helper
      • 2019/0507/Java 物件導向_類別+函式觀念&階段性作業三
      • 2019/0508/Asp.Net_MVC_Model_ADO.NET+Entityframework+LoginMember實作+MVC觀念
      • 2019/0509/Java物件導向(函式)_儲存型態+回傳值+多載+自制+例外處理+this參照+存取+複合
      • 20919/0510/第八次專題報告=功能DEMO
      • 2019/0514/Java_靜態類別+繼承特性
      • 2019/0515/RWD Utility+Card&MVC ViewModel+CRUD(RD)
      • 2019/0516/BS form&驗證+JQ驗證 & MVC_CRUD(CU)
      • 2019/0517/ASP.NET Webform介紹Master page 主頁 & Session 簡介 & 登入login驗證 & 隱碼攻擊injection & 工具箱程式碼片段使用
      • 2019/0520/繼承&存取權特性+java作業四+字符串格式化+多形+抽象類別
      • 2019/0521/抽象類別+介面
      • 2019/0522/Bootstrap Components 元件介紹 + MVC API 概念&實作
      • 2019/0523/IIS IP限制&ASP.NET部屬
      • 2019/0524/WebApi異質程式連線方式&第九次專題報告_循序圖
      • 2019/0528/Bootstrap Components 元件介紹 + MVC 登入驗證 + 商品加入購物車 實作
      • 2019/0529/ASP.NET_MVC購物車訂單功能完成+BootstrapComponents元件介紹
      • 2019/0530/原本是伺服器的課,但拿來做專題。
      • 2019/0531/ASP.NET_WebformAllView物件功能清單&ListView實作&第十次專案報告(完整循序圖)
    • 201906
      • 2019/0603/Bootstrap Components RWD End + ASP.NET_MVC Part2 PhotoSharing CodeFirst & Model 驗證
      • 2019/0604/ASP.NET_MVC Part2 PhotoSharing Controller & Filter & ADO.NET & View@RAZOR Helper
      • 2019/0605/Java介面實作&結束+安卓工作室(整合Layout與Java)Intent意圖&Bundle包裹
      • 2019/0606/第十一次專案報告功能demo+SingnaIR+伺服器作業+端午歌唱比賽
      • 2019/0609/黃大神傳授Visual_Studio&除錯技巧
      • 2019/0610/番外篇 Web Socket 即時連線& 就業前準備與技巧
      • 2019/0611/安卓工作室_(意圖+隱含意圖)資料傳遞+Android生命週期+硬體裝置與應用
      • 2019/0612/WebSockets Notification + MVC Part2 PhotoSharing PartialView & ADO.NET & EntitySQL & VMd
      • 2019/0613/MVC Part2 PhotoSharing ViewModel & ErrorHandle
      • 2019/0614/第十二次專案報告 功能Demo
      • 2019/0618/MVC Part2 PhotoSharing Route & Sitemap & _LayOut & AJAX
      • 2019/0618/RWD在職班_(Javascript_object-oriented programming)
      • 2019/0619/安卓工作室_(硬體裝置與應用)相機操作&GPS+階段性作業6+延伸 ( APP End )
      • 2019/0620/MVC補充C#MS SQL匯入CSV+上傳CSV存入MS SQL
      • 2019/0621/第十三次專案報告 功能Demo
    • 2019/0701/最終專案報告
    • 2019/0702/結訓與家人遊台東預計0708開始找工作自學筆記應該會等工作穩定後繼續開始
  • 自學里程碑
    • 201901
      • 2019/0107/DR
      • 2019/0108/UW
      • 2019/0103/Git
      • 2019/0103/CS
      • 2019/0115/Vscode
      • 2019/0116/JSON&AJAX
      • 2019/0122/卡內基
      • 2019/0126/MBTI
      • 2019/0131/PDP 外在 內在
    • 201902
      • 2019/0217/huli_half Developer
      • 2019/0219/SEO
      • 2019/0219/雪球速讀法
    • 201903
      • 2019/0304/asp、php、jsp、asp.net、net. Framework、asp.net core
      • 2019/0329/網站架站初嘗試
    • 201904
      • 2019/0415/Datatype-Explanation
      • 2019/0416/ASP.NET_Webform&Core&MVC(MVVM/MVP)
    • 201905
      • 2019/0613/開發職訓局共同專案時遇到的問題與解法
      • 2019/0514/ASP.NET SignalR
      • 2019/0514/JS擴展-JQ、React、Vue、Angular...
      • 2019/0514/Sass&Scss
      • 2019/0514/MVC結合Webform
      • 2019/0515/ASP.NET MVC_TempData/ViewData/ViewBag
      • 2019/0522/[自學筆記]海綿體啟蒙??
Powered by GitBook
On this page
  • 前端作業四 - jQ應用轉換樣式
  • 死 30 靜態寫死
  • 活 31 動態參數
  • 滑鼠事件
  • ASP.NET_FormView_控制項_會員資料維護實例
  • FormView
  • 更改樣式與排版
  • 如何將二進位的值轉為圖形 ? 圖並不是以檔案型式存在
  • 新增功能控制項 insertitemtemplate 36
  • 最後前端
  • 最後後端

Was this helpful?

  1. 職訓局里程碑
  2. 201904

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

Was this helpful?