學習心得

1. 本週學習心得分享
2015/03/20
李佳駿

2. Server Code / Client Code
javascript 是執行在 client 端的程式，
而 C# 是執行在 server 端的程式

3. Server Code / Client Code
執行時機做一些區分，
1.Submit 之前，由 javascript 控制
2.Submit 之後，由 C# 控制
3.Submit 結束， Client 端頁面開始 Render script ，又回到
javascript 控制

4. Server Code / Client Code
Render script
@model MemberViewModel
<div class="controls">
@Html.TextBoxFor(x => x.Account)
@Html.ValidationMessageFor(x => x.Account)
</div>

5. Server Code / Client Code
aspx 中選擇 OnClick 跟 OnClientClick 兩個前面的圖示有什麼不同， OnClick 是
Event ， OnClientClick 是屬性

6. Server Code / Client Code
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick=“
if(!confirm(' 是否執行後端程式？ ')){alert('aaa');return false;}"
OnClick="Button1_Click" />

7. Server Code / Client Code
在按下某的按鈕後，先執行一段程式，接著跳出一個確認窗讓使用者確認是否繼
續執行
protected void Button1_Click(object sender, EventArgs e)
{
//Do something before confirm
// 動態註冊一個 JavaScript 詢問使用者是否繼續執行 ?
Page.ClientScript.RegisterStartupScript(typeof(string), "script",
"confirm('Submit form?');", true);
//Do something after confirm
}
以上做法無法達成所需的功能

8. Server Code / Client Code
 <asp:Button ID="Button1" runat="server"
OnClientClick="if(!confirm('Submit form?')){return alse;}"
OnClick="Button1_Click" Text="Button" />
 以上寫法雖然充分的區分 Server Code / Client Code 可是還是無法達成一開
始的需求「執行完某些動作後 --> 跳出確認窗 --> 再執行某些動作」

9. Server Code / Client Code
protected void Button1_Click(object sender, EventArgs e)
{
//Do something before confirm
// 動態註冊一個 JavaScript 詢問使用者是否繼續執行，
如果確定的話，就直接幫他 click button
Page.ClientScript.RegisterStartupScript(typeof(string), "script", "))
{document.getElementById('Button2').click();};", true);
}
protected void Button2_Click(object sender, EventArgs e)
{
//Do something after confirm
}

10. Gridview Event

11. Gridview
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = New DataTable;
GridView1.DataSource = table;
GridView1.Store1.DataBind();
}

12. Gridview
1. GridView1_Init
發生於初始化伺服器控制項時，是其生命週期中的第一個步驟
2. Page_Load
3. GridView1_DataBinding
發生於伺服器控制項繫結至資料來源時
4. GridView1_RowCreated
(DataSource 的資料有幾列就發生幾次 ) 建立 GridView 控制項中的資料列時發生。
5. GridView1_RowDataBound
(DataSource 的資料有幾列就發生幾次 ) 資料列繫結至 GridView 控制項中的資料時發生。
6. GridView1_DataBound
在伺服器控制項繫結至資料來源之後發生
7. GridView1_Load
8. GridView1_PreRender
Gridview 資料處理動作（統計、計算）都必須在 Gridview_PreRender 下來處理
9. GridView1_Unload
發生於伺服器控制項從記憶體卸載時

13. UpdatePanel
 <asp:Button Text=" 查詢 " runat="server" ID="SearchAllButton"
OnClick="SearchAllButton_Click" CssClass="bt2" />
 <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional"
Text=" 案件类别 ">
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="SearchAllButton" EventName="Click" />
 </Triggers>
 <ContentTemplate>
 //Panel 的內容

</ContentTemplate>
 </asp:UpdatePanel>

14. XSD 資料集

15. XSD 資料集

16. XSD 資料集

17. XSD 資料集

18. XSD 資料集
var flowTA = new
EcsCode.ContractFlowDataSetTableAdap
ters.ContractFlowListTableAdapter();
var flow =
flowTA.GetContractExamStageFlowList(_
contractId);

19. XSD 資料集

20. JSON
JSON 字串可以包含陣列 Array 資料或者是物件
Object 資料
陣列可以用 [ ] 來寫入資料
物件可以用 { } 來寫入資料
name / value 是成對的，中間透過 (:) 來區隔

21. JSON
物件或陣列的 value 值可以如下 :
數字 ( 整數或浮點數 )
字串 ( 請用 “ ” 括號 )
布林函數 (boolean) (true 或 false)
陣列 ( 請用 [ ] )
物件 ( 請用 { } )
NULL

22. JSON
 {
 "orderID": 12345,
 "shopperName": "John Smith",
 "shopperEmail": "johnsmith@example.com",
 "contents": [
 {
 "productID": 34,
 "productName": "SuperWidget",
 "quantity": 1
 },
 {
 "productID": 56,
 "productName": "WonderWidget",
 "quantity": 3
 }
 ],
 "orderCompleted": true
 }

23. JSON
 <object>
 <property>
 <key>orderID</key>
 <number>12345</number>
 </property>
 <property>
 <key>shopperName</key>
 <string>John Smith</string>
 </property>
 <property>
 <key>shopperEmail</key>
 <string>johnsmith@example.com</string>
 </property>
 <property>
 <key>contents</key>
 <array>
 <object>
 <property>
 <key>productID</key>
 <number>34</number>

24. AJAX
使用 XHTML 和 CSS 的標準技術為基礎的網頁。
使用 DOM 作動態顯示與互動。
使用 XML 或 XSLT 來變更和操作資料。
使用 XMLHttpRequest 來非同步地交換資料。
使用 Javascript 來結合上述功能
是一種不需要重新整理頁面，透過 JavaScript 來
與伺服器交換資料、更新網頁內容的技術。目的
在於改善使用者的操作介面，提昇流暢度。

25. AJAX
 Asynchronous JavaScript and XML
同步其實不是“同時在處理”的意思，而是有點像是一步一步來的意思
<script src=“a.js”></script>
<script src=“b.js”></script>
所謂的同步載入就是會等 a.js 載入完成後，再繼續開始 b.js 的載入
AJAX ：非同步的 JavaScript 與 XML 技術
誤以為他是同步的，是按照程式碼順序一步一步執行下來的，然後 debug 底到死。

26. XHTML
EXtensible HyperText Markup Language
可擴展超文本標記語言
(hypertext) 就是將各類型的資訊分解成有意義的
資訊區塊，儲存在不同的節點 (node)
<p>56</p>

27. XHTML
與 HTML 的差異：
1.XHTML DOCTYPE is mandatory
2.The xmlns attribute in <html> is mandatory
3.<html>, <head>, <title>, and <body> are
mandatory

28. XHTML
XHTML 元素必須被正確地嵌套
<b><i>This text is bold and italic</b></i>
<b><i>This text is bold and italic</i></b>

29. XHTML
XHTML 元素必須始終關閉
<p>This is a paragraph
<p>This is a paragraph</p>
A break: <br>
A break: <br />

30. XHTML
XHTML 元素必須小寫
<P>This is a paragraph</P>
<p>This is a paragraph</p>
<P>This is a paragraph</P>
<p>This is a paragraph</p>

31. XHTML
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Title of document</title>
 </head>
 <body>
 some content
 </body>
 </html>

32. DOM
DOM 的全名是 Document Object Model
DOM 最常被用以「與 JavaScript 溝通」 ,
也就是說雖然程式以 JavaScript 寫成 , 但使
用 DOM 來存取頁面及其元素

33. DOM
 var name = document.getElementById("name");
 var name = document 的部分是 JavaScript
 .getElementById("name"); 則是 DOM
 DOM 本身是設計為一種獨立的程式語言 , 以一致的 API 存取文件的
結構表述 , 是以本站的焦點雖然是放在 JavaScript 上 , 「但 DOM 其
實可以與『任何程式語言』共同運作」

34. abstract

35. abstract

36. abstract

37.  server client
 http://www.dotblogs.com.tw/jimmyyu/archive/2009/08/13/10043.aspx
 http://www.dotblogs.com.tw/jimmyyu/archive/2009/06/07/8712.aspx
 Gridview 事件
 http://www.dotblogs.com.tw/teng1026/archive/2013/01/11/87152.aspx
 xsd
 http://www.dotblogs.com.tw/mis2000lab/archive/2008/09/04/5296.aspx
 JSON
 http://blog.wu-boy.com/2011/04/%E4%BD%A0%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A
%84-json-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9/
 AJAX
 http://chenmike.pixnet.net/blog/post/25949189-%E4%BB%80%E9%BA%BC%E6%98%AFajax%EF%BC%9F
 XHTML
http://www.hope.com.tw/culture/showbox.asp?o=200308060949506012
 http://www.w3schools.com/html/html_xhtml.asp
 同步定義
 http://www.victsao.com/blog/81-javascript/319-javascript
 DOM
 http://pydoing.blogspot.tw/2011/08/javascript-htmldom-overview.html
http://karenten10-blog.logdown.com/posts/190835-what-is-the-dom