一步一腳印工作札記

ASP 中網頁常會用到 GET  方式帶參數傳送資料，最近發現在使用過 Base64 編碼後在目標網頁利用 QueryString 得到的值無法完全解碼，進而發現 '+' 被轉變成為空白，進由保哥 & 黑暗執行緒文章了解如下: URL 傳參數時 '=' ， '+'  兩者會被視特殊符號，第一個用來賦值 ( 例: param=abc)，而加號則被視為轉換空白符號(例: a b => a+b)，之後解碼完再還原成空白。而 Base64 加密後產生的加號若沒有經過必要處理的話，在 QueryString 取值時 Base64 解密完加號也就被還原成空白 @@||| ， 解決這個問題利用 HtmlUtility.URLEncode (url) 它會自動幫忙將編碼 '+' 轉換，這樣在做 QueryString 就會得到應該看到的加號而不是空白了。

就字眼看來兩者差別不太... 簡單的說 TextBox 利用 val( )，而其它的控制項元件則用 text( ) 底下範例可跑跑看或ID 對調實驗，很快就看出差別了... HTML: <input type="text" id="txtinupt" value="TEXTBOX"/> <label id="lblid">LABEL</label> <button onclick="TestFunc()">OK</button> JS: function TestFunc(){   $('#lblid').text("12345")   $('#txtinput').val("99999");   $('#lblid').focus();   console.log('Function End') }

Client 端常會需要呼叫到 Server 端的元件並做處理，底下是個判斷郵件地址錯誤後透過 Client 端將字體改為黃色、背景改為紅色的範例，利用 JQuery 呼叫ASP.NET 元件方法如橘色字體， 這對寫過 ASP 的同鞋應該看的懂 BJ4 吧，不然就太 GG 了 JQUERY: var em = document.getElementById("<%= email.ClientID %>").value; // JavaScript 用法  if (em == "電子郵件地址錯誤！") {   $(" #<%= email.ClientID %> ").css('color', 'yellow');       // 這裡是 JQuery 抓取 ID=email 的做法   $(" #<%= email.ClientID %> ").css('background-color', 'red'); } HTML:  <asp:Label ID="lblEmail" runat="server" Text="電子郵件地址："></asp:Label>     <asp:TextBox ID="email" runat="server" OnTextChanged="Email_TextChanged" AutoPostBack="true"></asp:TextBox>

目前因開發環境為VS2015，記錄到 2016/10/26 為止(持續加入修訂中..，Windows 有空再補上) 就個人所知並實際在開發中常用快速鍵整理如下，若有遺漏或有先進前輩有好用快速鍵，也請讓我知道加入 Windows: Win + Tab: 切換不同畫面 Win + L   :   鎖定電腦 Win + E   :  開啓我的電腦  Win + D  :   切換到桌面 Win + 加/減號 : 放大/縮小 畫面 Ctrl + W :  刪除網頁 Ctrl + Shift + T:  恢復剛刪除的網頁 Visual Studio 2015: F7 : 程式碼 Shift + F7 : 設計畫面 Ctrl + C : 複製內容 Ctrl + V : 貼上內容 Ctrl + Y : 復原前一個 Ctrl + Z 動作 Ctrl + Z :  復原前次動作 Ctrl + K + C : 加上註解 Ctrl + K + U : 解除註解 Alt + 滑鼠滾動 : 垂直選取內容 選取左大括號後，Ctrl + ] :  找到匹配右大括號 Other: Ctrl + Shift + Del : Chrome 叫出清除瀏覽器記錄內容畫面

簡單一句話，利用 white-space & word-wrap 兩者合起來就可以搞定囉! HTML: <div>   <pre> I am the pizza11 I am the pizzaI am the pizzaI am the pizzaI am the pizzaI am the pizzaI am the pizzaI am the pizzaI am the pizzaI am the pizzaI am the pizza   </pre> CSS: pre{   position:absolute;   left:10%;   border:solid 3px;   white-space: pre-wrap;   // pre-wrap 設定使空白保留，但可正確換行   word-wrap: break-word; }

簡單又實用 ^ ^ * 第一種透過 .ToList( ) 方法:  List<string> List1 = new List<string>();  List<string> List2 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List2 = List1.ToList( ); * 第二種方式在建立物件時複製前一個 List  List<string> List1 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List<string> List2 = new List<string>(List1); * 第三種方法新的List 中使用 AddRange( ) 方法  List<string> List1 = new List<string>();  List<string> List2 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List2.AddRange(List1); 另可使用 List1.GetRange(Start, End) 來複製不固定大小(但不包含End)的內容

CSS 有個強大的排版屬性 display: flex 裡面功能很多，對我而言好用的就是下面的例子(三個 div 透過 flex:1 將 .content 平均分成三份大小一樣的div(因為 .flex 有三個)，這樣做減少了許多複雜的計算功能... HTML: <div class="content">  <div class="flex1">1</div>  <div class="flex1">1</div>  <div class="flex1">1</div> </div> CSS: .content{  .content{   display:flex;   flex-direction:row;   width:700px;   height:150px;   background:green;   align-items:center;   // 垂直置中   jusify-content:center;  // 水平置中   flex-wrap:wrap;  // 超過允許換行 } .flex1{   width:50%;   display:flex;   color:green;   font-size:24px;   justify-content:center;   align-items:center; } .flex1:nth-of-type(1){     flex:1;     background:red; } .flex1:nth-of-type(2){     flex:1;     background:yellow; } .flex1:nth-of-type(3){     flex:1;     background:blue; }                             

CSS3 中有時想針對字體的顏色及字體邊線做些處理，stroke 就是個好方法，底下的範例相信能帶來一點心得 ^^ HTML: <div class="dv">1234567890</div> CSS: .dv{     font-size:50px;  -webkit-text-fill-color: red;   // 字體填充顏色  -webkit-text-stroke-color: yellow;   //字體邊界顏色  -webkit-text-stroke-width: 0.92px;   //字體邊界寛度 }

CSS3 裡面的 clip-path 可用來剪裁圖片，下面是個簡單的範例 HTML: <img src="http://lh5.ggpht.com/_0tibDhJQ0Og/S6b6TkEMaNI/AAAAAAAARXg/Elrs6s7s0ds/s800/ar025.jpg"></img> CSS : img { width: 280px; height: 280px; background: #ff90ff; clip-path: inset(Top Right Bottom Left);   // Top為從上往下剪裁的方向，依此類推，使用百分比做為縮剪的比率 ex: clip-path: inset(40% 40% 50% 10%) } // 如果要剪裁成圓形，可改為下列語法 clip-path: circle(半徑大小 at X-alias Y-alias);  // ex: circle(50% at 50% 50%) /* Center the demo */ html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; }

一般要透過 CreateElement 或 HTML append、InnerHTML 動態加入 SVG 內容會產生問題 (SVG 是 xmlns ，而非 HTML 元素)，以下使用  createElementNS 進行轉換後就行了，趕快做個記錄吧.. HTML: <svg id="s"xmlns="http://www.w3.org/2000/svg"/> JS: function makeSVG(tag, attrs){   var el = document. createElementNS ('http://www.w3.org/2000/svg', tag); for (var k in attrs) el.setAttribute(k, attrs[k]); return el; } var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'yellow'});           document.getElementById('s').appendChild(circle);

使用 CSS 時，難免要針對某些相同元素但又不同位置去做變化，如單行要顯示藍底，雙數行要顯示紅底，類似這種例子，到底要用 nth-chiild ? 還是 nth-of-type呢?其實了解之後就很簡單了 使用 nth-child 針對所有元素位置判斷，如以下CSS nth-child(odd){   color:red; } <p>A1</p> <hr/> <p>A1</p> <p>A1</p> 得到的結果是 A1 -------- A1 A1 那是因為中間多了一個 <hr/> 使得第二個<p> 成為了奇數行，那如果要讓奇數的 A1 變成紅色怎麼辦呢? nth-of-type(odd){   color:red; } <p>A1</p> <hr/> <p>A1</p> <p>A1</p> 得到的結果是 A1 -------- A1 A1 結論是使用 nth-of-type 才會對相同的元素做處理，^^ 很有意思吧

第一次學 React 難免會覺得有點不習慣，寫個範例來幫忙記憶 & 了解吧......... Result(結果): Your Name HTML: <div class="content"></div> JS ( 記得額外載入 react.js & ReactDOM.js ) // 第一個元件 CommentList (父元件) var CommentParent = React.createClass( {   render:function(){      return(<CommentSon author="Your Name"></CommentSon >) // 這裡是實作呼叫子元件 }}) // 第二個元件 CommentSon (子元件) var CommentSon = React.createClass({   render:function(){     return(        <h2>{this.props.author}</h2>   // 利用 props 來取得父元件中的 author 屬性內容       )   } }); ReactDOM.render(    <CommentParent />,   document.querySelector('.content') )

在專案中難免會使用 Http POST 方式來傳送資料，之前很白目，用了 PreviousPage 來實作，後來才學會到用 HttpWebRequest 即可直接解決，立馬將所有的程式碼翻一遍，真是對不起，讓它出土太晚........... Source Page (source.aspx):   protected void Button1_Click(object sender, EventArgs e)         {             string url = "target.aspx";             StringBuilder postData = new StringBuilder();             postData.Append("first_name=" + HttpUtility.UrlEncode(TextBox1.Text) + "&");             postData.Append("last_name=" + HttpUtility.UrlEncode(TextBox2.Text));              // Now to Send Data.             StreamWriter writer = null;             HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);             request.Method = "POST";             request.ContentType = "application/x-www-form-urlencoded";             request.ContentLength = postData.ToString().Length;             try             {                 writer = new StreamWriter(request.GetR

這個範例為 $.ajax 的簡單應用，其實只要多了解、多使用相信可以體會到 $.ajax 的用法: JQuery: function javascriptFunction( ) { $.ajax({  type: "POST",          url: "TestAjax.aspx/TestFunc",          data: JSON.stringify({}),          contentType: "application/json; charset=utf-8",          async: false,          cache: false,          dataType: "json",          success: function (data) {          var jsonData = $.parseJSON(data.d);  // 記得使用 $.parseJSON 處理 data.d          for (int i=0; i < jsonData.Length; i++)              alert(jsonData[i].Title); C#: // 下面為所需宣告 using System.Web; using System.Web.Script.Services; using System.Web.Script.Serialization; ... public class NewsItem   // 建立一個仿 JSON 類別 {         public string Title{ get; set; }         public string Content{ get; set; } } [System.Web.Services.WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)]  public static string TestFunc() {       // 載入內容       NewsItem[] nItems = n

如果要使用 JQuery 找到相關 checkbox 中被勾選及未勾選的數目，一種方法是使用 :Selector 來處理... 範例如下，照走一遍應該就很有心得了。 HTML:   <label><input type="checkbox" name="check00" />One</label>   <label><input type="checkbox" name="check00" />Two</label>   <label><input type="checkbox" name="check00" />Three</label> JQuery: var num1 = $('input[name=check00] :not(:checked) ').length;  // 取得未勾選數目 var num2 = $('input[name=check00] :checked ').length;         // 取得己勾選數目

網頁版面有相當多種型式(如柵欄型...)，其實只要透過 CSS 中的 float 將不同長度及寛度(width & height) 就可設計出不同的版面。對 float 真的要好好了解，它可算設版的最佳好朋友。 HTML: <body>   <div class="one">1</div>   <div class="one">2</div>   <div class="one">3</div>   <div class="one">4</div>   <div class="one">5</div> </body> CSS: body{   width:1000px;   height:250px;   background-color:#ddeecc;   border:2px solid black; } *{   margin:0;   padding:0;   } div{   display:inline-block;   text-align:center;   font-size:20px;   border:0 solid red;   } div:nth-child(1){   width:25%;   height:100%;     background-color:red;   float:left; } div:nth-child(2){   position:relative;   left:0;   width:50%;   height:30%;   background-color:rgba(0,0,255,0.3);   float:left; } div:nth-child(3){  width:25%;   height:100%;   background-color:#887766;   float:right; } div:nth-child(4){  widt

CSS3 常用到動畫效果，最重要就是跟 transform & transition 做好朋友，底下範例相信能對 transition & transform 能有基本的認識及了解才對。 HTML: <div id="wrapper"> <div class="paneNest">   <div class="pane">     <div class="face front">       Big     </div>     <div class="face back">       Small     </div>   </div> </div> </div> CSS: *{   -webkit-transition: all 10s;  // 過度效果及所需時間設定 all 指全部效果都處理   -webkit-backface-visibility:hidden; } #wrapper {   width:564px;   height:164px;   position:absolute;   left:60%;   margin-left:-282px;   top:5%; } .paneNest {   display:inline-block; } .paneNest:nth-child(odd):hover .pane {   -webkit-transform: rotatex(-720deg) rotatey(-720deg) rotatez(-720deg)  scale(0.5,0.5); // transform 可以針對 rotateX rotateY rotateZ 三維做出不同旋轉效果，sacle 則為過度後呈現的大小，0.5是一半，這裡只有對 nth-child(odd) 也就是單數 div 做處理，如果想要兩張圖一直換，那就加上處理 nth-child(even) 就行囉 } .pane{   width:15

這個小小的問題，對許多初學 CSS 的朋友來說，可能是大大的頭痛，剛開始學習 CSS 時也是被一堆 display & position & float ... 等等搞的暈頭轉向.. 就簡單的介紹下兩者的不同吧!! HTML: (先弄出兩個 div 出來做測試) <div id="div1"></div> <div id="div2"></div> CSS:  // 這是基本 div 設定 div{   height:100px;   float:left;   border:2px solid black; } #div1{  background:red;   // div1 背景為紅色 } #div2{  background:green;   // div1 背景為綠色 } 範例一:   ( div1 & div2 都使用relative，使用position，雖然 div2 設定了 left:30px; 但是完全不會有效果，這是由於 div2 使用了 absolution ，div2 會依據 div1 中 width:150px; 來決定位置< 也就是位置永遠定在 150px 了 >，並緊貼在後。) #div1{   width:150px;   position: relative ;   left: 40px ;  } #div2{   width:50px;   position: absolution ;   left: 30px ; } 範例二:  ( div1 & div2 都使用relative，div1則會距離左邊留下 40px ，div2 會依據 div1 中 width:150px; 的位置向左 30px ，這時若修改 div1 的大小 width 為 200px，會發現 div2 位置其實就會跑到 200px 再加 div2 中 left:30px; 變成在距離左邊 230px 囉 ^^ ) #div1{   width:150px;   position: relative ;   left:40px;  }

今天無意中看到一個 CSS3 屬性 pointer-event 可用來對滑鼠點擊部份做特別處理(底下為 hover)， 也許將來用的到，就先記下來，範例中HTML <svg><rect> 後使用 pointer-events: stroke ; 其它功能屬性還有 visible、visibleFill、painted、all 等等，可參考 OXXO 的 http://www.oxxostudio.tw/articles/201409/pointer-events.html 。 HTML: <svg width="200" height="140">   <rect width="100" height="100" fill="#f00" stroke="#000" stroke-width="10" x="20" y="20" id="test"></rect> </svg> CSS: #test{   pointer-events: stroke ; } #test:hover{   fill:#09f; }

最近工作上用到廣告輪播 (boostrap 中的 carousel)，上面要求要能在底圖上顯示文字，後來發現 carousel 中有個 class 叫做 carousel-cpation 就可以直接上字，只是無法對齊圖片中間位置，尋求 google 大神協助下，CSS提供了二個屬性( display:flex & align-items:center )立馬解了我的燃眉之急，flex 使用了 box-model 並讓所有內容置中(align-items:center)就大功告成.. 那還不快寫下來，就對不起它了。 HTML:        <div>             <div id="myCarousel" class="carousel slide" data-ride="carousel">                 <ol class="carousel-indicators">                     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>                     <li data-target="#myCarousel" data-slide-to="1"></li>                 </ol>                 <!-- Wrapper for slides -->                 <div class="carousel-inner">                     <div class="item active">                         <img src="/image/AAA.jpg" alt="..."

常會使用 $.ajax 透過 WebService 取得資料顯示於畫面，寫個簡單範例記錄下來: 結果要得到 "Name1" 的字串顯示於  <div id="bannerId1"></div> 裡面。 JQuery: var index = 0; var $res;  $.ajax({                 type: "POST",                 url: "AAA.aspx/ WebServiceFunction ",                 data: "{}",   // <-- 不帶參數                 contentType: "application/json; charset=utf-8",                 async: false,    // <-- 使用非同步                 cache: false,    // <--不用 cache  每次重要                 dataType: "json",  // <-- 使用 JSON 格式                 success: function (data) {                                         if (data.hasOwnProperty("d")) {                         $res = data.d;                     }                     else {                         $res = data;                     }                                                          var myE1=angular.element(document.querySelector('#bannerId1&

這篇程式是 2016/6/6(一) 我從 CodePen 翻抄寫過來的， https://codepen.io/wuk/pen/oLjjxO 附上網址及部份說明.... 很簡單，但有空還是要多練練基本功。 裡面用到了 font-awesome.min.css 所以記得要在 CodePen 實作要記得在 Setting 中加入 HTML: <div class="content"> <i class="fa fa-plane fa-5x tt"></i>   // fa-bug fa-plane 就是 font-awesome 所提供 <i class="fa fa-bug fa-5x tt"></i> <i class="fa fa-phone fa-5x tt"></i> </div>     SCSS:      @minxin center{       // scss 繼承 Center      ...      }      @keyframes expand // 實作動態顯示函數      {         from{ transform: scale(1); color:#00ff00;}   // 從原本大小開始 25%{transform:scale(1.5); color:#ff00ff;}    // 放大為 1.5 倍，產生類似心跳的畫面      }          .content     {         @include center;  // 呼叫 center         i         {              ....              animation: expand 1500ms ease-in-out infinite;         }     }    i:nth-child(1)   {          animation-delay:300ms;    //  動畫顯示延遲時間  

今天在 Code Pen 試著寫出 http://codepen.io/floraya/pen/yNZKWq?editors=0010 因此做個重點整理，歸納如下: HTML :(內容簡單明白 省略...) CSS: *{margin:0;padding:0;} body {    overflow: hidden ;  // 讓內容不要跑出 body 外  } .nav{    position:fixed; // 這樣導覽列才會固定住(重要) } li{ .... box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) inset, -1px -1px 1px rgba(0, 0, 0, 0.5) inset;  // 導覽列被選中設定 list-style-type:none; // 隱藏導覽列 li } h1{   font-size:60px;   color:ghostwhite;   text-shadow:0px 0px 15px black;  // 頁面(Page1...)陰影功能 } JQuery: var num_li = $("li").length  // 得到 li 數目  $(window).mousewheel(function(e) {       $("html,body").stop();     ...      if (e.deltaY == -1) {      $("body").animate({       "scrollTop": $(".p0" + n).offset().top      // 使用動畫 scrollType 方式切換至其它頁面     }, ...     //根據捲軸的位置改變右方導覽列游標的顏色     $(window).scroll(function() {     ...         for (i = 0; i <= num_li; i++) {      ...     $(".nav li:eq(" + i + ")&

tab 在網頁中常常會用到，網路上範例不少，自己寫了一個給初學的朋友參考: HTML: <div id="tabs"> <dl style="left:0; width:1580px;"> <dt><a title="baskball">棒球</a></dt> <dt><a title="basketball">籃球</a></dt> <dt><a title="dance">舞蹈</a></dt> <dt><a title="swim">游泳</a></dt> <dt><a title="Race">田徑</a></dt> </dl> </div> CSS: div{   display:block; } body, dl, dt {   padding:0;   margin:0; } dt{display:block;} #tabs{   display:block;   width:530px;   position:absolute;   left:38px;   overflow:hidden;   height:46px;   border-top:1px solid #d7d7d7;   border-bottom:1px solid #d7d7d7;   z-index:99; } #tabs a{   display:block;   height:46px;   float:left;   color:rgb(0,84,166);   position:relative;   width:102px;   text-align:center;   font-family:Helvetica, Arial;   font-size:

CSSer 應該都會有遇用'圖像定位'的時候，雖然簡單但即然常用，學到了一招半式，還不趕快記下...^ ^ (1)background-position: bottom right; // 將圖像定位於右下方，邊緣沒有間隔，相對而言拙了點 background-position: bottom 10px right 10px;  // 如下但離右下方各多了 10px 間隔 (2)參考CSS秘密花園  http://www.w3cplus.com/css3/css-secrets/flexible-background-positioning.html 有些瀏覽器不支援此種寫法，需要寫成: backgound: url(image.svg) no-repeat bottom right #fff; backgound-position: right 10px bottom 10px; (3)元件加邊距也可使用 padding 來做，CSS語法 ex: padding 10; (4)花園小編提到 background-origin: (margin-box 、 padding box、border box、content box)之前很少用到，看到就趕快記起來，這個細節部份介紹也請多參考 CSS秘密花園並給個讚哦 (5) background-position: calc(100% - 20px) calc(100% - 20px) 的用法可視其在右上角減10px，下方減10px，透過 calc( )又是一招，記得減號左右皆有空白。 出處參考皆來自 CSS秘密花園，此為個人擷取部份內容，做為個人工作記錄，若有錯誤或侵犯他人權利，還請告之刪除

有時會想動態調整 HTML 元件對齊另一元件位置，可利用 .Position & .OuterWidth 抓到前一元件位置及寛度後加上一數值(算是間距吧^^)，再利用 JQuery 設定 CSS 語法調整。(範例如下) <html> <script> $(document).ready(function() {     $("button").click(function()    {         var x = $("#p1").position();         var w=$("#p1").outterWidth();         var u = x.left + w + 10;         $("#p2"). css ({' position ':' absolute ',' top ': x.top , ' left ': u });     }); }); </script> </head> <body> <p id="p1">This is a paragraph.</p> <button>Return the top and left position of the p element</button> <p id="p2">Change Content<p> </body> </html>

WebForm 專案中使用 JQuery Mobile  有時希望在一個程式頁面下 .aspx 將不同頁面寫在一起，一來避免程式頁面越來越多，另外維護相關程式碼也較方便，之前透過 CSS  display 隱藏其它頁面元件，程式中常要判斷何時要顯示又何時隱藏，好不累人。之前知道 Pages 可用於多個頁面，但在 ASP.NET 下始終沒有找到解決的方法。好在最後仍不負眾望(其實只有我本人)試出下列方法，令人感動 T _ T，那就趕快記下來吧.. 在 Site.Master.aspx 頁面中加入兩個頁面(FirstPage & SecondPage) <body>     <div data-role="page" id=" FirstPage ">         <form runat="server">              <asp:ScriptManager runat="server">                 <Scripts>                 ...                </Scripts>             </asp:ScriptManager>             <head id="hd" ... >             ...             </head>             <div class="container body-content ui-content" data-role="main">              <asp:ContentPlaceHolder ID=" MainContent " runat="server">                 </asp:ContentPlaceHolder>             </div>             <foot

前幾天公司專案在 ASP.NET 頁面中發現欄位 asp:TextBox 會產生類似多次重繪的特殊景象 ><...(如下圖)，搞了很久最後才發現專案 SiteMaster.aspx 頁面中有引用  JQuery Mobile & Boostrap 而造成了打架行為，做個記錄警惕一下，下次記得 不要再混用  JQuery Mobile & Boostrap 比較保險。

在寫 WebForm 中常會引用到 JQuery 及 CSS，若想寫在一個地方後，讓其它頁面也能夠引用，避免重覆寫碼，那 Site.Master 絕對是最好的選擇，不過有時 aspx 頁面可能在不同資料夾路徑，絕對路徑的寫法那可是萬萬行不通。那相對路徑呢? ....是很好的idea ?只是要注意在 JavaScript 中 ~ 號並非能夠被解析為根目錄。所以要透過 ASP.NET 的 ResolveUrl 做轉換的動作哦，另外 CSS 則不需要(小O 才疏學淺，原因未明)。 透過以下使用 JQuery Mobile 舉例如下: <script src="<%= ResolveUrl ("~/Scripts/jquery-1.11.3.min.js") %>" type="text/javascript"></script> <script src="<%= ResolveUrl ("~/Scripts/jquery.mobile-1.4.5.min.js") %>" type="text/javascript"></script>     <link rel="stylesheet" href="Content/jquery.mobile-1.4.5.min.css" />

寫手機網頁 使用 Client 端的 jquery mobile 時 button 都會比較長，但改用 asp::Button 時發現按鈕大小卻變了，W3C 建議使用 jquery mobile Button 時，儘量使用<a href="#" data-role="button" > ，因此改用 asp::LinkButton 後果然解決了 Button 長度問題，只可惜按下去後，依然有點淚流滿面如下。後來拜求 google 大大，找到了原因及解法如下: 開啓了資料回傳安全驗證功能(EnableEventValidation 為 true)，導致錯誤訊息產生。如果必須要驗證資料，則必須使用 ClientScriptManager.RegisterForEventValidation 註冊控制項或直接在頁面.aspx上端 <%Page ... EnableEventValidation = "false"> ，那如果全部頁面都不想驗證，那請在 web.config 下找到 <configuration>      <system.web>       <pages  enableEventValidation ="false" >        ....       </page>       .... </configuration> 嗯  博大精深  ^^ 收工回家去............................

ASP.NET 要從一個網頁(來源網頁)切換到另一個網頁(目標網頁)時，若要抓取來源網頁 ASP.NET 元件內容時，可以有以下兩種做法 GET (這裡指ASP.NET，當然也可以透過 Url 傳參數) & POST 供參考，若有誤也請大家指正: 假設來源網頁為 source.aspx ，目標網頁為 target.aspx 來說 第 1 種方式 ： 運用 PerviousPage Step 1. source.aspx.cs 中加入:  public String GET_TEL  {        get        {                 return txtTel.Text;　// 例如取電話欄位的內容，假設為 '1234'         }  } Step 2. target.aspx 最上面加入　<%@ PreviousPageType VirtualPath="source.aspx" %> Step 3. target.aspx.cs 中就可以利用 string strTel="";  if (PreviousPage != null)      strTel = PreviousPage.GET_TEL;   // strTel 應該要等於 '1234' 第 2 種方式 ： 運用 Request.Form  Step 1. source.aspx 中 元件(ex: aspx::Button) 加入 PostBackUrl = "target.aspx" Step 2. target.aspx.cs 中引用　using System.Collections.Specialized; NameValueCollection nvc = Request.Form; string nextKey, strValue; for (int i = 0; i < nvc.AllKeys.Length; i++) {      nextKey = nvc.AllKeys[i];       if (nextKey == "xx001$Conte

寫程式，免不了要常常在使用非同步機制，對於資源存取的鎖定與獨佔以避免造成不同的thread 或 process 使用到相同的資源(ex 不同的 thread 同時寫入內容到檔案，造成內容錯誤) 而裡面常會用到 Semaphere & Mutex 來做到 critical section ，自己也常會搞混，那就不如記下來方便備查:   Semaphere & Mutex 都是處理同步機制 semaphore 可以設定有多少個 process 存取資源 (利用一個 count)，假如存取的 process數量到達 Count 的值，其他的 process 會被送到一個 wait queue 的佇列中，等待有process釋放資源(這時 Count 會減1)，再繼續執行。 Mutex就像是把鑰匙，記錄是哪個 process 拿到了這把鑰匙的所有權，process取得鑰匙後就能進到 critical section 存取資源，等到存取完成把鑰匙的所有權釋出歸還讓其它的 process 能夠使用，達到 mutual exclusion

C# 執行緒中有時候會需要用到某一個執行緒等待另一個執行緒執行完或經過多久才能執行，MSDN裡面有個簡單透過console的範例，覺得滿受用並在此留下腳印囉.... using System; using System.Threading;   public class SampleCode { static Thread mainThread, thread1, thread2; public static void Main() { mainThread = Thread.CurrentThread; thread1 = new Thread(ThreadProc); thread1.Name = "Thread1" ; thread1.Start(); thread2 = new Thread(ThreadProc); thread2.Name = "Thread2" ; thread2.Start(); } private static void ThreadProc() { Console.WriteLine( "\nCurrent thread: {0} " , Thread.CurrentThread.Name); i f (Thread.CurrentThread.Name == "Thread1" &&  Thread2.ThreadState != ThreadState.Unstarted) if (thread2.Join(2000)) // 超過兩秒 terminate! Console.WriteLine( "Thread2 has termminated." ); else Console.WriteLine( "The timeout has elapsed and Thread1 will resume." );

很簡單地，不過其中對於 align-items 還是 justify-content 其他的 property 有空自己試試，才能真正修成正果，練就爐火純清的境界(紅字為其中比較重要的屬性) HTML: <div class="container">   <div class="content">     <div>Hello</div>     <div>一步一腳印</div>   </div> </div> CSS: .container{   width:50%;   height:500px;   background:red;   display:flex; } .content{   border:2px solid black;   width:250px;   height:80px;   background:red;   margin :auto;   display :flex;   align-items :center;   // 水平居中   justify-content :center;   // 垂直居中 }

如題若不想重覆一堆代碼，並且減少CSS Codeing 時間，SCSS學起來粉重要: 幾個簡單的介紹足以應付目前基本的切版及應用: 1.設定變數(Variable) $color1:red; $color2:yellow; $color3: green; body{ background-color: $color3 ;  // 設定綠色為 body 背景，就是好用又簡單 2. 建立及呼叫函數應用 (@Mixin & @include) @Maxin testfunction ( ){    // 建立函數供使用     background-color:$color2;     font-size:large; } body{  @Include testfunction ( );  // 呼叫函數來使用 } 3.巢狀迴圈(Nesting): .Container{ 　　width;150px;         margin: 0 auto; 　　.Post {     　　　　                  border: solid 1px #ccc; 　　     padding: 10px; 　　　　  　 　　     background:#eee; 　　　　          　font-size: 12px; 　　　　　 　　　　 } 　　} } // 分別指定 class  'Container' 以及 .Container 底下 class 'Post' 相關的 CSS 屬性

如題就不多說了... 代碼如下就請看倌自行參考: HTML: <body id="allimage"> <div id="control"> <div id="header"> header 的內容放在這裡</div> <div id="leftmanu">   <p>左選單內容</p>   </div>   <div id="content">   <p>網頁主要顯示內容</p> </div>   <div id="rightmanu">   <p>右選單內容</p>   </div> <div id="bottom"> 版尾區</div> </div> </body> CSS: #header { background-color: #93F; font-family: Fixedsys; color: #FFF; height: 100px; } #leftmanu { font-family: Fixedsys; background-color: #F93; width: 200px; color: #666; float: left; } #bottom { font-family: Fixedsys; color: #FFF; background-color: #F00; clear: both; height: 100px; } #control { width: 800px; } #rightmanu { background-color: #F0F; font-family: Fixedsys; width: 200px; color: #FFF; float: right; } #content {         fon

有點時間看到透過CSS 來建立圓型按鈕，並能在 hover Event 時產生漸進漸出效果，滿簡單的就放到上面給初學朋友們 參考參考 (大神級的就請多指教) HTML: <div class="center">   <a href="#">     <div class='button'>       <div class="button_outline"></div>     <div class="button_background">    </div>       BUTTON     </div>   </a> </div> CSS: $color_blue:#3C474B; $color_gray:#AEB5B7; $color_white:#ffffff; $transition:2s cubic-bezier(1,0.5, 0.7,1); @mixin center{   position:absolute;   top:50%;   left:50%;   transform:translate(-50%, -50%); } *{   box-sizing:border-box; } a{   text-decoration:none; } .center{   @include center; } .button{   position:relative;   width:200px;   height:200px;   line-height:200px;   text-align:center;   font-family:helvetica;   font-weight:bold;   font-size:1.5em;   letter-spacing:0.2em;   color:red;   transition:$transition; } .button_background{   position:absolut

電子簽章 & 憑證 聽起來好像很玄，但那是什麼東東? 又有什麼用呢? 讓我們繼續看下去.. 電子簽章:       是以PKI (Public Key Infrastructure)技術為基礎的數位簽章方式，裡面要包含了 非對稱演算法、雜湊演算法、時戳等等，才算完整的電子簽章。非對稱演算法是以 RSA 最為代表，在其一開始產生兩個極大數字，稱為 "金鑰對"，彼此無法互導，而是使用第一把金鑰(私鑰)對資料加密，而透過第二把金鑰(公鑰)來進行解密，私鑰由使用者自行保管對電子文件做簽署(即簽章的動作)，而透過第三者機構所留存的公鑰來對文件加以解密驗證(即為驗章的動作)，確認是由簽署者所簽署，達到其 " 不可否認性 "。 憑證(Certificate):     簽章驗證由第三者機構扮演的憑證中心 （CA） 為使用者簽署一張包含使用者基本資料、使用者公開金鑰、憑證有效日期、憑證產生製造日期 等資料之數位憑證，用來驗證使用者所簽署之簽章。放置使用者公鑰之憑證，可以隨時流通在外，讓任何人都可以驗證簽署者的簽章。在這樣的架構下，就要先檢驗簽章本身是否「有效」，除了驗證簽章為該憑證所有人所簽署外，還需要要驗證憑證的有效性，包含檢驗憑證是否是「合法」憑證、憑證有沒有過期、憑證是否有效等。 電子簽章文件格式(PKCS#7 & XML Signature):     在簽署的人簽章動作結束後，要把原始資料與簽章資料產生一份特殊格式的文件，並要能讓外部的人容易取得，以供流通用。目前最常用的是由「RSA組織」定義的「PKCS#7」格式與「W3C」定義的「XML Signature」格式。PKCS #7 是較早被發行的安全文件格式，因此「PKCS#7」也是目前最常被使用的格式。 PS. 可參考 http://www.cc.ntu.edu.tw/chinese/epaper/20070620_1011.htm

Page.ClientScript & ClientScript &  ClientScriptManager 在 ASP.NET 程式中常會看到及用到?但知道它的區別嗎? <1> Page.ClientScipt & ClientScript :     其實它就是 ClientScript 只是忽略了 Page 前字，用於管理普通 script 例如向 Client 輸出一個 <script>alert('hello world');</script> <2> ClientScript  & ClientScriptManager :     ClientScript 是物件，它的類別就是 ClientScriptManager ，至於用途請看 <1> 的部份 在 Server 端有時難免會用到Javascript 能夠靈活運用 ClientScriptManager，相信會有莫大的幫助。

簡單做個動畫背景改變顏色來加深對 animation & @keyframes 用法印象 HTML: <div id="myDiv">Block</div> CSS: <style>  #myDiv{ width:300px; height: 200px; background: red; animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; }    @keyframes mymove{ from { background-color:red;} to {background-color:blue;} } </style>

想透過CSS畫一個圓嗎? 只要將 width height 還有 border-radius 三個設定為相同大小就可以了，簡單的範例如下: HTML:     <div id="circle">TEXT</div> CSS:      #circle{   background-color:red;   color:green;   width:150px;   height:150px;   border:2px solid black;   margin: auto;   text-align:center;   line-height:150px;   border-radius:150px; }

PS :SQL 語法要先學會此帖才有懂哦!! 不然會 zzz.. 在 ASP.NET 按下 SelectBtn 按鈕後利用 LINQ 寫法在 Models 中找到符合條件(sex 是 Man) 將它顯示在網頁上 (在 Browser 按右鍵選檢視網頁原始碼才看的到結果) protected void SelectBtn_Click(object sender, EventArgs e) {              var Models = new[]             {                  new {name="SuperMan", sex="Man", height=200, weight=80},                  new {name="SuperWoman", sex="Woman", height=170, weight=50},                  new {name="SpiderMan", sex="Man", height=190, weight=72}             };             var females = from f in Models where f.sex == "Man" orderby f.name selec t new {f.name, f.height, f.weight};             foreach (var par in females)             {                 Response.Write(par.name);                 Response.Write(par.height);                 Response.Write(par.weight);             } }

HTML 中<ul>下面有好多<li><a href="...">...</a> ,要找出按下的是第幾個<li>(也就是要找出<ul>的子孫啦 ^^)要怎麼做呢? JQuery 叫我看藍字 ==>

WebForm 在 asp:TextBox 中使用 JQuery mobile 的日曆元件 DatePicker 來修改多個選項變數 option 方法，做個記錄並供參考: ( 改成 年/月/日、可下拉改月、可下拉改年) $("#<%=birth.ClientID %>").datepicker({ateFormat:"yy/mm/dd",changeYear:"yes",changeMonth:"true"});