Summary of Web Development Framework experience based on MVC4 + EasyUI (15) -- use RDLC reports and mvc4rdlc in MVC Projects

Summary of Web Development Framework experience based on MVC4 + EasyUI (15) -- use RDLC reports and mvc4rdlc in MVC Projects

RDLC is a good report with a good design mode and display effect. In my Winform development, using RDLC is also a convenient operation, for example, you can refer to the article "use and comparison of DevExpress XtraReport and Microsoft RDLC reports" or "design and development of the member Management System (2) -- Design and dynamic loading of RDLC reports. But based on MVC, how can we build and display RDLC reports? This article describes how to integrate and use RDLC on the Web development framework based on MVC4 + EasyUI.

1. Bind a data source to RDLC

The report design of RDLC is directly edited using VS. Therefore, it is designed in almost the same way on the Web or Winform. It seems that the data source binding method is a little different, you can choose to use WInform, while Web users can only build data binding objects based on database connection methods.

When creating a data source, the pop-up dialog box is displayed as follows. It seems that the Winform method has a wide variety of data source selection methods.

Finally, a dataset is built on the Web, a user's report interface is designed in the design view, and their corresponding fields are bound, as shown below.

On the RDLC design interface, their operations seem to be the same and there is no difference. You can use various mathematical functions such as SUM and COUNT, or use expressions for fields, formats, styles, and other methods to facilitate the creation of some accurate and beautiful reports. For this part, refer to the two cited articles in the beginning of this article. Here we will not repeat the details here, because they are the same.

2. Create some function buttons and implementations on the Web interface

In the MVC project, create and save the RDLC Report file to the corresponding Report directory, as shown below.

Create a view and create some buttons in the view to facilitate the query of different report formats. The specific effect is as follows.

The HTML code is as follows:

<Div style = "padding: 10px; border: 1px solid black"> <div> <a href = "@ Url. action ("UserRdlcReport", new {format = "Image"}) "class =" easyui-linkbutton "data-options =" iconCls: 'icon-View' "> image output </a> <a href =" @ Url. action ("UserRdlcReport", new {format = "PDF"}) "class =" easyui-linkbutton "data-options =" iconCls: 'icon-View' "> PDF output </a> <a href =" @ Url. action ("UserRdlcReport", new {format = "Excel"}) "class =" easyui-linkbutton "data-options =" iconCls: 'icon-View' "> Excel output </a> <a href =" @ Url. action ("UserRdlcReport", new {format = "Word"}) "class =" easyui-linkbutton "data-options =" iconCls: 'icon-View' "> Word output </a> </div> <div id =" autoUpdate "style =" display: none; overflow-y: auto "class =" SlideContainer "> <table width =" 100% "height =" 100% "> <tr> <td> <table> <tr> <td> </td> <td> </tr> </table> </td> </tr> <td> <iframe id = "myReport" width = "100% ""height =" 800 "> </iframe> </td> </tr> </table> </div>

After completing these la S, we also need to bind and present the RDLC reports in the corresponding controller.

Bind the RDLC report and assign values to the corresponding data source as follows.

            LocalReport localReport = new LocalReport();            localReport.ReportPath = Server.MapPath("~/Report/WHC.UserReport.rdlc");            var dt = baseBLL.GetAll();            ReportDataSource reportDataSource = new ReportDataSource("DataSet1", dt);            localReport.DataSources.Add(reportDataSource);

The rendering operation code is as follows. By default, images are displayed.

            Warning[] warnings;            string[] streams;            byte[] renderedBytes;            renderedBytes = localReport.Render(                reportType,                deviceInfo,                out mimeType,                out encoding,                out fileNameExtension,                out streams,                out warnings);            return File(renderedBytes, (format.ToLower() == "image") ? "image/jpeg" : mimeType);

By default, you can see the report Display Effect of the image.

Of course, we also have other functions above, such as the presentation of the PDF function. This is a good format, and each page is very good. If it is in IE, the PDF file will be opened independently; if it is a Chrome browser, It will be opened directly in the browser, better.

Of course, Excel and Word can only be downloaded and viewed, because the browser does not support previewing and viewing directly, unless it uses other controls or practices.

3. Continuous output of Image Content

If we understand RDLC, we should know that in general RDLC reports, it is displayed through a DeviceInfo information, as shown below is a standard DeviceInfo object.

            string deviceInfo =            "<DeviceInfo>" +            "  <OutputFormat>" + deviceType + "</OutputFormat>" +            "  <PageWidth>8.5in</PageWidth>" +            "  <PageHeight>11in</PageHeight>" +            "  <MarginTop>0.5in</MarginTop>" +            "  <MarginLeft>1in</MarginLeft>" +            "  <MarginRight>1in</MarginRight>" +            "  <MarginBottom>0.5in</MarginBottom>";

However, if the image is displayed, only one page of content is displayed, which is generally 800 in height. However, there may be many records in my reports, how can we make it all displayed?

There are some methods, but they are not perfect, that is, to calculate the approximate size, and then modify the value of PageHeight so that it can dynamically Delete the largest record, so that all content can be output.

To achieve this goal, I made a simple calculation of the height of the report output in the image format, and then changed it to the standard height. The Code is as follows.

            if(format.ToLower() == "image")            {                double inchValue = (dt.Count / 37.0) * 11;                 deviceInfo += string.Format("  <PageHeight>{0}in</PageHeight>", inchValue);            }            else            {                deviceInfo += "  <PageHeight>11in</PageHeight>";            }

The final interface code is as follows.