繼前篇的Visual Studio 2013 Preview記錄文之後，當然也要記錄一下Windows 8.1，同樣的，這是小弟的紀錄文…不會有甚麼新功能介紹，( 小弟也比不上專業阿QQ )，所以也請各位多多見諒…同樣的，如果有興趣的朋友，也可以參考最後面的連結，有提供下載位置。

當下載了一段時間後，就可以開始安裝了，同樣的，這次也很貼心的準備了繁體中文，記得以前Win 8 Preview，只有簡體版本…

接下來，會取得最新的更新，不過感覺上我也沒抓到甚麼更新…大概是為未來鋪路準備用。

然後就是金鑰的部分~有MSDN的朋友們，也可以輕鬆取得金鑰。

然後是授權條款，不過我想應該不會有人真的看完吧…( 好吧，至少膚淺的小弟我，是沒看完過… )

他可以選擇，是否要保留檔案，不過這台原本就是新VM出來的…也沒啥東西啊QQ..

都弄好後，就會準備安裝了

然後就開始進入漫長的更新~~也就是測驗人品的時候!!

當整個弄完後，就完成了….

後記

當然，這篇文章沒啥甚麼營養，只是小弟想記錄一下Win 8 Preview的日期罷了XDDD

參考資料

• http://windows.microsoft.com/zh-tw/windows-8/download-preview

這個問題很簡單，但因為要去VS的建構裡面新增，我怕我未來還是忘記，所以稍微紀錄一下。

這個問題的發生，就是因為小弟手殘，把在版本控制上的AzureContinuousDeployment.11.xaml檔案給刪除了…

所以當使用Web Site要和Visual Studio Online連線的時候，就會出現以下問題。

錯誤訊息如下:

Unable to find AzureContinuousDeployment.11.xaml in ShihChan see http://go.microsoft.com/fwlink/?LinkId=254710

當然，如錯誤訊息的內容，我們可以到官方網址看到解說，但基本上還是少了一些步驟…所以在這邊補齊。

首先，我們先到http://go.microsoft.com/fwlink/?LinkId=254710來下載AzureContinuousDeployment.11.xaml，當然，如果想使用版本控制來還原，也是ok啦…

下載下來後，要把AzureContinuousDeployment.11.xaml放到版控的BuildProcessTemplates目錄下，簡單的說，就是要把這個檔案簽入進去啦!!~

接下來，我們假裝要新建一個組件定義，如下圖，但其實不用真的新增組件定義，我們只是要利用這個介面來新增建置流程檔；我們只需要在下圖紅色框框的地方按下新增來建置流程檔。

接下來，選擇想要的專案，然後選擇剛剛下載下來的AzureContinuousDeployment.11.xaml檔案。( 別忘記，要把AzureContinuousDeployment.11.xaml放到版控上的BuildProcessTemplates目錄下 )

這樣就完成了。

後記

以後不要再手殘了阿QQ..

參考資料

• http://blogs.msdn.com/b/bharry/archive/2012/06/07/announcing-continuous-deployment-to-azure-with-team-foundation-service.aspx

最近有空的時候，剛好在追一個小小的問題 ( 其實也不小，搞了好幾天釐清… )，這個問題主要是當使用Visual Studio Online搭配CI並使用從Web Site下載下來的Deploy檔案時，佈署到Web Site時，到底會使用哪個連線字串的實驗…

原本使用CI、或是Deploy的時候是很單純的，但是兩個混再一起，就有一點點小麻煩了，所以既然實驗了，那就在這邊把紀錄記一下嚕…

首先最單純的，如果使用Web Deploy，那我們可以從這邊去指定資料庫的連線字串變更，那這樣就算Web.config裡面的debug或是release沒寫甚麼，最後還是會改成如下圖的字串。

所以佈署上去後，字串的確會變成如Web Deploy所設定的…

那如果加上CI，並且在Web.config的debug和release加上連線字串的變更，會變成怎樣呢??

首先，我們先來看看Web.Debug.config

<connectionStrings>
<add name="ShihChanDBContext"
  connectionString="Data Source=tcp:web.debug.database.windows.net,1433;"
  xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
</connectionStrings>

然後是Web.Release.config

<connectionStrings>
<add name="ShihChanDBContext"
  connectionString="Data Source=tcp:web.release.database.windows.net,1433;"
  xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
</connectionStrings>

當然，如果直接透過CI做佈署，沒透過Web Deploy當然沒甚麼問題，但我們這邊要對CI做設定，讓他使用Web Deploy。

等待佈署完後，我們再重新檢查佈署出去的Web.config。

是的，也還是l0這組，所以從這邊可以得知，我們改的Web.debug.config和Web.Release.config被覆蓋掉了。

那真的被覆蓋掉了嗎??..我們現在針對Web.config重新拉一個connection string。

<add name="ShihChanDBContext" connectionString="Data Source=(localdb)\v11.0;Initial Catalog=ShihChanDB;Integrated Security=True;MultipleActiveResultSets=True" providerName="System.Data.SqlClient" />
<add name="ShihChanDBContext2" connectionString="Data Source=(localdb)\v11.0;Initial Catalog=ShihChanDB;Integrated Security=True;MultipleActiveResultSets=True" providerName="System.Data.SqlClient" />

然後Web.Debug.config為

<connectionStrings>
<add name="ShihChanDBContext2"
  connectionString="Data Source=tcp:web.debug.database.windows.net,1433;"
  xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
</connectionStrings>

Web.Release.config為

<connectionStrings>
<add name="ShihChanDBContext2"
  connectionString="Data Source=tcp:web.release.database.windows.net,1433;"
  xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
</connectionStrings>

我們來看看最後產出的結果是…嗯…圖有點小…但基本上，第一組Connection String是Web Deploy所設定的，而第二組的Connection String則是從Web.Debug.config來的；所以我們可以確定Web Deploy的設定會蓋掉Web.config的設定。

嗯，等等，眼尖的你發現了嗎??..他替換的是Web.Debug.config而不是Web.Release.config，但我們第一張圖所設定的組態是Release阿!!!!?

是的，這是第二個坑…雖然Web Deploy設定的是Release，但實際上CI不會吃到這個設定，而是會依據CI上的設定；CI上預設是空的，所以預設是使用Debug模式…

其實我們也可以從佈署成功的畫面看到

那如果要改成Release呢??就只能從CI那邊下手了。

發行後，我們就可以看到已經正確的替換成Release了…

大致上就這樣，所以設定的時候要小心啊QQ…

這是一個小小的問題，但小弟我也被問了很多次，所以就順便在這邊貼一下文。

當我們啟用偵錯後，IIS Express通常就會被run起來，但是有的時候，偵錯完畢後，我們不希望IIS Express關掉，因為有的時候，我們可能只需要調整一下View的東西，那這個情況下，根本就不需要關掉IIS Express。

但Visual Studio 2013後，每次偵錯結束後，Visual Studio 2013就會自動的把IIS Express關閉了..但…這是Visual Studio 2013的問題嗎?..其實也不算是啦.. ( 有興趣的可以參考參考資料 )

那回到重點，我們有辦法可以恢復之前的樣子嗎?..

其實很簡單，我們只要在Web專案上，用滑鼠右鍵，然後選擇屬性後，就可以從右邊的視窗中，選擇Web，並取消勾選"啟用編輯後繼續"。這樣子，我們結束偵錯後，就不會被關閉IIS Express了。

啥!?，我沒勾選，但還是有同樣的問題。

那請再檢查這邊…選擇工具的選項。

然後IntelliTrace這邊，記得不能去紀錄呼叫資訊…不然還是有可能會自動關閉IIS Express。

當然，這只是一種習慣，如果以上設定都不想動，那Visual Studio 2013也還有提供Browser Link的功能，這樣就算是在非偵錯的狀態下，我們按了這按鈕( 或是ctrl + alt + enter )，也可以把IIS Express叫起來後，就不會關閉… ( 但記得第一次要先偵錯，或是先讓Browser和Visual Studio Link 也就是按一下Browser Link的鍵 )

其實用習慣後，也是滿方便的…大致上就這樣嚕，有想到再補充=v=

參考資料

• http://blogs.msdn.com/b/webdev/archive/2013/07/11/enable-edit-and-continue-debugging-option-is-now-on-by-default-for-new-web-applications-in-vs2013-preview.aspx

好的，這篇是屬於CSS很基本的東西…但小弟前幾天被這個搞了一整天… ( 該重修CSS了..Orz.. )，所以為了讓自己更加有印象，就寫一下這篇文章嚕…至於CSS的高手們，就不要校小弟啦XDDD

nth-of-type和nth-child是屬於CSS Structural Pseudo Classes的其中幾個，而前幾天才發現，小弟自己的觀念錯誤QQ…直到後來，才深深領悟…是怎樣的範例呢…我們先來看一下範例。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .aa:nth-of-type(2) { color: red; }
        </style>
    </head>
    <body>
    <section>
        <div>123</div>
        <div class="aa">我是第1個p標籤</div>
        <div class="aa">我是第2個p標籤</div>  <!-- 希望這個變紅 -->
    </section>        
    </body>
</html>

是的，就是這種簡單的範例，我們利用nth-of-type來選擇要變紅色的區段，而小弟一直預期，應該是第二個標籤會變成紅色… ( 我的觀念錯得離譜，對不起大家QQ )

但結果卻是… ( 喔，至於為什麼div裡面寫著我是p標籤…那是因為我忘記把p標籤這三個字改成我是"我是div標籤"…

Orz…竟然是第一個變紅色….好吧，看到這邊，想笑我的人就笑吧XDDDD，我就真的搞錯觀念了嘛…我們先來看看w3cschool的敘述

The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent.

n can be a number, a keyword, or a formula.

Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.

嗯…小弟一直以為，因為小弟是使用class ( .aa:nth-of-type )來當篩選，所以應該會是去尋找所有的.aa，但實際上，不是這樣啊….

那實際上到底應該是怎樣呢??實際上.aa:nth-of-type的意思是指，找出有.aa這個class的元素(也就是div)，然後這個div的父原素(也就是body)，底下的第幾個div..

所以以上面的案例來說，第二個div是就是"我是第一個p標籤"阿!!~…..

所以，.aa:nth-of-type如字面所說，適用type去尋找…而這個type就是div…

那nth-child呢??…如果我們把上面的範例改成nth-child(2)，如下Code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .aa:nth-child(2) { color: red; }
        </style>
    </head>
    <body>
    <section>
        <div>123</div>
        <div class="aa">我是第1個p標籤</div>
        <div class="aa">我是第2個p標籤</div>  <!-- 希望這個變紅 -->
    </section>        
    </body>
</html>

那基本上還是和上面得到的結果是一樣的…那.aa:nth-child是甚麼意思呢?..簡單的說，就是找到.aa這個class後( div )，上面那層父元素( body )，底下的第二個div元素…

所以，結果還是"我是第1個p標籤"會變成紅色…

基本上就是這樣了QQ….所以，我的CSS應該要重修了QQ…

參考資料

• http://www.w3schools.com/cssref/sel_nth-child.asp
• http://msdn.microsoft.com/en-us/magazine/jj215892.aspx
• http://blog.mukispace.com/something-should-know-css-nth-child/
• http://blog.mukispace.com/nth-child-display-items-justify/
• http://stackoverflow.com/questions/5428676/nth-child-doesnt-respond-to-class
• http://stackoverflow.com/questions/19305821/bootstrap-3-0-multiple-modals-overlay
• http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/
• http://www.kirupa.com/html5/all_about_nth-of-type_and_nth-child.htm

其實這個問題滿多人遇到的，也滿多人問過小弟我…剛好前幾天看到神人在FB PO了這個連結，所以就想說，那稍微做個整理後，給大家當個參考，有興趣的朋友，可以去底下的參考資料看原文喔!!~

Azure VM為什麼會重新啟動，大家想想看自己電腦上，甚麼時候一定會重新啟動!?…是的，當然就是更新後重新開機了QQ；Windows Azure當然也不例外，不可能上雲端的電腦就不用更新吧，又不是惡魔鋼彈會自我再生，自我進化QQ… ( 請參考動漫 機動武鬥傳G.. )

而根據內文所述，大約2~3個月，Windows Azure上的VM，就會因為要更新而重新啟動…所以，通常2~3個月就會遇到一次重新啟動的問題…那大家第一個一定會抱怨，掯!!放到雲端上，還給我重新啟動，那我幹啥丟到Azure…Azure怎麼那麼ooxx!!

也先不要急嘛，我們繼續看下去。

另外，也提醒大家一點，關於這部分的更新與重新啟動…Microsoft是不會通知的!! ( 不會通知的…不會通知的…不會通知的……… )

所以沒收到mail的通知，是很正常的…

最重要最重要的是，目前是沒有任何選項，提供我們將自動更新的功能關閉的!!

好，以上是一部分會自動重新開機，而不會通知…

那另外一部分，當然就是Windows Azure偵測到目前的環境有問題，而進行轉移的動作，這個動作中，有可能會連線中斷，而且根據內文所敘述，也會在Windows Server的事件log紀錄有重新開機的事件。

好，講了那麼多，那大家第一個疑惑，所謂的SLA 99.95呢!!?，所謂的高可用性呢!?，所謂的雲勒!!?

其實在每次的Azure場次，都一定可以聽到大師們講SLA 99.95，而這些大師們都會苦口婆心的和大家說，SLA 99.95是要建構於兩台VM之上。

是的，重點就是兩台VM之上，所以如果要達到高可用性，請使用兩台VM。

無論是Microsoft的更新機制，或是偵測到故障轉移的情況下，Microsoft都有預設的機制(故障域和更新域)可以讓這兩台Server不會同時的更新與轉移，也因此，當一台在更新重新開機的時候，還有另外一台撐著；也因此，才有辦法達到SLA 99.95的高可用性。

所以別忘了，如果只有一台，是有停機的可能性的，而只有兩台以上，才會達到SLA 99.95…

最後，文章後面也提到，目前的確還是沒有更新通知的計畫，但如果大家覺得這很重要 ( 因該沒人覺得不重要吧…Orz… )，也可以反饋給Microsoft…搞不好，未來就會有通知的功能了喔!!揪咪!!

參考資料

• http://blogs.msdn.com/b/narahari/archive/2013/09/24/windows-azure-virtual-machine-restarted-or-shutdown-with-out-any-notification.aspx

最近因為Office 365的開通，所以也開始整合這方面的資源，而申請Office 365後，預設會使用當初申請的網域，例如study4.onmicrosoft.com，其中onmicrosoft.com也是規定的，而前面的字串則是需要全球唯一；所以有時候，很容易會發生自己想要的網域被人家給用走，所以在正式開始使用前的第一步，當然就是把自己購買的網域給Office 365用。

1/9號補充，後來發現蘇老前輩也寫了一篇一樣的文章，只是畫面是舊版的，比小弟我的還詳細，有興趣的朋友，也可以去參考看看喔!~

當然，開始前，要先購買自己的網域，也要自己要有DNS (或是有託管的廠商)，至於這些細節，就不再這篇文章說了喔，請見諒…

而本篇教學，主要是搭配Windows Server進行設定~

在我們進入Office 365後，旁邊有一個網域，就可以透過那個進行設定。

然後選擇新增網域。

接下來，會有三個步驟要做，首先Office 365會先確定我們是否有這個網址的所有權；那他怎麼去確定的呢!?我們看下去就知道。

首先，我們要先輸入網域名稱。

接下來，Office 365會要求我們再DNS Server上，加上新的紀錄；是的，Office 365就是透過這種方式來確認這個網址的擁有人。

而這邊其實有很多選項可以選擇，基本上，因為要使用Windows Server，所以使用一般提示就可以了；而我們要做的，就是把底下的紀錄(選其中一個)加上去就好了。

接下來，當然就是登入到Windows Server裡面去，我們這邊選擇的是加入TXT紀錄，所以這邊選擇Create New Reocrds。

接下來，選擇TXT。

而這邊，我們就填入Office 365給我們的訊息，Record name基本不用填就是代表@的意思，而Text欄位，就填入Office 365給我們的資訊。

對照圖如下。

完成後，點選認證，就會出現下面這個畫面；當然，有的時候DNS解析會有時間的問題，所以即時完成到3天都是有可能的，不過通常我這邊都是填完後，立即生效。

接下來就是第二步驟，第二步驟是新增使用者，但我們現在不想新增。

暫時不想新增，所以我們就先跳過吧。

最後，到達第三個步驟，是要設定Exchange、Lync或是Sharepoint的DNS之用，基本上設定的方法和前面的做法差不多；而這邊小弟暫時沒有要打算設定Sharepoint所以就沒勾選了。

首先，先設定Exchange Online，作法和前面一樣，只是這次有MX和CHANE要選。

回到DNS Server，如下圖，我們可以看到MX的設定和CHNAME的設定，我們就一樣的上面的資訊填入進去就可以了。

接下來是Lync Online，這裡有一個SRV的類型比較特殊一點。

一樣，我們可以從新增TXT那邊找到SRV的新增。

基本上對應的關係如下。

除了Lync Online外，還有一些要Key到DNS Server裡面的，但因為步驟都一樣，小弟就不多說了；完成之後呢，就會出現下圖。

這樣就代表完成了。

後記

有的時候，改完DNS後，不會那麼即時，可以稍微等一下喔!~

參考資料

• http://www.askasu.idv.tw/index.php/2012/04/30/1905/

大家應該知道，Windows Azure申請的時候，要填入信用卡；當然，在個人使用下是沒有多大問題，但如果牽涉到公司付款，想叫老闆掏卡出來使用，大概比登天還難。

好，就算老闆不想掏卡出來，用自己的卡申報，報帳等等，其實也有許多的困難處；也會造成財務的埋怨，其次，發票等等東西也不好處理阿!!!~

但這部分現在不用擔心了，因為Microsoft也聽到了大家的抱怨聲音，所以現在也可以將帳號從信用卡改為銀行付款了!!( 感謝Tom哥的指導=v= )

所以這篇，就來實際的教學，看看在企業用戶下，該如何申請Windows Azure來使用!!最後，一起上雲端吧!!

這個範例會有幾個步驟，基本上也沒啥難度啦，大家可以自己參考想要看的章節。

1. 申請Microsoft Account
2. 申請Windows Azure試用(註冊)
3. 開Case給Microsoft，申請銀行付款
4. 變更選項，改成銀行付款
5. 移除信用卡

申請Microsoft Account

大家第一個疑惑是，為什麼還要申請Microsoft Account??，其實這不是必要的，但卻是建議的，試想看看，今天假設是我申請，用我現有的Microsoft Account申請，那如果未來小弟我跳槽高升，帳號要轉移的時候怎麼辦??

雖然Azure管理介面還是可以設定不同的Account，但一勞永逸的方法，還是申請一個專門處理這個服務的帳號吧!!所以還是建議大家申請一個新的Microsoft Account…

另外，要注意的是，不用申請到別國的Microsoft Account，不然未來付費可能會卡住，請乖乖待在台灣吧~~

我們可以到Windows Azure官網，然後點選免費試用!!

通常我們就是直接登入了，但這次我們要新申請帳號，所以就選擇紅色框那邊吧。

申請我相信應該沒啥問題，既然都被交付要申請Azure了，我相信申請Microsoft Account這件事情應該沒啥難度吧….

但比較特別的是使用者名稱這邊，這邊我們可以用任何一個e-mail來申請註冊，例如xxx@gmail.com。這樣的話，到時候認證信就會寄到gmail裡面去( 當然也可以用這個e-mail來登入線上的Outlook )；簡單的說，這裡的e-mail只是個名稱認證罷了…

所以這邊會建議，如果有公司專用的mail，可以和IT部門申請一個Azure@xxxx.com。或是其他的mail，來專門管理類似的服務。

其次，我們也可以點選"或取得新電子郵件地址"，來使用xxx@outlook.com的郵件位置，也是一種選擇。

當然，後續也沒啥好注意的了~就這樣把Microsoft Account申請完吧。

接下來，要進行申請Azure

申請Windows Azure試用(註冊)

接下來，使用剛剛註冊好的Microsoft Account來重新登入，並且重新申請Windows Azure，就可以看到以下畫面。

需要注意的是國家的部分，記得要選擇台灣…不然付費到時候可能會有問題，姓氏的部分都還好，未來還可以進行更改，不用擔心。

其次就是驗證的部分了，可以選擇傳送簡訊或是撥號給我；這邊不要狂送，不然會被微軟的系統鎖住。( 防止有心人士亂發簡訊 )

接下來是付款方式，這邊如果搶不到老闆的卡，就只能默默地先輸入自己的信用卡了…(泣)

最後，合約的部分，"我同意"不勾就沒辦法送出…

到這邊，Windows Azure就申請完了，基本上要注意，申請完後，的確就是可以使用了，而且會有一定額度的免費試用；但小弟我建議，等整個流程跑完後，在來使用會比較好，不然不小心把消費限制關掉，又大量使用，很可能卡就炸掉了…

開Case給Microsoft，申請銀行付款

申請完成之後，我們要開Case給Microsoft，來申請銀行付款。申請的方式很簡單，只要從支援這邊進去支援選項…

接下來只要取得支援就可以了。

接著，會進入後台，並且出現以下視窗，那這邊基本上也沒啥可以選，支援類型就只能選帳務( 要問其他問題，要額外付錢… )，地區就選擇台灣，語言選擇中文，這樣就會由台灣微軟來服務… ( 以前小弟是印度人直接打電話來啊…嚇死了… )，然後建立票證。

接著，選擇適當的問題類型和類別，小弟我這邊選擇是如下圖的選項，基本上，打來的是正港台灣人，只要不要偏差太多，熱情的技術人員還是會協助的。

接下來，要填聯絡方式，不然微軟會找不到人啊!!~所以這邊需要填寫電子郵件和電話號碼。

最後，填一下說明，讓服務人員能知道要協助你甚麼~

往下卷後，還有一些選項，比較重要的是聯絡方式，我是建議直接使用電話吧，反正是講中文的，不怕溝通不懂~~

完成之後，就送出了!!，基本上不會超過8hr，就會打來了，所以手機記得開機阿!!

等待電話來後，與技術人員溝通過後，微軟會再發個mail，請我們提供相關的資料，填好之後，寄回去，就ok了!!

接下來，處理需要一到兩天的時間，因為相關設定，需要總部那邊來處理。

補充說明，當啟用完畢後，別忘了回帳號的管理介面，將Windows Azure完整啟用喔!!

到這邊，就只能等待了。

變更選項，改成銀行付款

目前等待中…一有消息，立即更新

移除信用卡

目前等待中…一有消息，立即更新

說到AD，大概只要是使用Windows Server的人，應該不會沒有聽過的，說來簡單，但複雜也可以用好幾本書來講；而幾乎所有的Microsoft Server都有和AD整合，甚至有些東西還非AD不可!!

而應用程式的驗證，更不用說了，如果是透過AD驗證，幾乎解決了一大半的問題；而且相信新進人員，IT的第一件事情，就是開AD帳號了吧…

好，基本上AD不用多談太多，大家應該都知道了，而這篇我們來談談Windows Azure上的AD。

那Windows Azure AD是甚麼呢!!?好啦，其實說白一點，也就是在Azure建立了一套AD的機制…當然，Windows Azure AD底層都是Microsoft幫我們準備好，我們只需要付錢開心的使用就可以了。

或許有人會想說，我在Local用的好好的，為什麼還要在Windows Azure上建立AD!?

當然，這就牽涉到很多問題了；例如只有在Cloud上面建立服務的時候，不可能還要連回Local吧…同樣的，當我們把Azure當備援的時候，Azure上也必須要有AD的支援阿!!So…AD在Azure上還是有一定的地位的!!而且，現在使用Windows Azure，我們登入的時候，預設就會有ad了喔!!

那接下來，我們來看看怎樣建立一個新的AD!!

P.S 在建立之前，要特別注意，目前…建立完成之後，是無法刪除的…所以其實之前就很想寫這篇，從去年中開始…就想開始寫了…但當初隨便Key了一個，然後到現在為止，都還不能刪除…

首先，我們一樣從老地方開始建立目錄。

接下來，因為是要建立新目錄，所以要選擇建立新目錄，然後輸入名稱和希望的網域，希望的網域基本上是全世界共用的，所以很容易出現被人申請走的狀況，另外這個網頁也和Office 365共同使用..所以如果有使用Office 365的朋友們，就不應該選擇建立新目錄了…

當然，這個網域名稱，未來還是可以透過DNS來解析處理，但還是要特別強調一下，這個申請下去，也不能變更網域名稱了，所以，要特別的小心!!

完成後，我們可以點進去看看，基本上會將我們註冊Windows Azure的administrator自動變成Windows Azure AD的Admin，如下圖，就可以看到，我使用的Microsoft Account，預設就是這個網域的admin喔!!

那到這邊，基本的Windows Azure AD就準備好了，下一篇，我們來看看，如何新增一個新的使用者，來登入Windows Azure管理介面。

參考資料

• http://blogs.technet.com/b/ad/archive/2013/11/08/creating-and-managing-multiple-windows-azure-active-directories.aspx
• http://technet.microsoft.com/en-us/library/dn468213.aspx

繼續延續上一篇，這回合，我們要很快速建立一個新的AD使用者，基本上這篇很簡單，但為了讓主題能延續和好查詢資料，小弟我還是分開了QQ..

首先，我們只要進入建立好的AD，然後選擇使用者，接下來加入使用者就可以了。

接下來，關於使用者類型，有分成三種。

第一種是您組織的新使用者，簡單的說，就是建立這個網域的使用者。

第二種是現有的Microsoft帳戶的使用者，就是Livemail、hotmail、這類的Microsoft Account啦!!

第三種是一個Windows Azure AD目錄中的使用者，舉例來說，我還有建立其他的目錄，那我就可以在這個目錄下，新增其他目錄的使用者…

接下來，要細部的設定使用者，以下畫面是針對"您組織的新使用者"，不過基本上三種流程都差不多，比較會有差異的是角色的部分，目前新增Microsoft Account，只會有全域管理員的角色。

注意，這邊這個角色，代表的是AD，和其他東西無關喔!!~

接下來，會建立暫時的密碼，這個密碼當使用者登入的時候，就會要求重新輸入密碼了。

確認後，我們重新登入Windows Azure。( 一般進入Windows Azure後台的登入方式 )

這時候就會要求更改密碼了。

更改完後再登入看看，我們會發現這個錯誤；這是正常的，因為我們雖然設定全域管理員，但那也只針對AD而言，我們必沒有開發Windows Azure的最大管理權限，所以當然還是登不進去阿!

但不管怎樣，我們新的ad帳號已經建立完成了喔!!

下一篇，進行Windows Azure管理介面的開放!!。

參考資料

• http://blogs.technet.com/b/ad/archive/2013/11/08/creating-and-managing-multiple-windows-azure-active-directories.aspx
• http://technet.microsoft.com/en-us/library/dn468213.aspx
• http://www.windowsazure.com/en-us/documentation/articles/active-directory-whatis/?fb=zh-tw
• http://technet.microsoft.com/en-us/library/hh967611.aspx

前面幾篇，有介紹到如何新增AD帳號，AD帳號除了未來可以拿來當應用程式的驗證使用外，我們也可以利用這個AD帳號當作登入Windows Azure管理畫面使用的帳號，首先我們先來看一下上次新增的帳號。

這個時候，如果我們如果想利用sky2來當作Windows Azure的管理者，我們就使用此mail登入。

當然，如果沒有設定，就會出現此畫面。

接下來，我們就來看看如何設定，我們先到設定的選項，並且選擇管理員，再按下加入。

這邊就可以填入sky2這個mail (也就是ad帳號)。

通常按下確定就可以，但如果你建立了多個ad目錄，可能會出現以下的問題；這個問題是，每個Windows Azure，都會對應一個AD目錄，如我目前的Windows Azure，對應的是San.C Net這個AD目錄，不是Study4的目錄；所以他會告訴我，必須是要San.C Net目錄下的使用者，才可以變成管理員。

我們可以從下圖的位置，看到目前的訂用帳戶對應的是San.C Net這個目錄。

如果要更改，只需要點下面的編輯目錄。

這邊就可以變更關聯的目錄了。

按下確定就完成了目錄的對應。

這時候，我們就可以把Study4這個目錄的使用者，變成Windows Azure的管理員了，未來就可以讓sky2直接登入；但要注意的是，這邊Windows Azure的管理員擁有最大的權限，也沒辦法鎖定他的某些功能，所以在開放的時候也要特別注意喔!!~

繼續的玩弄研究AD目錄，我們從自己新增目錄，一路玩下來；但只能自己新增目錄嗎??當然不是；如果有申請過Office 365的朋友們，因該知道，申請Office 365的第一件事情，就是要訂一個AD目錄；既然O365有AD目錄，Windows Azure也有AD的功能，那怎麼可能會不能整合再一起勒!!?所以這篇，就來看看，如何整合O365的AD目錄到Windows Azure去~~~

首先，我們一樣到AD的功能區，選擇加入。

然後選擇使用現有的目錄，並且勾選我現在已經可以登出；但要注意喔，按下去後，就真的會給你登出了喔…

接下來，我們使用O365的管理者帳號來登入Windows Azure。

登入進去之後，就會看到提示，按下確定就可以了。

這邊按下立即登出。

接下來，我們要使用原本的Windows Azure帳號來登入，因為我們還沒有將O365網域的帳號和Windows Azure繫結，所以還是要使用Windows Azure的原管理帳號登入；如果未來想繫結的朋友們，可以參考小弟的另外一篇。

如果發生以下這個錯誤，通常是因為快取還尚未清除，只要清除瀏覽器快取就可以解決了。

然後我們就可以從AD目錄這邊看到O365的目錄被加入了喔!!

這邊可能也要提醒大家一下，如果有管理多個Windows Azure帳號，而且又發現找不到服務了，那可能是這邊的關係…我們可以從下圖這邊，訂用帳戶這邊進行AD目錄的切換，就可以看到所有的Windows Azure的服務喔!~

回到O365看看，我們可以看到在Windows Azure的管理帳號也被加入到O365的AD裡面來了，但不用擔心，這個預設不會使用到O365的帳戶額度。

我們回到Windows Azure看看，會發現在O365的AD帳號全部都過來到Windows Azure了…

AD應用程式這邊，也可以看到O365的應用。

如果O365有自己定義網域，他也會自動同步過來。

然後目錄整合這邊，我們可以看到"針對目錄同步作業驗證的網域"為1，表示有和O365同步。

以上，就完成了!!

後記

之前有問官方一個問題，到底Windows Azure的AD和O365的AD，是用同一組還是拆開?結果官方並沒有明確的答覆，有可能是用Sync也有可能是用同一組。

而目前測試的情況來看，Sync的可能性滿大的，一來是因為"針對目錄同步作業驗證的網域"這邊顯示為1，二來是小弟我在Windows Azure這邊新增一組AD帳號後，O365會有幾秒的誤差；雖然不能完全研判，但目前推測很有可能是用Sync的機制。( 有查到文章的朋友，可以再和小弟說吧QQ. )

最後，小弟也列出起個測試，可以給大家參考看看。

1. 若在Windows Azure管理介面上，新增一個AD帳號，O365會同步，但是不會用到O365的額度，需要自己去勾選要使用哪個O365的方案等級。。( 這邊的方案等級指的是例如O365 E3的等級 )
2. 在O365新增的AD帳號，會自動同步到Windows Azure上去，但同樣的O365的帳號服務設定只能在O365上面設定，沒辦法再Windows Azure上進行O365的服務設定。( 這邊的服務設定指的是例如O365 E3的等級 )
3. 無論從Windows Azure或是O365刪除帳號，兩邊都會被同步刪除。

以上~~接下來，我們就來看看Application如何使用Windows Azure AD!!

我們持續前一篇的Windows Azure AD的後續應用，既然提到AD又提到應用程式，大家應該就會想到，要ASP.NET MVC使用Windows Azure AD驗證了，所以這篇，我們就來看看如何執行。

在開始前，我們可以先看下圖，了解整個的流程。

1. 用戶請求，來了解要從哪裡去處理身份驗證的訪問權限，所以可以從這個步驟得知，要和Windows Azure AD進行驗證。
2. 透過Windows Azure AD進行驗證，當然，Windows Azure AD那邊要去建立帳號。
3. 一旦驗證成功，瀏覽器被重新導向，並且帶這個一個安全令牌（下面的圖形T）。
4. 然後就拿這個個令牌(Token)進入應用程式。

Image source: http://msdn.microsoft.com/en-us/library/windowsazure/dn151790.aspx

基本上和Local的AD驗證差不多啦…那該怎麼做呢?其實很簡單…

首先，我們開啟一個新的ASP.NET MVC的專案，然後選擇變更驗證。

這邊，因為我們要使用的是Windows Azure AD，所以要選擇組織帳戶；接下來，選擇雲端-單一組織(因為小弟我也只有一個阿QQ)；網域的部分，記得要Key Windows Azure AD的網域，小弟這邊因為自己有經過DNS處理了，不然預設的情況下通常是xxx.onmicrosoft.com；存取層級有一些選項可以選，因為我們只需要登入，所以選擇登入就好，如果想要讀寫等功能，可以選擇其他的選項；最後ID URI會自動建立，基本上不用去動( 這個到時候會自動在Windows Azure AD上建立，所以未來也可以自己重新改URI )

完成之後，就可以看到右下角有組織驗證的選項出現了。

是的，其實這樣就完成了… ( 吐菸 )，但實際上做了哪些事情勒!?….

首先，會於NuGet增加這個Microsoft Token validation的Libary。

然後會在Web.config加上 堆資訊。在Section那邊，加上了identityModel的東西，還有appSettings也加上了ida開頭的東西…

然後Golbal.asax也增加了IdentityConfig.ConfigureIdentity();還有底下名稱超長的方法。

此外，也起用了SSL。

處此之外，Windows Azure也自動地將此服務建立起來了。

當我們啟用MVC的時候，就可以發現，他自動地跳轉到登入的頁面。

登入之後，我們就可以從右上角看到，取得了帳號了!!

初步就先到這邊吧，下一篇，會介紹一下，如果已經有應用程式了，該怎樣啟動此功能!!

參考資料

• http://blogs.msdn.com/b/mvpawardprogram/archive/2014/01/20/identity-in-your-own-apps-with-windows-azure-active-directory.aspx
• http://www.cloudidentity.com/blog/2013/12/11/setting-up-an-asp-net-project-with-organizational-authentication-requires-an-organizational-account/

這幾天，在Azure User Group 聽到朋友小葉問了一個Azure Web Site的一個問題，而這個問題，小弟我之前竟然完全沒有想到(發現)過…

這個問題類似是這樣的。

我在Azure上，使用Web Site開了兩個Site，但我沒辦法調整一個Site為L Size的VM，而另外一個Size為M。

嗯，可以調整不同的不是很正常的一件事情嗎!?後來才發現，完全錯誤…

小弟我後來找到神人Scott Hanselman介紹Azure Web Site的這篇文章…所以我就抓幾個比較比較重要的點。

1.到底共用和標準有甚麼不同…

是的，很大的不同，共用指的是和一群人共用一個VM，而標準則是給我們一個獨立的VM；我相信這個大家應該都能了解，但其實這有更進一步的涵義。

如果我們將共用改成標準，我們會發現，它會自動選取所有的網站；當初，小弟我以為這是個坑，一不小心就會付上3倍的錢…

但結果不是這樣的，這裡的標準，代表的是開一個專用的VM給你，而這個VM裡面會放3個Web Site站台，也就是說，其實不是要付3倍錢，而是只要付一台VM的錢，然後給3個Web Site共用…

所以我們回到上面那個問題，這樣的解釋，自然就可以了解，為什麼我們不能一台選擇L size，一台選擇S Size了吧…因為Azure Web Site的標準，就是給你一台VM…( 順便補充一下，一台VM最多可以塞500個Web Site，而只需要收一台的錢… )

所以這樣聽起來感覺是還不錯的XDDDD

OK，我們回到Scott Hanselman的文章，他文章有提到，如果超過8個Web Site的Shared，那還不如用一台VM吧… ( 以下是他網站的截圖…請原諒我直接拷貝~~ )

從這邊可以看到，8個Web Site的費用是77.38美元。

而一個VM的費用是74.70美元，而且可以塞500個…

所以，如果有很多個Web Site，可以考慮租用一個VM…而根據他網站的資料，他自己就開了11個Web Site… ( 小弟也才3個阿… )

2.如何讓Web Site 24hr 不停的Run

這個是我後來看到的，覺得滿有趣的，所以就加入這個豆知識篇XDDD

通常我們租用一個標準的VM，自然而然，上面就會有許多我們放的Web Site，而這台VM也會24HR不中斷的為我們賣命XDDD，但這台VM裡面的Web Site，如果在小時內，並沒有大量地使用，就會進入休眠狀態，以利把資源讓給同一台，其他的Web Sites來使用… ( 偷懶嗎XDD )，當然，這個休眠不代表就死翹翹了，而是當有請求進來的時候，再解凍復活…但就如使用微波爐一樣，解凍也是要依些時間嘛…所以起來的時間會有點停頓…而這時就可以用監控的功能讓他不斷地戳這個Web Sites…而這時候，就可以使用Web Site的新功能Always On來讓Web Site活著.. ( 不是SQL Server的AlwaysOn阿…. 感謝John哥提醒!! )；記住，要標準模式才能使用喔…付費者最大嘛~~

這樣子，就可以保持Web Site的活耀…

以上，小小的豆知識篇~~

參考網址

• http://www.hanselman.com/blog/PennyPinchingInTheCloudWhenDoAzureWebsitesMakeSense.aspx
• http://weblogs.asp.net/scottgu/archive/2014/01/16/windows-azure-staging-publishing-support-for-web-sites-monitoring-improvements-hyper-v-recovery-manager-ga-and-pci-compliance.aspx

其實這篇沒甚麼…但實在是想些一篇文章慶祝一下…是的，Azure上的AD終於可以刪除了!!

記得當初第一次使用的時候…想說既然可以使用，隨便測試一下再刪除…所以就創建了以下這個網域XDDDD

等了不知道有沒有一年QQ…現在終於可以刪除了…當初國外部提供刪除，也是因為AD這塊牽涉到O365…所以刪除這個動作會格外的複雜，而官方也一再的承諾，未來一定會實作…

而如今終於可以刪除了QQ.. (淚奔)…

就這樣…

後記

基本上這篇根本就是紀念文阿…

隔離上次寫文章，竟然整整的拖超過一個月( 連Windows Azure都改名為Microsoft Azure了…)…實在是因為這段時間整個忙到翻掉，上班趕Code…下班查資料…最慘的是，下周起還要進行待在公司的瘋狂加班…來進行衝刺… ( 這大概是我們公司成立以來，第一次破例這樣子了…還好公司方面也覺得Developer很辛苦，所以不會用補修打發我們，而是使用加班費的方式~… ) 但不管怎樣… 還是不想加班阿QQ…

好吧，前面發了一些牢騷後，我們就再偉大的母親節這天，來繼續看一下Microsoft Azure上AD與MVC如何進行整合。

另外，因為整個過程很長，所以會分成好幾篇文章來撰寫…

首先，我們先進入Azure管理介面，然後選擇要使用的AD。

接下來，選擇應用程式，並且選擇加入。

因為我們是要讓自己寫的應用程式可以通過AD驗證，所以要選擇"加入我的組織正在開發的應用程式"，如果要使用第三方應用程式來搭配Azure AD，那就要選擇"從組件庫中新增應用程式"。

接下來，我們要給一下名稱；因為我們是要開發Web應用程式，所以自然就是選擇"Web應用程式和/或WEB API"

接下來，要填一下登入的URL和應用程式識別碼URI，基本上就是你應用程式的網址，而URI則是網址格式的一段字串，通常都是https://[AD名稱]/[應用程式名稱]。

完成之後，我們就要開始進行MVC的開發…這邊我們要玩就玩大一點，所以就選擇全空的專案…

之後，我們要用NuGet進行安裝，首先我們要安裝Token的套件。

全名如下，有需要的朋友可以看一下。

另外，畢竟是驗證，所以我們要使用Identity套件，而我們這邊使用Identity搭配Entity Framework；這邊或許有人會覺得疑惑，為什麼Azure AD的驗證還要搭配Entity Framework !?..其實不用也是可以啦，在官方現在標準的作法，會使用Entity Framework來將驗證方的相關資訊存放到DB裡面去，而不是早期的Web.config…會這樣做的原因，官方是說，它們實現了一個機制，可以利用Lib去產生驗證方的資訊；而會有這種做法，主要是因為官方覺得，早期寫到web.config的時候，是寫死的，所以當驗證方的資訊改變的時候，變成一定要手動再去調整web.config，而中間的這段時間，就有可能讓程式停擺…所以現在官方是希望透過程式自動產生資訊，並且存放到DB；而這次的文章，主要還是會透過DB，小弟我看了一下機制後，感覺還不錯，所以就繼續沿用這個機制來實作，但原則上因該也是可以透過web.config，但這塊可能就請看官大大們，自己嘗試一下嚕~~

所以這邊會把Entity Framework通通加進去~

裝完之後，我們可以先看一下Web.config，並且刪除掉一些不用的東西，原始是這樣。

<?xml version="1.0" encoding="utf-8"?>
<!--
  如需如何設定 ASP.NET 應用程式的詳細資訊，請瀏覽
  http://go.microsoft.com/fwlink/?LinkId=301880
  -->
<configuration>
  <configSections>
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
  </configSections>
  <appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
      <parameters>
        <parameter value="v12.0" />
      </parameters>
    </defaultConnectionFactory>
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
    </providers>
  </entityFramework>
</configuration>

最終結果會被我砍成這樣。

<?xml version="1.0" encoding="utf-8"?>
<!--
  如需如何設定 ASP.NET 應用程式的詳細資訊，請瀏覽
  http://go.microsoft.com/fwlink/?LinkId=301880
  -->
<configuration>
  <configSections>
    </configSections>
  <appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>

</configuration>

我們主要是刪除了，configSections裡面的section name = “entityFramework”這個區段。

<configSections>
<!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
</configSections>

和最下面的entityFramework區段…

<entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
      <parameters>
        <parameter value="v12.0" />
      </parameters>
    </defaultConnectionFactory>
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
    </providers>
  </entityFramework>

這兩個區段主要是用於，當沒有給連線字串的時候，EF會自動的透過LocalDbConnectionFactory來取得localdb，但因為我們會使用connectionString，所以這個兩個設定就顯得多餘了…

基本上，初步的設定就到這邊，下一篇，就會針對Azure AD要使用的Web.config進行撰寫。

參考資料

• http://msdn.microsoft.com/zh-tw/library/azure/dn151790.aspx
• http://blogs.msdn.com/b/mvpawardprogram/archive/2014/01/20/identity-in-your-own-apps-with-windows-azure-active-directory.aspx
• http://blogs.msdn.com/b/mvpawardprogram/archive/2014/02/03/identity-in-your-own-apps-with-windows-azure-active-directory-part-2.aspx
• http://www.codeproject.com/Articles/749588/Role-Based-Access-Control-with-Azure-Active-Direct
• http://www.cloudidentity.com/blog/2013/02/08/multitenant-sts-and-token-validation-4/
• http://www.cloudidentity.com/blog/2013/04/02/auto-update-of-the-signing-keys-via-metadata/

這個月瘋狂加班中，其實已經沒啥力氣寫Blog了，但今天和好友神人Bruce討論到這個問題，感覺不順手記一下，就太對不起Bruce今天的討論了，所以這篇就獻給Bruce吧XDD。

這個問題的情境大致上是這樣的，大家都知道Web API會透過JSON.NET來將物件序列化成JSON，而我們定義的C#物件，裡面的屬性名稱第一個字慣例上都會用大寫…但在JavaScript上，習慣第一個字為小寫…所以龜毛的小弟我，就會在WebApiConfig.cs或是Global.asax裡面去加上這串。(最底下的參考網址有官方連結 )

var json = GlobalConfiguration.Configuration.Formatters.JsonFormatter;
json.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

簡單的說，這段程式碼會告訴JSON.NET，若序列化的話，要把你讀到的C#物件裡面的屬性名稱的第一個單字，轉到JSON的時候，變成小寫喔…

就如同 Name會變成name，UserOrder會變成userOrder.

但現實上，一定不會那麼順利；如果是新的一個Case，那可以一開始的時候就可以這樣制定下來；但實際上，我相信有很多人是在舊的系統上運作，那加了上面的Code就會天下大亂了…

原因很簡單，那是因為GlobalConfiguration嘛…一套用，就全域都套了…

所以在真實環境中，比較好的做法，就是寫個attribute，來給Controller掛上，只要有掛的Controller都會自動轉第一個字母小寫，沒掛的就維持原本的大寫；這樣也大大的提升了彈性。

那怎麼做呢?.就是下面這段程式碼啦!~內容也滿簡單的，反正就是找出舊的，移除後，在放上新的規則~~ ( 感謝Bruce補充，這邊不要用add.要改用insert，不然會擾亂JSON和XML返回的優先順序~ 詳細內容可以參考底下相關連結，有Bruce針對此撰寫的文章~)

public class CamelCasedJsonAttribute : Attribute, IControllerConfiguration
{
    public void Initialize(HttpControllerSettings controllerSettings, HttpControllerDescriptor controllerDescriptor)
    {
        var formatter = controllerSettings.Formatters.JsonFormatter;
        controllerSettings.Formatters.Remove(formatter);

        formatter = new JsonMediaTypeFormatter
        {
            SerializerSettings = { ContractResolver = new CamelCasePropertyNamesContractResolver() }
        };

        controllerSettings.Formatters.Insert(0,formatter);

    }
}

而Controller怎樣使用呢??只要掛上就好，簡單又有力!!

[CamelCasedJson]
public class HoneController : ApiController

這樣子後，就可以順利的解決了現實生活上的問題了!!~

後記

另外，也可以從Model的地方加上Attribute，來告訴Json.NET序列化後，要變成怎樣的Json屬性名稱，這也是一種方式；但是當然，懶惰的小弟，還是使用以上的方法吧=v=.

參考網址

• http://www.asp.net/web-api/overview/formats-and-model-binding/json-and-xml-serialization
• http://stackoverflow.com/questions/19956838/force-camalcase-on-asp-net-webapi-per-controller
• http://blog.kkbruce.net/2014/05/apicontroller-level-configuration-in-webapi2.html#.U3RYIPmSx08

這幾天，遇雷的狀況，都已經快要變成索爾了…而今天要談的這個問題，其實算是JS加上AngularJS的基本功…牽涉的範圍還滿廣泛的…從UI-Bootstrap這個Directive開始..到AngularJS Scope的範圍，一直到JavaScript的原型繼承…

而這篇的整個概念可以看原文這裡，對岸的高手，也有幫忙翻譯成簡體中文，所以有興趣的可以先看一下上面這些資訊( 沒時間看的朋友也沒關係，可以先聽小弟講完，再回頭看… )；而以下的敘述，會依據上面的理論來開始解釋小弟遇到的問題…

問題

首先，我們還是要先來看一下問題…

大家可以從這邊看到原始碼…另外，我也貼一份在Blog…

HTML

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <input type="text" ng-model="testText"  />
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

JS

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    alert($scope.testTest);
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

好，稍微解釋一下這個問題，這個問題主要是使用UI-Bootstrap Modal的時候，如果我們再彈跳視窗的地方，加上一個Textbox，並且用ng-model ( 原始碼上是Bind到testText )來做Bind；最後當我們按下ok按鈕的時候，會用alert($scope.testText)來顯示值…

但實際上，大家玩過後可以發現，是找不到這個值的…而且這個值為定義…

解法

這個解法其實很簡單，我們只要把Text的ng-model改成繫結$parent.testText就可以了…所以會長的如下這樣:

把原本繫結testText改成$parent.testText…

<input type="text" ng-model="$parent.testText"  />

是的，這樣alert就可以順利彈跳出來值…

此外，你也可以改成這樣…變成繫結oo.testText

<input type="text" ng-model="oo.testText"  />

但這時候，JavaScript那邊也要跟調整…我們在一開始的時候設定oo為物件，並且alert改為alert($scope.oo.testText)。

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
  
  $scope.oo = {};
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    alert($scope.oo.testText);
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

是的，以下兩種方法都可以順利解決這個問題…但是大家一定會覺得很奇怪和納悶…為什麼這樣就可以??

解釋

首先，我們回去思索一下問題。

小弟我使用UI-Bootstrap的Modal，並且定義了這個Modal獨立的Controller，但為什麼這個Modal畫面上的ng-model，在Modal這個Controller上讀不到…反之…加了$Parent或是使用oo.這種寫法就可以讀的到!?

其實原理就是一開始給大家看的那個網址( 如果沒看的朋友也沒關係，可以繼續看下去 )；小弟引用了一下原文的一張圖，其實原理就是這張圖上…

我們使用的UI-Bootstrap其實是用AngularJS的Directive寫的，這點我相信大家都沒啥問題…而UI-Bootstrap在設定Directive有使用到Transclude ( Transclude 是替換內容的功能 )，而當AngularJS有使用到Transclude時，其實會建立一個獨立的Scope，也就是圖上的TranscludedScope…

其次，除了TranscluedScope外，AngularJS還會建立另外一個Scope…也就是IsolateScope…而IsolateScope會透過的$$nextSibling指向到TranscludedScope…

發現了嗎?..真實的底層，並不是我們想的，只有我們為Modal建立的Controller Scope…除了我們為Modal建立的Controller Scope外，還有兩個Scope!!

所以我們驗證一下，如下圖，我們可以看到他其實不是在我們Modal Controller的Scope，而是自己獨立的Scope….( Modal Controller的Scope為 Scope(004) )，所以可以確定$scope(007)為TranscluedScope

我們繼續驗證下去…當我們拉到Scope (006)的時候，我們可以看到$$nextSibling確實指向到了Scope(007)，所以可以確定Scope(006)就是IsolateScope

也因此，實際上我們的Controller與定義畫面的model的Scope完全不同，自然Controller也呼叫不到…

但那為什麼用$parent.testText就可以呢??..因為$parent是代表上一層的意思(父層)，而他的父層就是Controller，所以也就是代表在父層的Controller Scope定義了這個變數…

那oo.testText為什麼可以呢…如果ng-model=”oo.testText"這個變數應該也是會落在TranscluedScope上阿??

那是因為JavaScript原型繼承的特性…如果我們只打ng-model=”oo.testText"，那的確還是會落在TranscluedScope上…

但如果今天，我們在Controller Scope裡面寫了$Scope.oo = {}，則因JavaScript原型繼承的特性，當子物件要去定義oo.testText的時候，會先往上找到父層，看看有沒有oo這個物件，如果有的話，就實作於父層的oo下面，加上textText，若父層沒有，就會在子物件那邊，建立一個oo.testText…

基本上就是這樣…

最後，或許有人會說，那如果父層有oo，那我真的要在子物件去控制oo裡面的東西，不就會找不到oo!?，因為只有父層有oo啊!!?

但實際上，子Scope還是可以找的到oo，那是因為父層和子Scope都是參考到oo這個物件的記憶體位置~~

最後的最後，總之，這次的這個Case的原因，其實就是…我們的Controller實際上是屬於父層..但我們直接用ng-model=”testText”的時候，是在子Scope建立了這個變數，而非父層…，所以解決的方法，第一個就是告訴ng-model，要建立這個變數到父層喔!!，或是使用物件的方式，讓這個物件建立於父層~~

就是這樣!!~

後記

利用上班中午休息時間趕稿趕完XDDD，如有錯誤，也請大家多多包涵~~~

參考資料

• http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs
• http://www.lovelucy.info/understanding-scopes-in-angularjs.html
• https://github.com/angular/angular.js/issues/5489
• https://egghead.io/lessons/angularjs-the-dot
• https://docs.angularjs.org/error/$compile/nonassign?p0=undefined&p1=box
• https://docs.angularjs.org/api/ng/directive/ngTransclude
• https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

這個月根本就是大爆炸，除了公司的案子在本月要交付，所以公司事情大爆炸外；其次就是北美TechED 2014的技術大爆炸…

而這次TechED 2014 非常出乎意料之外，原本以為現在MS因為跑Scrum，所以有甚麼新的東西都會先釋出於Blog…，結果這次沒想到，TechED一口氣釋出了一堆新的技術…尤其是ASP.NET MVC vNext ( 也就是MVC的下一版…，通常下一版都通稱為vNext，所以這邊指的是MVC 6的版本 )，根本是核心大翻修…( 不過對使用者來說，還是有兼容舊版就是了，不用過於擔心~ )，至於翻修了啥東西，有興趣的可以參考資訊界的神人前輩，小朱前輩，第一手已經準備好了很多優良的文章，而今天，小弟我這邊只是簡單的紀錄一下，KVM的初體驗過程(羞)，未來有機會當看到那些部分，再逐一補齊~~

另外，請注意，目前這個版本是新到不能再新Alpha版本，請不要使用於正式環境，可以使用Azure的VM，或是虛擬機來玩這個新玩意~。

首先先簡單的介紹一下KVM，KVM是下一代非常重要的一個技術，主要是解決現在版本改變太快，而可能因為各個專案的不同，使用不同的Lib之間的問題。

以小弟的案例來說，目前我們的Case使用到Orchard，而目前Orchard並沒有支援到MVC最新版本，但其他的Case可能會使用到最新版本，所以我們可以利用KVM來控管目前的環境版本，並且選擇適合的環境版本，而透過NuGet，更可以方便的下載下來。

另外，未來也會將GAC移除，透過KVM來統一整個版本間的整合…

好，廢話先到這邊，我們就快速地來建立一下。

首先，我們可以到以下的github網站，未來ASP.NET的Source全部都會放到github上…( CodePlex表示…. )

https://github.com/aspnet/Home

這個網站主要是放vNext簡單的範本，我們到時候可以從這範本來玩玩看。

如果我們有裝GitHub的Tools，我們就可以直接使用Clone Desktop將這個Source下載回來，如果沒裝的朋友，就直接Download ZIP吧…那差別在哪邊??..用Tools可以追蹤目前更新的Source狀態=v=..

另外，如果有要用GitHub Tools，也別忘記要先登入GitHub，那Clone in Desktop才有作用…

我們可以從下圖看到GitHub Tools的功能，可以看到目前的一些更新歷程。

下載完成之後，我們就要進入到下載好的那個目錄，下 kvmsetup.cmd，他會協助幫我們把一些路徑等等之類的設定，設定好…

完成之後我們就可以使用以下指令，kvm install 0.1-alpha-build-0421來安裝。

安裝完成後，我們使用kvm list就可以看到目前我們已經有了這個環境；而未來除了可以讓我們選擇不同的環境外，我們也可以自己準備自己需要的各種不同環境。

另外，雖然我們準備好環境，但我們還沒有把相關的東西下載下來，所以我們要下kpm restore，下圖因為按下去後，下載太多東西了，所以沒辦法忠實呈現XDDD，只能告訴大家，輸入以下指令後，會如上面依樣，下載很多東西。

完成之後，因為我們是要啟動的是web，所以要下k web，如果是命令列的應用程式，就是下k run，所以我們可以從下圖看到，下k run的時候，他會和我們說找不到Main這個起始點；因為現在是要run web應用程式…

完成之後，我們就可以打開瀏覽器，輸入這個範例預設的位置localhost:5001，就可以看到web網頁跑起來了!!!

那就先到這邊，我們後續再繼續看下去~~~

參考資料

• http://www.dotblogs.com.tw/regionbbs/archive/2014/05/18/asp.net.vnext.2014.aspx
• https://github.com/aspnet/Home

這篇應該是Azure File的番外篇…但其實和Azure File完全沒關係XDD…這篇主要是在寫Azure File的時候，發現使用PowerShell的import-module指令時，小弟我選擇了永遠允許，但當時我卻忘記截圖…Orz…所以發揮追根究柢的精神，就去查了一下，怎要把永遠允許移除掉… (結果造成Azure File的文章還沒寫好…= =… )

當我們使用import-moudle的時候，可能會出現以下的訊息。

[V] Never run  [D] Do not run  [R] Run once  [A] Always run  [?] Help (default is "D"):

中文版是這樣。

C:\AzureStorageFile\Microsoft.WindowsAzure.Commands.Storage.File.types.ps1xml 檔案是由 CN=Mi
OU=MOPR, O=Microsoft Corporation, L=Redmond, S=Washington, C=US
所發行，在您的系統上並不受信任。只可執行來自受信任的發行者的指令碼。
[V] 永不執行(V)  [D] 不要執行(D)  [R] 執行一次(R)  [A] 永遠執行(A)  [?] 說明 (預設值為 "D"):

而當時，小弟就隨手的輸入了A…也就是變成了永遠允許。

那現在該怎要移除呢??，其實PowerShell會建立一個憑證，所以我們只要把那個憑證移除就可以了。

首先，我們輸入執行mmc

預設下，mmc裡面是不會顯示憑證資訊的，所以我們要把憑證資訊顯示出來。

這邊選擇憑證，然後按下新增(被跳出來的視窗擋住了)，然後再選擇我的使用者帳號。

我們就可以從受信任的發行者裡面找到這筆憑證，基本上移除就可以了。

這是這個憑證的詳細資料。

移除掉後，就可以了…

那如果不小心按到永不執行呢??那會在沒有信任的憑證裡面，一樣移除就可以了喔!~

就這樣簡單… ( 但找了好久… )

參考資料

• http://superuser.com/questions/433662/allow-powershell-script-to-run-after-marking-it-with-never-run