This sample demonstrates how to use the ActiveReports HTML5 Viewer in the ASP.NET MVC5 framework. This Sample is part of the ActiveReports Professional Edition.
Sample Location
Visual Basic.NET
<User Folder>\GrapeCity Samples\ActiveReports 13\Web\HTML5_WebApiWithAngularJs\VB.NET
C#
<User Folder>\GrapeCity Samples\ActiveReports 13\Web\HTML5_WebApiWithAngularJs\C#
Details
When you run the sample, the page with the main view appears. On the left side of the main view, you can click a customer name under the Customer List. On the right side of the main view, you have the Customer Info tab and the Reports tab. Following options are available on this page.
-
Customer List
Displays a list of customer names. You can use the search box on the top to search for customer names.
-
Customer Info tab
Displays details of the customer name selected in the customer list.
-
Reports tab
Displays a report for the selected customer in the HTML5 Viewer. You can choose from the following options.
- Choose Report: You can choose from Orders (Page Report) or Product Details (Section Report). The selected report is displayed in the HTML5 Viewer.
- Choose UI type: You can choose from Desktop or Mobile options. The default mode is set to Desktop. On selecting the Mobile UI type, the layout adapts itself to the mobile device display.
The project cosists of the following elements.
- App_Start folder: This folder contains cs files that are required to run the application.
- Content folder: This folder contains images used for the Viewer buttons. It also contains .css files that define the style of application.
- Controllers folder: This folder contains the HomeController and CustomersController files. The HomeController handles the user interaction and returns the main view. The CustomersController handles the customer details information that is displayed when a customer is selected.
- css folder: The css folder contains the following css files that store styles for the HTML5 viewer application.
- GrapeCity.ActiveReports.Viewer.Html.css
- theme-cosmo.css
- fonts folder: The folder contains the font files to provide styles to the text that gets displayed in the HTML5 viewer at run time.
- Models folder: This folder contains the following classes.
- Customer - Contains information for the rows in the Customers table of Reels.mdb.
- CustomerContext - Contains information for the rows in the CustomerOrders table of Reels.mdb.
- Reports:
- OrderDetailsReport.rdlx: This page report loads in the HTML5 Viewer when you select the Orders report for the Desktop UI type. This report uses the Table data region to display the order details. The Sum function is used to display the totals.
- ProductDetail.rpx: This section report loads in the HTML5 Viewer when you select Product Details for the Desktop UI type. This report uses the Textbox and Label controls to display the data. The Sum function is used to display the total price information for each customer order.
- Scripts folder: The folder contains javascript files and its dependencies required to build this application.
- Views folder: It consists of the Home folder with the index view start file, the Shared folder with the default layout file, ViewStart.cshtml which is the default view start file, and Web.config file that contains settings for the HTTP handler.
- ActiveReports.ReportService.asmx: This is the report web service required for the proper functioning of the WebViewer control. The ActiveReports.ReportService.asmx is added automatically to the project when you place the Viewer control on the form. You can also can add this service by using Add New Item in the Visual Studio Project menu.
- Global.asax: This is the default class that sets global URL routing values for this web application.
- Startup.cs: This is the default startup file.
- Web.config: The configuration file that contains the httpHandlers that allow ActiveReports to process this web application. Note that you need to manually update version information here when you update your version of ActiveReports.