阿發仔部落: 利用Microsoft Report Viewer 動態產出web 報表

安安!! 我發覺我最近寫的系統都會要求輸出大量的報表，而我當一想到這便會頭痛!! 因為制作報表的工具如Crystal report 都是要錢買的。於是在網上尋找一些免費的工具，卻意外發現我所用的免費系統開發工具Microsoft Visual web developer Express版原來有免費的報表add-on工具支援，於是我download了下來使用。而今日我抽空寫出一些步驟給大家吧!!

這個免費的報表add-on工具名為 Microsoft Report Viewer Add-on for Visual Web Developer 2008 Express Edition。

我用完了此報表add-on工具，發現它相比Crystal report或java jesper report有幾個好處:
首先是產生報表效率較快，因為不需安裝要任何額外的plug-in在用戶端。另外，它同樣可以產出excel 及pdf 檔案格式的報表。及最重要的是，微軟的產品一向有精靈自動產生程序碼，而此免費工具同樣有報表精靈產生程序碼. 我們只需修改程序碼, 慳了開發時間。
下載網址是:
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=b67b9445-c206-4ff7-8716-a8129370fa1d&DisplayLang=en

系統需求如下:
支援: Windows Server 2003;Windows Server 2008;Windows Vista;Windows XP
要先有 Microsoft Visual Web Developer 2008 Express Edition SP1
下載後，請同意條款，簡單按幾次下一步便完成安裝。但記得如果是安裝繁體版的 Visual web developer，務必下載相同的繁體版Report Viewer add-on工具去安裝。

好了，再來繼續講如何用Ms Report Viewer 動態產出web 報表的主要步驟:

要完成動態產出web 報表，要產生的檔案如下:

名稱為StockDataSet.xsd 的 Dataset -- 包括了report 資料庫的連結(本專案連結預存過程(stored procedure)去查詢資料庫。
名稱為StockReport.rdlc 的Report Template -- report 排版，包括了report 內的欄位外觀會被 report viewer物件用來顯示。
名稱為Index.aspx的asp.net 頁 -- 包括了Html的查詢表單和report viewer物件把report結果顯示到用戶介面。

至於今次學習所用到之資料表會是Vendor(賣貨者)，因為我假設用戶想查詢關於賣貨者的資料來產生報相關表，而Vendor資料表中會有欄位叫Vendorid 被用來作搜尋，現在開始講步驟吧!!

新增一個專案名為test，並在Solution Explorer新增report資料夾，如下圖:

1. 現在有了專案，要開始講解如何產生首個Dataset檔案指向report資料夾按滑鼠右鍵，選add->New Item出現Add New Item視窗。在右面Catergories選Data，然後在Templates選Dataset，並改Dataset名稱為StockDataSet.xsd，再按下Add按鈕。

您會看到新增了名稱為StockDataSet.xsd的檔案在Solution Explorer的report資料夾中，如下圖:

接著用滑鼠按StockDataSet.xsd的檔案，再在檔案介面出現後按滑鼠右鍵選add->TableAdapter，如下圖:

跟著便會出現TableAdapter Configuration Wizard，您可以新增一個連接資料庫的連線或選擇已存在的資料庫連線，而我用資料庫是mssql express。當選擇了資料庫連線後，再next按鈕，會出現要求您選擇用sql語法或預存過程(stored procedure)，請您選擇Create new stored procedures再next按鈕。如下圖:

之後會出現要求您編制預存過程的視窗，請按Query builder去產出預存過程的程序碼。而預存過程內用來查詢的資料表就是vendor(賣貨者)，再ok按鈕。如下圖:

然後在返回的編制預存過程的視窗按Advanced Options按鈕。取消Generate Insert,update and Delete statements，因為我們動態查詢產出報表所用到只有Sql Select，不需要新增或更改資料庫的內容，之後再按下ok按鈕。而後的介面只需按next按鈕，最後再下finish按鈕。如下圖:

這樣dataset已經自動產生。再來便要更改dataset內的預存過程，因為用動態查詢來產出報表是指使用者在用戶介面輸入一些查詢字串，而這些字串進入預存過程，再透過sql利用這些字串作為條件向資料庫動態查詢，來傳回不同的報表結果，所以必須修改預存過程讓字串進入。
okay，在Solution Explorer視窗下有Database Explorer標籤，我現在按下標籤進入Database Explorer視窗，先前所產生的預存過程NewSelectCommand會出現在所學習用到的資料庫內，如下圖:

用滑鼠指向預存過程NewSelectCommand按下，畫面會出現預存過程NewSelectCommand內的sql，如下圖:

將其程序碼修改成下圖:

這樣便有vendorid 供使用者在用戶介面輸入查詢字串所用(不明白Mssql的預存過程語法, 請自行參考MSDN)。現在要返回dataset做refresh的動作(這是因為手動修改預存過程，在Microsoft web developer不會即時更新)
步驟如下:
用滑鼠按StockDataSet.xsd的檔案，然後指向Fill,GetData()按下，再用滑鼠右鍵按下Configure選項，如下圖:

在configure視窗出現後，按finish按鈕便完成dataset refresh的動作。這樣Dataset檔案已大功告成。

2. 現在開始講解如何產生Report Template 檔案
開始的步驟就是指向在Solution Explorer視窗中的report資料夾。按滑鼠右鍵選add->New Item。然後在出現的Add New Item 視窗中的右面Catergories 選 Reporting，再在Templates選Report Wizard，並改名稱為StockReport.rdlc，再按下Add按鈕。如下圖:

接著report wizard視窗出現，並要求選擇資料來源，請選先前StockDataSet內的預存過程NewSelectCommand，再按next按鈕，如下圖:

之後report wizard所出現的視窗是有關報表版面設定，請依自已喜好設定，而我的報表版面設定分別是 tabular，資料欄位放在Details，外觀是Stepped和Slate，最後報表名稱是StockReport，再按finish按鈕。
當完成設定後，您會看到已新增了StockReport.rdlc的檔案，請在Solution Explorer視窗中把它移動到report資料夾內，這樣檔案StockReport.rdlc設定亦完成。如下圖:

3. 終於到最後的步驟了，就是在index.aspx用report viewer物件把report結果顯示到用戶介面及加上查詢表單供用戶輸入vendorid作動態報表查詢。
首先在Solution Explorer視窗中按下index.aspx編輯，然後選擇index.aspx的設計介面。再來便是在ToolBox視窗選擇Reporting 的MicrosoftReportViewer物件，並把它拖入index.aspx的設計介面中，如下圖:

然後請在設計介面中指向MicrosoftReportViewer物件，這時該物件右方會出現箭咀按鈕。按下該箭咀後，會出現Report Viewer Tasks視窗並要求選擇報表來源，請選擇先前的StockReport.rdlc所在路徑，如下圖:

再在設計介面中指向另一物件ObjectDataSource，並同樣按下該物件右方出現的箭咀按鈕，再按下Configure Data Source選項，如下圖:

這時Configure Data Source視窗會出現，請選擇先前在StockDataSet所產生的物件NewSelectCommandTableAdapter，再按next按鈕。如下圖:

再來便是選擇先前在StockDataSet所產生的GetData，再按next按鈕。如下圖:

接著到了Define Parameters視窗，您會有疑問究竟這視窗內設置的參數有何用? 其實，先前我曾說使用者在用戶介面所輸入的查詢字串會被進入預存過程NewSelectCommand內，而這視窗內就是用來設置字串進入的方式。明白後，請在Parameter Source選擇Form，而FormField名稱是vendorid，這是因為我的預存過程是想把用戶輸入的查詢字串vendorid由Html表單透過post方式傳進我的預存過程。當預存過程內有了要求的參數便作Linq查詢以產生報表，設置如下圖: