（此文章同時發表在本人微信公眾號“dotNET開發經驗談”，歡迎右邊二維碼來關注。)
題記：這是一個給初學者（尤其對VS不熟悉的BI工程師）的入門操作嚮導。
Qlik Sense是Qlik公司推出的第二代BI產品，它的架構設計的很靈活，實現了前後端分離，所以理論上你可以只使用Sense的後端，而完全自定義前端展示。其實Qlik自帶的Hub就可以看作是一個官方實現的前端。
除了架構的靈活性以外，Sense在前端部分也提供了很強的擴充套件和整合能力，比如可以透過Mashup來自定義頁面，甚至可以把報表或者視覺化物件嵌入到外部Web應用程式中。Mashup本質也是一種嵌入機制，區別只是在於Mashup的頁面是由Sense伺服器託管。
要在自己的Web應用（比如ASP.NET MVC應用）中嵌入Sense其實很簡單，Qlik已經為我們提供了一個針對Visual Studio的外掛——Qlik Analytics plugin for Visual Studio（以下簡稱Qlik外掛）。當然，如果你不使用Visual Studio的話，也可以下載Qlik Explorer for Developers。因為嵌入方式主要在前端，所以嵌入的Web應用可以是任何開發技術開發的。Qlik外掛的基本功能就是讓我們可以瀏覽Sense中的所有元素，並把腳手架程式碼新增到我們的專案程式碼中。
具體的步驟如下：
1，安裝Visual Studio 2015 Community，完成VS的安裝後，下載並安裝Qlik Analytics plugin for Visual Studio。
2，啟動Visual Studio，透過選單“View-Other Windows-Qlik Analytics for Visual Studio”來開啟外掛，如下圖所示：
3，在Qlik外掛中，點選左上角的伺服器圖示來連線到Sense伺服器。伺服器可以是桌面版的地址（http://localhost:4848/）也可以是本機或者遠端Sense伺服器地址（http[s]://server.domain.com[:port]/[VirtualProxy]）。如下所示：
4，Qlik外掛連線到伺服器或者桌面版之後，根據不同的連線地址，顯示的內容有所不同。連線桌面版會列出qvf，而連線伺服器會先顯示所有流，在流之下再顯示App。在每個Sense App下面會列出其包含的書籤、欄位、主視覺化物件（包括篩選器和列表）、主維度、主度量、變數、工作表（Sheet）。每個工作表下面還會列出包含的視覺化物件。如下圖所示：
5，在Qlik外掛中的下半部分，有Preview和Code兩個標籤頁。在選擇一個視覺化物件的時候，預覽標籤頁可以顯示這個視覺化物件的靜態圖。而Code可以為選中物件顯示如下資訊的腳手架程式碼：
- html：基於div的html腳手架程式碼，不是所有物件都適用
- 伺服器節點：伺服器連線資訊的html腳手架程式碼
- App節點：操作和導航按鈕的html腳手架程式碼，包括：ClearAll、Back、Forward、DoReload
- 書籤物件節點：啟用書籤的html腳手架程式碼
- 欄位物件節點：欄位操作的html腳手架程式碼，包括：Select All、Select Alternative、Select Excluded、Select Possible、Lock、Unlock、Select、Select Match、Select Values、Clear
- 視覺化物件節點：視覺化物件的html腳手架程式碼
- Sheet物件節點：Sheet物件的html腳手架程式碼
- id：所有物件節點（不包括伺服器節點、流節點和資料夾節點）的實體ID
- iframe：和html類似，只是基於iframe的程式碼
- layout：具有id的物件節點的物件模型資料結構的json程式碼
- properties：具有id的物件節點的物件屬性資料結構的json程式碼
6，透過VS的選單“File-New-Project”來開啟新建專案的對話方塊，選擇Web模版中的“ASP.NET Web Application”，重新命名專案名稱，比如“EmbeddedSense”，如下圖所示：
7，在上圖中點選OK之後，會讓你選擇ASP.NET所使用的技術，選擇MVC後，點選“Change Authentication”按鈕，並選擇“Windows Authentication”。這樣做的原因是為了透過Windows驗證來單點登入Sense伺服器。當然使用其他驗證方式也可以，只是就需要根據Sense的SSO規範來額外做驗證整合的開發。其他不用修改，就點OK。注意，理論上選擇Web Forms或者SPA也可以，因為嵌入的主要工作在前端，這裡僅以MVC舉例。如下圖所示：
8，建立好MVC專案之後，_Layout.cshtml檔案（在Views\Shared資料夾裡面），在Qlik外掛中選擇伺服器節點的html程式碼，拖動到“</head>”之上，儲存更改。如下圖所示：
9，開啟“Views\Home\Index.cshtml”檔案，把三個“<div class="col-md-4">”標籤裡面的內容刪除。任意選擇三個視覺化物件的html程式碼，拖動到原來的三個位置中。如下圖所示：
10，按F5執行Web應用，就可以在首頁上看到Sense的視覺化物件已經嵌入到你自己開發的Web應用中了。如下圖所示：
注意：如果視覺化物件不能顯示，可以嘗試使用IE瀏覽器來檢視；如果報錯，可能是Qlik外掛和伺服器版本有相容性問題，可以把_Layout.cshtml中qlik.setOnError方法註釋掉。
預告：接下來我會分享如何把微軟的Power BI嵌入到你的Web應用中。