Client端的程式負責什麼？Server端的程式負責什麼？當兩者想要加在一起用的時候又該怎麼寫？在小舖上的ASP.NET討論版上這種問題出現的頻率應該排的上前幾名了
Client端的程式負責什麼？Server端的程式負責什麼？當兩者想要加在一起用的時候又該怎麼寫？在小舖上的ASP.NET討論版上這種問題出現的頻率應該排的上前幾名了，舉以下這個例子來說：
我想要在按下某的按鈕後，先執行一段程式，接著跳出一個確認窗讓使用者確認是否繼續執行，我該怎麼寫？
protected void Button1_Click(object sender, EventArgs e) 2
{ 
3
//Do something before confirm 4
5
//再動態註冊一個JavaScript詢問使用者是否繼續執行? 6
Page.ClientScript.RegisterStartupScript(typeof(string), "script", "confirm('Submit form?');", true); 7
8
//Do something after confirm 9
}以上的寫法我看過很多次，在我們公司內也被人問過幾次，為什麼這樣不行？
這個問題需要回歸到源頭，javascript是執行在client端的程式，而C#是執行在server端的程式，您想要在server端的程式執行到一半時跑client端的程式，這是否合理？或許有某些技術可以做到，但這通常不是一個正常的使用模式，也容易讓人混淆了兩者間的差別。
一般而言，javascript(or vbscript)跟C#(or VB)之間其實各有各自負責的工作，就我自己來說，我喜歡讓javascript只做單純的UI控制、基本格式驗證，其他的邏輯運算、資料處理等全都放在後端，而如果要讓javascript可以跟C#互動，方法蠻多種的，其中幾個比較常用的方式就是：
1.AJAX：將所要的內容透過AJAX method從client傳遞給server，常用在欄位驗證(EX:帳號是否存在)或者需要較好的UI操作感受時。
2.隱藏欄位：在client端透過javascript將值放到hiddne欄位中，後端則可自hidden中取值，通常用在前端的變動性較高或者前端控制項沒有後端屬性質可取得時。
3.Render script：透過Literal或者RegisterStartupScript將後端的內容render成script，通常用在後端變化性較大，前端無法撰寫一個明確的script function來處理時。
三種方法有各自的使用時機，都蠻好用的。
回到前面那個問題，其實我自己在撰寫時喜歡將client/server code的執行時機做一些區分，
1.Submit之前，由javascript控制
2.Submit之後，由C#控制
3.Submit結束，Client端頁面開始render，又回到javascript控制
依以上的循環，就是一般頁面postback時的狀態，所以回到前面那個問題，一般我們會建議他這樣寫：
在元件上註冊一個OnClientClick的事件，在submit前先讓使用者確認，確認後就submit，否則就不submit。
但我們可以注意一下今天這個案例：
protected void Button1_Click(object sender, EventArgs e) 2
{ 3
//Do something before confirm 4
5
//再動態註冊一個JavaScript詢問使用者是否繼續執行? 6
Page.ClientScript.RegisterStartupScript(typeof(string), "script", "confirm('Submit form?');", true); 7
8
//Do something after confirm 9
}他要的是先執行完某些動作後-->跳出確認窗-->再執行某些動作，我以上的寫法便不可行了，後來我建議他這樣寫：
1.先在頁面上多加一個Button2，並指定後端事件，這邊要特別注意的是，我將他在confirm後要做的事情放到Button2的click事件中了：
protected void Button2_Click(object sender, EventArgs e) 2
{ 3
//Do something after confirm 4
}2.修改Button1的click事件：
protected void Button1_Click(object sender, EventArgs e) 2
{ 3
//Do something before confirm 4
5
//再動態註冊一個JavaScript詢問使用者是否繼續執行，如果確定的話，就直接幫他click button 6
Page.ClientScript.RegisterStartupScript(typeof(string), "script", ")){document.getElementById('Button2').click();};", true); 7
}這邊有個小撇步，我在使用者確認繼續執行後，直接幫他click button2，所以程式的運行方式會比較特別一點：client submit-->server do something-->client confirm-->server do something，透過這種client/server交替運作的方式來達到他所要的功能。
其實只要我們對client/server code的架構更熟析，是可以有很多變化的...
 |
游舒帆 (gipi) 探索原力Co-founder，曾任TutorABC協理與鼎新電腦總監，並曾獲選兩屆微軟最有價值專家 ( MVP )，離開職場後創辦探索原力，致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關，都是在為未來儲備能量，2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》，為培養台灣未來的領袖而努力。 |
