[VS 2017] ReportViewer เทพออกรายงานตลอดกาลของ .Net

เวลาทำเว็บไปได้สักพักจนเริ่มมีคนใช้งานเยอะชึ้น user จะเริ่มถามหารายงาน สรุปยอด ผลงานเเต่ละวัน ซึ่งโจทย์ที่ได้มาจะเป็นแบบนี้ "ช่วยทำโมดูลรายงาน สรุปยอดให้หน่อย เอาที่สามารถค้นหาได้แล้วพิมพ์ออกมาเป็น Excel หรือไฟล์ PDF ได้ด้วยนะ" ครบเลย.. ถ้าเป็นเมื่อก่อนผมจะเขียนหน้า แสดงรายงานตามผลการค้นหา แล้วใช้ lib อีกตัวมาปั้นไฟล์ Excel อีกทีหนึ่ง

มันก็โอเคแต่เสียเวลาสัสๆ ทั้งเวลาเขียนโปรแกรม และเวลาตอนออกเอกสาร ดังนั้นเพื่อแก้ปัญหาเรื่องเวลา ถ้าใช้ .Net ผมอยากแนะนำให้รู้จัก ReportViewer แล้วชีวิตจะง่ายขึ้น

มันเป็นโมดูลหนึ่งของ Reporting Service ที่อยู่ใน .Net ตั้งเเต่ยุค Web Form จนมาถึงยุค MVC แล้วโมดูลนี้ก็ยังไม่ตาย มีคนเอามาประยุกใช้โดยเอา MVC ครอบ WebForm อีกทีหนึ่งเพื่อใช้งาน module ReportViwer ซึ่ง version ปัจจุบันที่ผมคือ 14.0 ซึ่งหน้าตามันจะดูขาวๆโมเดิลขึ้นมาหน่อย

ชอบตรงไหน 

ตรงที่โยน List, DataTable เข้าไปใน datasource ตารางก็โพล่แล้ว จัดว่าง่าย
ตรงที่มีปุ่ม download Excel หรือ PDF มาให้เลยไม่ต้องเขียนเพิ่ม

เกลียดมันที่ 

ต้องใช้ไฟล์ rdlc เป็น template เอกสาร แล้วไอ้ไฟล์นี้ต้องแก้ใน Visual Sutio ผ่าน Report Designer
ต้องมี Model มารองรับทุก DataSet ที่แสดงในรายงาน

เริ่มเลยขี้เกียจพิมพ์!! 

1 ไปที่โปรเจค์ MVC สร้าง Controller มาใหม่ สร้าง Action มาใหม่แล้วสร้าง View ว่างๆมา บลาๆๆ
2. สร้างโฟลเดอร์ใหม่ใต้โปรเจคชื่อ Report ข้างในนั้น Add New Item.. เลือก WebForm C# ตั้งชื่อว่า ViewReport.aspx
3. ไปที่ package management พิมพ์

Install-Package Microsoft.ReportingServices.ReportViewerControl.WebForms

หรือ NuGet :
"ReportViewerControl.WebForms"

4. ไปที่ไฟล์ ViewReport.aspx ใส่โค๊ดที่หัว

<%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=14.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>

5.ใส่ ScriptManagerControl
6. เพิ่มโมดูล ReportViewer

<rsweb:ReportViewer ID="ReportViewer1" runat="server" ProcessingMode="Remote">

<ServerReport ReportPath="" ReportServerUrl="" />

</rsweb:ReportViewer>

คราวนี้เราจะ design ไฟล์ template แล้วถ้าใช้  VS 2017 เหมือนผมให้ถามกูเกิ้ลว่า "Microsoft Rdlc Report Designer for Visual Studio" แล้ว download มา install

สร้าง RDLC กัน

1. Add new Item.. > ค้นหา Report เเล้วเลือก Report ตั้งชื่อไฟลล์ว่า reportTemplate.rdlc 
2. เพิ่ม Add New Item.. > Visual C# > Data > DataSet ตั้งชื่อ dsMapper.xsd แล้วสร้าง column ใหม่สองอันชื่อ firstname (string) , surname (string)
2. ดับเบิ้ลคลิกไฟล์ rdlc ใต้ folder DataSet กดสร้างไหม เลือก dsMapper มาเป็น DataSource
3. เเล้วเพิ่มตารางลงในเอกสร้าง insert > table ลากคอลัมจาก folder DataSet มาวาง จัดทรงให้สวย

แสดงรายงาน ก้อปโค๊ดข้างล่าง ไปไว้ใน ViewReport.aspx.cs

DataTable table = new DataTable();

            table.Columns.Add("FirstName", typeof(string));

            table.Columns.Add("SurName", typeof(string));



            // Here we add five DataRows.

            table.Rows.Add("ชิน", "ชยุต");

            table.Rows.Add("Chayut", "Chin");

            table.Rows.Add("Hydralazine", "Christoff");

            table.Rows.Add("Combivent", "Janet");

            table.Rows.Add("Dilantin", "Melanie");



            if (!IsPostBack)

            {

                string ReportFile = HttpContext.Current.Request.PhysicalApplicationPath

                + "Report\\reportTemplate.rdlc";

                ReportViewer1.LocalReport.ReportPath = ReportFile;

              



                var rp = new ReportParameter("rp_name", "หัวเรื่อง".ToString());

                ReportViewer1.LocalReport.SetParameters(new ReportParameter[] { rp });

              

                /// add more sheet

                ReportDataSource rds = new ReportDataSource("DataSet1", table);

                ReportViewer1.LocalReport.DataSources.Add(rds);

                ReportViewer1.LocalReport.Refresh();

            }

พอกด รันโปรเจค หน้ารายงานจะขึ้นละ

อยากให้ดู web.config ส่วนที่เพิ่มมาคือ

ทีนี้ถ้าอยากใช้ใน MVC ก็ครอบ ViewReport.aspx ด้วย iFrame ซะ จำไอ้ View ว่างๆข้อแรกได้ไหม ใส่โค๊ดข้างล่างนี้ลงไป เช่น

<iframe src="~/Report/ViewReport.aspx?@ViewBag.queryStr" width="100%" height="410px"></iframe>

จบงาน..

source code ตัวอย่าง